使用 Github Action 编译 Vue 发布到 Github Page

我自己平常写的 demo 喜欢放到一起，丢到 github 顺便发布一个静态页面，之前都是用的 travis ci，今天试试看使用 github action 编译 Vue 发布到 github page，action 很简单，只需要在项目根目录下创建一个.github/workflow/xx.yml即可。下面来看看我的 ci 文件

name: build site  # action 的名称

on:               # 触发 workflow 的事件，我这里的意思是只在 master 分支 push 的时候触发
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest  # 环境镜像

    steps:
      - uses: actions/checkout@master # 步骤的运行说明
      - uses: actions/setup-node@master # 设置 NodeJS 环境
      - name: build
        run: |
          yarn
          yarn build
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

上面配置文件中我标出了部分注释，没有标的 run 字段下面是编写脚本的，with 用于设置一些值。job 的 deploy 阶段主要是用的第三方库把编译好的静态代码丢到 gh-pages 分支。push 代码到 master，点开 action 可以看到任务已经在执行了，执行完之后可以看到我们的改动已经更新到 page 上了。