VuePress自动化部署从travis到Github Actions

587 阅读1分钟

pretty

用 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_TOKEN

Github Actions 方式

步骤一:配置 Personal access token

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

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 就好了。

关闭 Vercel 自动编译

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

设置产品分支