使用 Github workflow 部署 Vuepress到Github Pages
Wkii 2020-06-09 01:06:11 vuepressgithub workflow
# 前言
目前Github workflow（也叫Actions）还不够成熟。表现为yml配置文件手动创建和修改再推送到仓库无效，需要在线创建、在线编辑，没法像Travis-ci那样临时修改配置文件（不纳入版本控制）来调试。所以还是使用Travis-ci.com 或者是 Azure Pipelines吧。
# 操作步骤
不过对应的发布vuepress到 Github Pages 的工具已经有了，并且在GitHub 的Marketplace里发布了。下面记录一下使用步骤：
注意：
在仓库里直接写配置文件推送上去无效。 至少目前我测试是不行的。
- 项目首页点顶部
Actions菜单，进入Workflow配置界面。 - 点击
New workflow再点击第一个示例Simple workflow下面的Set up this workflow按钮。 - 然后给配置文件起个名（上方输入框），右侧Marketplace搜索框中输入
vuepress，选Vuepress deploy。 - 点击 View full Marketplace listing (opens new window) 查看更多针对这个工具的配置文件说明（是国人开发的工具，通过Docker来完成build）；
- 左侧写好配置文件，保存（Start Commit）；
- 看效果。如果有不对，再去修改这个workflow的配置文件（在线编辑）。
- ACCESS_TOKEN 参照工具的说明配置即可。就是常用的 Personal access tokens (opens new window)。
以下是我测试成功的配置文件，请注意注释部分的配置项：
name: Build and Deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
# TARGET_REPO: username/repo
TARGET_BRANCH: master
# 请注意是否在package.json中添加了script别名，工具官方默认值还不是这个
BUILD_SCRIPT: yarn docs:build
BUILD_DIR: docs/.vuepress/dist/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
针对上面的配置文件中BUILD_SCRIPT的命令，配置package.json文件中需要添加
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"docs:deploy": "bash deploy.sh"
}
1
2
3
4
5
2
3
4
5
# 删除方法
在线配置目前没法删除，可以通过pull下来之后，在本地仓库删除workflows下的文件，再推送回去即可删除 workflow。