VuePress + GitHub Actions 实现博客自动化部署（二）

在上篇文章的基础上，利用 GitHub Actions 实现博客自动部署

VuePress 中文文档

创建仓库

在上篇文章的基础上，重建仓库，并新增一个分支，名称为 gh-pages。

• master 分支：存放项目源码
• gh-pages 分支：存放 VuePress 生成的静态文件

创建 Token

1. 点击用户头像，选择 Settings，然后选择 Developer settings 选项卡（选项卡列表最下面）

2. 新增一个 Access Token。Note 描述该 token 用来做什么，可以随便填写，有意义即可；Expiration 选择 token 的过期时间；Select Scopes 至少要勾选上 repo，否则这个 token 没有仓库权限，自动部署会失败。然后点击生成 token，复制 token，接下来会使用。

创建 Secrets

进入到仓库页面，点击 Settings，点开 Secrets and variables 选项卡，选择 Actions 选项，点击 New repository secret，新增一个 Secret，名称为 ACCESS_TOKEN，后面会用到，值就是上面生成的 token 值。

创建任务文件

返回到仓库页面，点击 Actions，点击 New workflow，然后点击 set up a workflow yourself，我们自己编写这个配置文件。

main.yml

# workflow 名称，可以自定义
name: Deploy GitHub Pages

# 触发条件：在代码 push 到 master 分支后，自动执行该 workflow
on:
  push:
    branches:
      - master

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu，也可以自定义版本
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
          
      # 设置 Node.js 版本
      - name: Setup Node.js environment
        uses: actions/setup-node@v1
        with:
          node-version: "14.18.0"
          
      # 缓存 node_modules
      - name: Cache dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # 如果缓存没有命中，安装依赖
      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn --frozen-lockfile

      # 生成静态文件
      - name: Build
        run:  npm run build

      # 部署到 GitHub Pages
      - name: Deploy
        uses: crazy-max/ghaction-github-pages@v2
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # ACCESS_TOKEN 是创建的 Secret 名称，替换为你自己创建的名称
        with:
          target-branch: gh-pages # 部署到 gh-pages 分支，master 分支存放的是项目源码，而 gh-pages 分支则用来存放生成的静态文件
          build_dir: docs/.vuepress/dist # vuepress 生成的静态文件存放的地方

验证

1. 将 GitHub Pages 的分支，设置为 gh-pages 分支并保存。（仓库页面->Settings->Pages）
2. push 代码到仓库中，workflow 会自动运行，可以在 Actions 中查看运行情况。

至此，使用 GitHub Actions 完成了项目的自动部署。每次更新代码后，直接访问页面就可以看到效果了（还需等待个 workflow 执行时间）。

问题

1. 出现问题最多的地方就是 workflow 自动执行的时候，因为有很多个步骤，每次执行失败的时候，可以看一下错误信息，然后再针对性修改。

   大致的修改方向：首先确保创建 token 和 secret 这两个步骤没问题（这两个步骤有问题会出现仓库无权限 403，push 代码失败等问题），之后针对 workflow 哪个步骤出问题，再排查修复。

2. workflow 配置文件可以自行调整，官方提供的和其他博客中的配置文件各种各样，这种不行就换另一种试试。