Archived Version

Appearance

Github Actions 入门级教程 ​

使用 Github Actions 在私有仓库自动打包，并部署到公共仓库 ​

本地生成密钥对（私钥和公钥） ​

shell
ssh-keygen -t rsa -b 4096 -C "Deploy Key" -f github-deploy-key -N ""

这会在本地生成两个文件

  • github-deploy-key —— 私钥
  • github-deploy-key.pub —— 公钥

GitHub 配置秘钥 ​

我们把私钥放到我们私有的存放原始文件的代码仓库里面，用于触发 Actions 时使用。

把公钥放到 GitHub Pages 对应的代码仓库里面，用于 vitepress 部署时的写入工作。

配置私钥

比我的 secret 名为 COURSE_TOKEN，添加后的界面长这样：

添加公钥 来到我们存放打包后资源的仓库，选择 settings --> Deploy keys。

创建 workflow ​

因为我们是私有仓库，还需要设置一项操作。在我们私有仓库的 settings --> Actions/General --> Access 部分，勾选上一个选择框，如下：

接着，在我们的私有仓库中创建 .github\workflows\build_doc.yml 文件，写入：

yml
name: Deploy
on:
  workflow_dispatch: {}
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
      contents: read
    steps:
      # 下载仓库代码 / 校验
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      # 安装 pnpm
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 7.17.1

      # 安装 node
      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          cache: 'pnpm'

      # 安装依赖项
      - name: Install
        run: pnpm i
      - name: Build
        run: pnpm docs:build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          # 这里的 COURSE_TOKEN，就是我们在私有仓库设置的私钥名
          deploy_key: ${{ secrets.COURSE_TOKEN }} // [!code hl]
          # 替换为你的公开仓库的用户名和仓库名
          external_repository: keer-tea/public-course-website // [!code hl]
          # 替换为你的公开仓库的分支名
          publish_branch: main // [!code hl]
          # 替换为你的打包后的资源目录
          publish_dir: docs/.vitepress/dist // [!code hl]

以后推送代码，就可以自动部署了，还是挺方便的！

自动将代码仓库发布到 npm 上 ​

首先在 npm 的 Access Tokens 中，创建一个 classic token，并复制其值。我这里取名叫 NPM_TOKEN。

Alt text

然后在 github 的仓库中，点击 New reporitory secret 按钮，取名也叫 NPM_TOKEN，粘贴进刚才复制的值。 Alt text

然后在源代码仓库中，创建一个 .github/workflows/npm_publish.yml 文件，并写入：

yml
name: Publish Package to npmjs

on:
  push:
    branches: [ master ]
    
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org'
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

这样以后推送代码时，都会自动执行 npm publish 命令。不过注意，如果 package.json 的 version 没有更新，将会发布失败。

术语（看看就好） ​

GitHub Actions 有一些自己的术语。

（1）workflow（工作流程）：持续集成一次运行的过程，就是一个 workflow。（一个 workflow 对应一个.github/workflows/*.yml 文件）

（2）job（任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务。（在 workflow 文件里写 jobs 字段）

（3）step（步骤）：每个 job 由多个 step 构成，一步步完成。（在 job 里写 step 字段）

（4）action（动作）：每个 step 可以依次执行一个或多个命令（action）。（step 下面的字段）

workflow 文件 ​

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的.github/workflows 目录。

workflow 文件采用 YAML 格式，文件名可以任意取，但是后缀名统一为.yml，比如 foo.yml。一个库可以有多个 workflow 文件。GitHub 只要发现.github/workflows 目录里面有.yml 文件，就会自动运行该文件。

workflow 文件的配置字段非常多，详见官方文档。

目标一：使用 Github Actions 打印日志😪 ​

在项目根目录下创建一个.github/workflows/suibian.yml文件，文件内容如下：

yml
# 每个 workflow 文件的说明
name: learn-github-actions
# 在 push 代码后触发 jobs 工作流
on: [push]
# 工作流（工作流中的所有 job 组合在一起形成了这个 workflow 文件）
jobs:
  # 一个工作的 id（key）
  check-bats-version:
    # 运行的环境
    runs-on: ubuntu-latest
    # 一个工作分为很多步骤（下面的每个步骤都是一个单独的操作或则脚本）
    steps:
      # 将你的仓库迁出到运行器上操作，每当你的工作将对仓库的代码操作时，都应该使用 checkout 操作。
      - name: Checkout
        uses: actions/checkout@v3
      # 安装 node，可以指定版本
      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: '14'
      # 安装依赖项（bats 就是一个 npm 包）
      - name: Install
        run: npm install -g bats
      # 查看 bats 包版本
      - name: Show version
        run: bats -v

然后提交到 github 上，在Actions一栏里面可以看到。标红的部分分别与上面 yml 文件中的字段对应。

image.png

点开 check-bar-version 工作，查看步骤。如果能看到安装包的版本，说明就成功了！

image.png

目标二：每次 push 代码到 github 时，自动构建部署 github-pages😀 ​

要实现自动构建 github-pages，其实就是使用了 github 的一个开源库。actions-gh-pages

https://github.com/peaceiris/actions-gh-pages.

里面也推荐了官方的自动构建部署 github-pages 服务。

在使用它之前需要先创建一个 github token

然后新建一个.github/workflows/buil_docs.yml文件。这里使用的是 nodejs 项目，每次 push 到 master 分支都打包 vitepress 文档。

yml
name: GitHub Actions Build and Deploy Demo

# 当 master 分支 push 代码的时候触发 workflow
on:
  push:
    branches:
      - master

jobs:
  # job-id:
  build-and-deploy:
    name: 构建并部署
    runs-on: ubuntu-latest
    steps:
      # 获取源码
      - name: Checkout
        uses: actions/checkout@v3

      # 安装 node
      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          # 缓存依赖项
          cache: 'npm'

      # 安装依赖项
      - name: Install
        run: npm i

      # 打打包文档
      - name: Build docs
        run: npm run docs:build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.MY_COURSE_TOKEN }}
          publish_dir: docs/.vitepress/dist

不是特别难，但是需要动手去操作下！

目标三：实现自动提交代码，让 github commit 一片绿 😅 ​

每小时的 1 到 6 分钟制动提交一次。每次提交间隔不能小于 5 分钟。

yml
name: ci

on:
  push:
    branches:
      - master
  schedule:
    # 分钟，小时，日，月，星期
    - cron: "1,6 * * * *"

jobs:
  autogreen:
    runs-on: ubuntu-latest
    steps:
      - name: Clone repository
        uses: actions/checkout@v2
      - name: Auto green
        run: |
          git config --local user.email "lukecheng233@163.com"
          git config --local user.name "lukecheng"
          git remote set-url origin https://${{ github.actor }}:${{ secrets.MY_COURSE_TOKEN }}@github.com/${{ github.repository }}
          git pull --rebase
          git commit --allow-empty -m "a commit a day keeps your girlfriend away"
          git push

目标四：实现自动签到掘金领矿石😂 ​

专业版才有这个功能

可能对你有用的参考链接 ​

Released under the MIT License.

Copyright © 2021-present