淘先锋技术网

首页 1 2 3 4 5 6 7

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

VuePress 中文文档

创建仓库

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

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

创建 Token

  1. 点击用户头像,选择 Settings,然后选择 Developer settings 选项卡(选项卡列表最下面)

image.png

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

image.png

创建 Secrets

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

image.png

创建任务文件

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

image.png

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 配置文件可以自行调整,官方提供的和其他博客中的配置文件各种各样,这种不行就换另一种试试。