使用 Github Actions 工作流自动部署 Github Pages

GitHub-Actions

actions顾名思义就是一堆动作，是一个持续集成服务，持续集成包含了拉代码、运行测试、编译代码、登录远程服务器，发布到第三方服务等等的操作，GitHub将这些操作称为actions。

概念：Workflows, Events, Jobs, Actions, Runners

Workflows 工作流

一个 Workflow 由多个 Jobs 组成

Events

定义哪些事件可以触发 Workflow

Jobs

一条 Job 由多个 step 组成，每个步骤可以是一条可执行的 shell 脚本或者是一个 action

Actions

一个 Action 是一个复杂且重复的任务，可以看成是多个job的组合

Runners

跑工作流的 server，由 Github 提供

一个工作流可以由一个或者多个 Job 组成，每个 Job 可以由一个或者多个 Step 和 Action 组成。工作流需要被一个或多个 Event 触发，并由 Runner 执行，执行成功后，最终实现工作目标。

一、建立仓库

首先在github上创建仓库，如果建立的仓库名称是username.github.io，则最后访问的地址username.github.io/。如果不是这个名称，则最后访问的地址是username.github.io/repo/ ,repo就是仓库名字。

二、添加.github相关配置文件

在项目的根目录下新建.github/workflows目录，workflow就是GitHub Actions 的配置文件。随便新建.yml文件就是一个flow，github会自动运行workflows目录下所有的yml文件。介绍下workflow最重要的几个配置和概念。

name

name字段是 workflow 的名称。如果省略该字段，默认为当前 workflow 的文件名

on字段指定触发 workflow 的条件，通常是某些事件。在本文实例里用的是push，指的就是当git push事件发生时触发该workflow。

jobs

jobs是workflow最重要的部分，表示workflow要执行的任务，可以是一个或者多个。

接下里开始就是本文示例的部署内容。我们希望的流程是，本地改完代码，上传到github后能自动打包部署到gh-pages分支。

在项目根目录新建.github/workflows/page.yml文件

javascript 复制代码

// workflows/pages.yml
name: Deploy Pages

on:
  push:
    branches:
      - master # 这里只配置了master分支，所以只有推送master分支才会触发以下任务

jobs:
  pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16.15.0
        uses: actions/setup-node@v2
        with:
          node-version: "16.x"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITEE_TOKEN }}
          publish_dir: ./dist

首先job里配置运行这个脚本需要的虚拟机环境，这个虚拟机环境由github提供，可用的包括windows、linux、macos等环境，具体看官方文档。在此示例中其实不论哪个系统都是可以的，因为我们需要的是node环境，而node本身就是跨平台的。

接下里设置获取源码、需要的node版本、增加缓存依赖，这里使用官方提供的actions/setup-node@v1、setup-node@v1、cache@v2。这里的@表示版本，使用别人的action时最好都加上版本，以防后面更新的action不兼容当前的脚本。最后会自动部署到gh-pages分支，因为要更新github代码，所以还需要配置github_token。

我这里写的是GITEE_TOKEN,名字随便写都行，和yml里的github_token保持一致。

三、推送代码，

打开 Github 仓库 Actions 标签页，可以看到workflow 已经开始执行。

执行完成后，发现多了一个 gh-pages 分支。

设置 Settings/Pages，将 Source 设置为 gh-pages 分支并保存。等待两三分钟后，打开 Settings/Pages 中提示的url，即可看到项目页面。

运行完后访问 username.github.io/repo 就能看到部署后的效果了。

因为设置了on: push所以以后每当由代码 push 到 master 分支上，都会触发此工作流执行。

源码

gitHub: https://github.com/ytking/ytking

github pages: ytking.github.io/ytking/

有什么说的不对或者有疑问的，欢迎在下面留言交流~~

参考

GitHub Actions 入门教程-阮一峰
Github Actions 官方文档

Github Actions 是 Github 的持续集成服务，和 Gitlab 的 CI/CD 如出一辙。