使用 GitHub Actions 部署博客到 GitHub Pages

笔者目前的博客使用的是 Vuepress, 参考文档,使用 Travis CI 实现了博客推送更新后自动部署。

最近了解到 GitHub Actions ,遂将博客的自动部署改为 GitHub Actions

本文将简单介绍 GitHub Actions 以及笔者博客如何实现自动部署。

GitHub Actions

为什么用 GitHub Actions

  • 尝鲜
  • 它和 `GitHub` 集成到一起,方便
  • 有很多别人已经写好的 actions 可以直接拿来用,避免重复造轮子,节省时间

什么是 GitHub Actions

Event-Driven

GitHub Actions are event-driven, meaning that you can run a series of commands after a specified event has occurred

GitHub Actions 它是事件驱动的,当某个事件,例如 pushmerge 发生的时候,就触发对应的处理 workflows

创建 GitHub Actions

  1. 在 Git 仓库下创建 .github/workflows 目录, 目录下创建一个对应的 xxxx.yaml 配置文件,每个 yaml 文件对应一个 workflows
  2. 一个 xxx.yaml 文件,内容大致如下:(这是我的博客的部署 workflows, 具体含义见注释)

    # Optional - The name of the workflow as it will appear in the Actions tab of the GitHub repository.
    # workflows 的名称
    name: deploy-to-github-page
    # Specify the event that automatically triggers the workflow file.
    # 监听什么事件时触发这个workflows, 这里监听push
    on: [push]
    # Groups together all the jobs that run in the workflow file
    # 这个workflows具体是由哪些任务组成的
    jobs:
      # define job name
      # 任务1, `deploy`是任务的名称
      deploy:
        # Configures the job to run on an Ubuntu Linux runner
        # 在什么环境下执行这个任务
        runs-on: ubuntu-latest
        # Groups together all the steps that run in the job
        # Each item nested under this section is a separate action or shell command.
        # 任务具体包含什么步骤
        steps:
          # actions The uses keyword tells the job to retrieve v2 of the community action named actions/checkout@v2
          # 每个步骤,即可以使用(`uses`)别人写好的`actions`, 也可以跑自己写的命令(`run`)
          - uses: actions/checkout@v2 # 拉取代码
            - uses: actions/setup-node@v2 # 装node.js环境
              with: # 输入这个`actions`需要的参数,例如版本号
              node-version: '14'
              # shell command, The run keyword tells the job to execute a command on the runner.
              - run: yarn install # 安装博客的依赖
                - run: yarn build # 构建博客的静态文件
                  - name: Deploy
                    uses: peaceiris/actions-gh-pages@v3 # 使用别人写好把静态文件发布到`GitHub Pages`的`actions`
                    with:
                      github_token: ${{ secrets.GITHUB_TOKEN }}
                      publish_dir: docs/.vuepress/dist
    
    

部署博客的 workflows 还是蛮简单的,阅读配置文件,可以发现 GitHub Actions 的大致流程是这样的:

  • 当某个事件发生,例如 push ,就会触发 workflows ,对应 .github/workflows 目录下定义的 yaml 配置
  • 每个 workflows 定义
    • 匹配什么事件 (on: push)
    • 定义都有那些任务 (jobs)
  • jobs 中定义任务的执行环境 (runs-on) ,每个 jobs 是由一个一个步骤 (steps) 组成的,每个 steps 可以是
    • uses 别人写好的 actions
    • run 自己定义的命令

所以,思考你想在仓库发生什么事件时,做什么任务,这个任务具体包含哪些步骤,然后编写一个配置文件,就差不多了。

参考链接

Author: Spike Leung

Date: 2021-08-15 Sun 00:00

License: CC BY-NC 4.0