使用 Github Actions 自动部署 Github Pages

参考

GitHub Actions 入门教程
Github Actions 文档

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

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

1. Workflows 工作流

一个 Workflow 由多个 Jobs 组成

2. Events

定义哪些事件可以触发 Workflow

3. Jobs

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

4. Actions

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

5. Runners

跑工作流的 server，由 Github 提供

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

新建项目使用Gihub Actions部署到Github Pages

1. 本地新建 Angular 项目

ng new github-actions-test 

2. 增加 Github Actions 配置

cd github-actions-test
mkdir .github && cd .github
mkdir workflows && cd workflows
touch ci.yml
vim ci.yml

3. 填入以下内容

name: Deploy To Github pages
on:
  push:
    branchs:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false
    - name: Install and Build
      run: |
        yarn install
        yarn build
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4.2.2
      with:
        branch: gh-pages
        folder: dist

build-and-deploy 这个 job 由三个 step 组成，分别是 Checkout, Install and Build, Deploy。

• Checkout step 引入了 actions/checkout@v2 这个 Action，作用是在 Runner 上检出项目。
• Install and Build step 安装项目的依赖包并且编译，这个 step 执行的命令和在本地编译项目时使用的命令没有区别。
• Deploy step 使用了 JamesIves/github-pages-deploy-action 这个 Action 快速部署 Github Pages。branch: gh-pages folder: dist 表示会把dist目录下的内容提交到gh-pages分支。

4. 修改 src/index.html 的 <base href="/"> 为 <base href="./">。因为 Github Pages 是一个静态网站服务，确保从index.html访问能正确找到对应的js，css文件。

5. 提交至 Github 仓库 github-actions-test

6. 打开 Github 仓库 Actions 标签页，workflow 已经开始执行。

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

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

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