跳到主要内容

使用 Github Actions 部署 VuePress 博客

· 阅读需 6 分钟
熊滔

随着我 VuePress 博客中的东西越来越多,每次我打包好项目然后上传到 Github 上需要好一会儿时间,之前在一些文章中知道 Github Actions 可以帮我自动部署项目,正好今天尝试尝试。

在使用 Github Actions 以前,部署过程是这样的:

  • 写文章

  • 生成静态文件

  • 将静态文件部署到 Github Page

    使用了 Github Actions 后,过程变为了:

  • 写文章

  • 提交文章到 Github

配置文件

接着我们介绍如何使用这一利器。首先你需要在你的项目下新建 .github/workflows/ 文件夹,接着在 workflows 文件夹下新增 xxx.yml 文件,这个文件名随意,但是必须是 YAML 文件,比如我新增文件名为 deploy.yml,给出我的配置内容(去掉了一些个性化的配置)

name: Build and Deploy
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2.3.1

- name: Install and Build 🔧
run: |
npm install
npm run build

- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.3
with:
BRANCH: gh-pages
FOLDER: docs/.vuepress/dist
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

当你向 Github 提交代码时,它会自动的检测 .github/workflows/ 目录,如果有配置的话,就会根据你的配置 workflow 自动部署项目。

从上面的配置看,主要分为三个部门:

  • name:这个 workflow 的名称,自己随便取

  • on:触发条件

    on:
    push:
    branches:
    - master

    上述表示当我们向 master 分支 push 时就会触发该 workflow

  • jobs:规定要执行的任务,例如上面我们定义了一个任务 build-and-deploy,每个任务包含如下配置

    • runs-on:运行所需要的虚拟机环境,Github 为我们提供了如下环境

      • ubuntu-latestubuntu-18.04ubuntu-16.04
      • windows-latestwindows-2019windows-2016
      • macOS-latestmacOS-10.14

      这里我们选择了 ubuntu-latest

    • steps:任务运行的步骤

接着我们对我们运行的步骤进行说明,我们的步骤包含三步,第一步是拉取主分支的代码

- name: Checkout 🛎️
uses: actions/checkout@v2.3.1

第二步,运行两个命令 npm installnpm run build

- name: Install and Build 🔧 
run: |
npm install
npm run build

第三步,将 生成的静态文件夹部署到 gh-pages 分支上

- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.3
with:
BRANCH: gh-pages
FOLDER: docs/.vuepress/dist
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

配置密钥

使用 Github Actions 是需要 ACCESS-TOKEN,既然都已经会使用 Github 了,就肯定知道这个东西怎么生成了,如果不会,请求参照官方文档

我们需要在仓库的 Setting 中选择 Secrets

image-20210531185033956

点击右上方的 New repository secret

image-20210531185129280

Name 必须写为 ACCESS_TOKENValue 就是你的 token,填写完毕点击 Add secret,如果填写没有问题的话,点击之后就会提示添加成功。

每次当你将 Vuepress 项目提交到 Github 上的时候,Github 就会自动帮你部署项目。

image-20210531185615412

Actions 的这个选项中可以看到项目的部署情况,上面可以看到我尝试了三次,第三次成功了,前两次是踩坑,下面就介绍了我踩的两次坑。

踩坑

VuePress 官网上面,给出的构建脚本命令是

npm run docs:build

我觉得麻烦,改为了 npm run build,所以第一次运行的时候,就提示我没有这个脚本

image-20210531190036475

我改过来了,所以如果你构建的脚本命令和我的不一致的话,还是要改的。

另一个坑,上面配置好了以后,我将我的 VuePress 博客提交到 Github,但是运行一段时间之后爆出了错误

image-20210531190224283

从错误的类型看好像是超内存了,然后经过我的搜索,在 Github 的一个 issue 中找到了解决办法,添加下面的环境变量

env:
NODE_OPTIONS: '--max_old_space_size=4096'

更改后的配置文件如下

name: Build and Deploy
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2.3.1

- name: Install and Build 🔧
run: |
npm install
npm run build
env:
NODE_OPTIONS: '--max_old_space_size=4096'

- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.3
with:
BRANCH: gh-pages
FOLDER: docs/.vuepress/dist
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}