使用 GitHub Actions 部署 VuePress 博客到 Pages 上

qiucong 2022/5/3 安装配置

之前搞了一个 VuePress 的博客，也很长时间没怎么管了，其实偶尔还是会写一些东西的，但是都没有往上面放。其中有一个原因就是之前操作起来比较麻烦，要写完->提交->构建->更新，一套操作下拉非常费事。如果写完提交就不用管就会方便很多，如果只是想找个地方放一下，通过 GitHub 的 Actions 部署到 GitHub Pages 完全就够了。

# 配置 Pages

Github Pages (opens new window) 是通过 GitHub 托管和发布的公共网页。

目前有官方的中文文档 (opens new window)，可以根据文档进行一些比较复杂的配置。

以下配置都是以 Github 用户名为 qccblog，存储库名称为 qccblog.github.io 为例，实际使用根据对应的用户名和存储库名称进行调整。

打开存储库 https://github.com/qccblog/qccblog.github.io (opens new window)，进入 Settings，选择 Pages，选择一个主题（后面随时可以改），选择主题之后会自动打开一个 index.md 文件，编辑完成提交后过一会，回到 Pages 设置页面就会看到一个提示说站点已经发布了。

注意：正常情况下，假定仓库名称为 demo，那么配置 pages 后访问的地址就是 username.github.io/demo。如果希望地址是 username.github.io，那么就要以 username.github.io 作为存储库名称。

# 配置 Actions

首先需要在存储库下新建 .github/workflows/ 文件夹，接着在 workflows 文件夹下新增 xxx.yml 文件，这个文件名随意，但是必须是 YAML 格式的文件（也可以直接在界面上通过 Actions 进行操作）。以 deploy.yml 为例：

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上面这段配置就是告诉 Github Actions，当前 master 分支有 push 操作的时候执行 build-and-deploy 这个任务，这个任务就是在 ubuntu-latest 环境先把代码拉取下来；安装依赖再打包；生成的静态文件部署到 gh-pages 分支上。

上述的配置比较简单，如果最后作为 pages 的仓库和当前仓库是同一个使用上述配置就行了。

实际使用中可能会往存储库中存放一些相关的配置信息，比如 vssueConfig 之类不希望对外暴露的信息，那么存储库就不能设置为 public，但是 pages 对个人而言只有在 public 的时候才是免费使用的，Github也不支持按分支设置是否 public，所以需要另外开一个仓库作为 pages 的存储库，这种情况下下就涉及到跨库保存，不少文章都是使用 Github 的 Token 进行操作（比如 VuePress 文档中的部署 (opens new window) 部分），这边介绍一下怎么使用存储库的 Deploy keys 进行操作。

存储库为 qccblog/blog，pages 库为 qccblog/qccblog.github.io 为例：

生成一对公私钥 ssh-keygen -t ed25519 -C "备注"
把生成的.pub 文件内容复制到 qccblog/blog 的 Settings -> Deploy keys 中
把私钥文件内容添加到 qccblog/qccblog.github.io 的 Settings -> Secrets -> Actions 中，指定名称为 DEPLOY_TOKEN。
配置 qccblog/blog 的 Actions

 - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.3
        with:
          BRANCH: gh-pages
          FOLDER: public
          repository-name: qccblog/qccblog.github.io
          force: true
          commit-message: Deploy
          ssh-key: ${{ secrets.DEPLOY_TOKEN }}

1
2
3
4
5
6
7
8
9

其他部分和上述一致，给 Deploy 部分新增一些配置，指定提交的仓库，然后配置 ssh-key 进行提交即可。更多的配置可以参考 deploy-to-github-pages (opens new window)。

配置完成之后访问 https://qccblog.github.io (opens new window) 就可以看到效果了。

学非探其花

Choose mode