VuePress自动化部署从travis到Github Actions

用 travis 自动化部署 VuePress 之前一直挺稳定，但稍微有点慢 5min 左右，最近偶尔需要 Queued 近半小时。不能忍，切换为 Github Actions 后，从 push 到编译完成，仅仅 2 min，不得不感慨「微软大法好」。

还是记录一下切换过程。

travis 方式（已放弃，仅做为存档）

之前在 travis-ci 平台的配置文件 .travis.yml

language: node_js
node_js:
  - lts/*
install:
  - npm install
cache:
  directories:
    - "node_modules"
script:
  - npm run build
deploy:
  provider: pages
  skip-cleanup: true 
  local_dir: docs/.vuepress/dist
  github-token: $GITHUB_TOKEN # a token generated on github allowing travis to push code on you repository
  keep-history: true
  fqdn: note.wenboz.com
  on:
    branch: master

其中 GITHUB_TOKEN 变量为 Personal access token。

Github Actions 方式

步骤一：配置 Personal access token

可参考 Creating a personal access token 给这么多权限就够用了。

之后在 repo 的 Settings 里配 Secrets，可命名为 ACCESS_TOKEN，与之后配置文件中变量名保持一致。

步骤二：配置 workflows 文件

我们可直接采用开发者 jenkey2011 编写好的 Action 脚本，在这里感谢 jenkey2011 无私分享！

在根目录创建 .github/workflows/vuepress-deploy.yml 文件，由于我的需求是将编译后内容发布到 gh-pages，我的配置是这样的

name: A TO A:GH_PAGES
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build and Deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_BRANCH: gh-pages
        BUILD_SCRIPT: yarn && yarn build
        BUILD_DIR: docs/.vuepress/dist/

只有一处需要注意，BUILD_DIR 的地址就是从根目录出发，build 生成 HTML 页面的文件夹，也是提交到 gh-pages 分支的文件。

git push 后就可以到 repo 的 Actions 里查看成果了！

---

Tips

我是用 Vercel 托管的 VuePress，我们不需要 Vercel 再帮我们编译 VuePress，只需要 Override 一下 Build Command 就好了。

如图，同时我们要设置展示的 repo 分支为 gh-pages。