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