Wkii Blog

使用 Github workflow 部署 Vuepress到Github Pages

6/9/2020 vuepressgithub workflow

# 前言

目前Github workflow（也叫Actions）还不够成熟。表现为yml配置文件手动创建和修改再推送到仓库无效，需要在线创建、在线编辑，没法像Travis-ci那样临时修改配置文件（不纳入版本控制）来调试。所以还是使用Travis-ci.com 或者是 Azure Pipelines吧。

# 操作步骤

不过对应的发布vuepress到 Github Pages 的工具已经有了，并且在GitHub 的Marketplace里发布了。下面记录一下使用步骤：

注意：
在仓库里直接写配置文件推送上去无效。 至少目前我测试是不行的。

  1. 项目首页点顶部 Actions 菜单，进入Workflow配置界面。
  2. 点击New workflow 再点击第一个示例 Simple workflow 下面的 Set up this workflow按钮。
  3. 然后给配置文件起个名（上方输入框），右侧Marketplace搜索框中输入vuepress，选 Vuepress deploy。
  4. 点击 View full Marketplace listing (opens new window) 查看更多针对这个工具的配置文件说明（是国人开发的工具，通过Docker来完成build）；
  5. 左侧写好配置文件，保存（Start Commit）；
  6. 看效果。如果有不对，再去修改这个workflow的配置文件（在线编辑）。
  7. 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

针对上面的配置文件中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

# 删除方法

在线配置目前没法删除，可以通过pull下来之后，在本地仓库删除workflows下的文件，再推送回去即可删除 workflow。