TIP
博客的部署往往只需要一行命令,但却需要花费我几分钟在本地的构建时间,完成博客内容后本应该放松放松心情,这几分钟的等待显得尤为惹人生厌
那么如何解决这个问题呐?当然是自动化部署啦,这样我们每次只需要将写完的博客 Push 到 GitHub 上,就可以触发相应的 CI 以完成博客的自动部署咯,所以这里就介绍如何使用 GitHub Action 来自动化部署博客
# GitHub Action 的使用
关于自动化部署,起初我接触的是 Travis CI,配置起来非常简单~
后来 GitHub Action 完全开放,我就完全转 GitHub Action 这个自定义更加方便的 CI 系统了,起初我的自动化部署脚本也是自己写的 Shell 脚本,因为那时候相关的部署 Action 尚不完善,不支持直接 Push 到根地址,不过前段时间支持了之后我就放弃自己写的脚本咯 (๑˃◡˂๑)
GitHub Action 的使用方法也非常简单~只需要在项目根目录新建 .github/workflows/
文件夹,再在其中新建相应的 YAML 配置文件即可,比如 hello-github-action.yml
,名字随意啦,只是为了区分而已~
文件内写入相应的内容
# action 名字
name: Hello GitHub Action
on:
# 触发条件,比如 push pull_request 等
push:
branches:
- main
jobs:
build-and-deploy:
# 运行环境
runs-on: ubuntu-latest
steps:
# 各步的任务
- name: Hello GitHub Action
run: echo 'Hello GitHub Action'
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这样我们就完成了一个简单的 GitHub Action,它会在我们每次 push 到 main 分支时触发,之后就会打印 Hello GitHub Action
,虽然看不见……
# 自动化部署到 GitHub Pages
我们对上面的配置稍作修改,目标就是在源仓库 Push 时触发,此时将博客源码构建成静态文件,并将它们 Push 到 GitHub Pages 仓库即可
name: VuePress Deploy
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
# 使用某个 Repo
- name: Checkout 🛎️
uses: actions/checkout@v2
# 构建静态文件
- name: Install and Build 🔧
run: |
npm install yarn
yarn
yarn docs:build
# 部署到 GitHub Pages
- name: Deploy 🚀
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.PERSONAL_TOKEN }}
publish_dir: docs/.vuepress/dist
external_repository: SigureMo/SigureMo.github.io
publish_branch: main
cname: nyakku.moe
user_name: 'github-actions[bot]'
user_email: 'github-actions[bot]@users.noreply.github.com'
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
这里第一步是使用你的源代码 repo,其中 uses 是指使用了某个现成的 Action,比如这个 actions/checkout
就是 github.com/actions/checkout
(opens new window) 的 v2
版本,如果需要 submodule 或者 lfs 可以通过 with
选项来修改参数
第二步是将博客源码构建成静态文件,不同工具的构建方法自然不同,我这里是以 VuePress 作为示例
第三步就是将构建好的静态文件 Push 到目标的 GitHub Pages 对应的 Repo 了,这里使用的是 peaceiris/actions-gh-pages
(opens new window),如果你只需要部署到当前 Repo 的 gh-pages
分支上的话,你只需要配置以下内容即可
- name: Deploy 🚀
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vuepress/dist
2
3
4
5
这里的 secrets.GITHUB_TOKEN
不需要配置,GitHub 会自动提供
但是如果你和我一样想部署到 <username>.github.io
的话,就需要稍微改动一下啦,该 Action 提供了非常丰富的参数以供配置
由于目标 Repo 和目标分支都变了,就需要分别设置下 external_repository
和 publish_branch
这两个参数咯
另外,由于 Push 到外部 Repo 的话 GITHUB_TOKEN
的权限不足,因此需要提供其它的验证方式,比如 personal_token
和 deploy_key
,这里提一下 personal_token
的生成与配置方式,该方法相比于后者也更方便一些
依次进入个人 Settings -> Developer settings -> Personal access tokens
点击 Generate new token
,随便填写个名字,然后下面勾选 repo
(权限) 后确认 Generate token
由于生成的 token 只能看一次,请确定复制后再关闭页面
之后依次进入 源 repo -> Settings -> Secrets
,点击 New secret
,Name 字段填写 PERSONAL_TOKEN
,Value 字段粘贴刚刚生成的 token 即可
这样,该 action 在 secrets.PERSONAL_TOKEN
处就可以获得刚刚生成的拥有读写 repo 权限的 token,然后传入该 action 的 personal_token
参数,进而完成整个部署过程
这样就完成了权限的配置啦,该 Action 还提供了很多比较实用的参数,比如 cname
,更多详情去看它的文档吧
完成这些,就可以重新 push 一下源代码 repo 试一下啦,还可以在源 repo 的 Actions 中可以看到相关进度