原教程:

CI/CD解释

CI\CD 其实说的是三件事情:「持续集成(Continuous Integration)」、「持续交付(Continuous Delivery)」、「持续部署(Continuous Deployment)」。
因为「持续交付」和「持续部署」的英文缩写是一样的,所以这三件事情缩写成了 CI\CD 。

碎碎念

随着hexo的文章越来越多,编译的时间也随之加长,我们可以通过Github Action来实现自动部署,只需要我们每次完成博客的美化或者修改,将改动直接push到远程的Github仓库中,之后的编译工作交给CI来完成。

教程常量声明

感谢@YML的反馈。以下将使用特定的常量名来指代一些名词。此处建议读者直接使用教程内容的常量名。在最后再逐一搜索替换。这样可以避免对各种常量名的混淆。

变量名解释:

常量名常量释义
[Blogroot]本地存放博客源码的文件夹路径
[SourceRepo]存放博客源码的私有仓库名
[SiteBlogRepo]存放编译好的博客页面的公有仓库名 Site指站点,教程中会替换成 Github、Gitee、Coding
[SiteUsername]用户名 Site指站点,教程中会替换成 Github、Gitee、Coding
[SiteToken]申请到的令牌码 Site指站点,教程中会替换成 Github、Gitee、Coding
[GithubEmail]与github绑定的主邮箱,建议使用Gmail
[TokenUser]Coding配置特有的令牌用户名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 在记事本中逐个记录,方便替换,以下为我的示例
[Blogroot]:E:\Blogroot

[SourceRepo]:icemyst/hexo-source

[SiteBlogRepo]
[GithubBlogRepo]:icemyst.github.io
[GiteeBlogRepo]:icemyst
[CodingBlogRepo]:icemyst/hexo-source

[SiteUsername]
[GithubUsername]:icemyst
[GiteeUsername]:icemyst
[CodingUsername]:icemyst

[SiteToken]
[GithubToken]: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
[GiteeToken]:2d08315cf91863202f885ac4fab11c0b
[CodingToken]:acf52d8389d34f68648aa329b15956fea52257c6

[GithubEmail]:1580777927@qq.com

[TokenUser]:token

Github Action 教程

获取Token

为了确保交由Github Action来持续部署时,Github Action具备足够的权限来进行hexo deploy操作,需要先获取Token,博主分别在GithubGiteeCoding处部署了静态页面,所以也就需要获取这三处的Token

由于截图太麻烦,这里直接用店长安知鱼的图了

访问Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token名称随意,但必须勾选repo项和workflows项。

token只会显示这一次,之后将无法查看,所以务必保证你已经记录下了 Token。之后如果忘记了就只能重新生成重新配置了。

访问Gitee->头像(右上角)->设置->私人令牌->生成新令牌

Token只会显示这一次,之后将无法查看,所以务必保证你已经记录下了Token。之后如果忘记了就只能重新生成重新配置了。

创建存放源码的私有仓库

  1. [Blogroot]新建.github文件夹,注意开头是有个.的。然后在.github内新建workflows文件夹,再在workflows文件夹内新建autodeploy.yml,在[Blogroot]/.github/workflows/autodeploy.yml里面输入
1
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# 当有改动推送到master分支时,启动Action
name: 自动部署

on:
push:
branches:
- master #2020年10月后github新建仓库默认分支改为main,注意更改

release:
types:
- published

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: 检查分支
uses: actions/checkout@v3
with:
ref: master #2020年10月后github新建仓库默认分支改为main,注意更改

- name: 安装 Node
uses: actions/setup-node@v3
with:
node-version: "16.x"

- name: 安装 Hexo
run: |
export TZ='Asia/Shanghai'
npm install hexo-cli -g

- name: 缓存 Hexo
uses: actions/cache@v3
id: cache
with:
path: node_modules
key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

- name: 安装依赖
if: steps.cache.outputs.cache-hit != 'true'
run: |
npm install --save

- name: 生成静态文件
run: |
hexo clean
hexo bangumi -u #bilibili番剧更新
hexo generate
gulp

- name: 部署
run: |
cd ./public
git init
git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
git config --global user.email '${{ secrets.GITHUBEMAIL }}'
git add .
git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:master
# git push --force --quiet "https://${{ secrets.GITEEUSERNAME }}:${{ secrets.GITEETOKEN }}@gitee.com/${{ secrets.GITEEUSERNAME }}/${{ secrets.GITEEUSERNAME }}.git" master:master #gitee部署写法,需要的自行取 消注释

注意最后一行的master:master指从本地的master分支提交到远程仓库的master分支,需要根据你自己的实际情况进行调整。本地分支可以在git bash中看到。线上分支可以在提交仓库中查看。因为“政治正确”的原因,Github202010月将默认分支改为main。而git软件在本地默认创建的分支依然是master,所以若你线上仓库默认分支是main,这里应该写成master:main,表示从本地的master推送到远程的main。

  1. 之后需要自己到仓库的 Settings->Secrets->actions 下添加环境变量,变量名参考脚本中出现的,依次添加。

例如,需要部署在GitHub page上,那么脚本中必要的变量为
GITHUBUSERNAMEGITHUBEMAILGITHUBTOKEN,因此添加这三条变量。变量具体内容释义可以查看本文开头。

重新设置远程仓库和分支

  1. 删除或者先把[Blog]/themes/butterfly/.git移动到非博客文件夹目录下,原因是主题文件夹下的.git文件夹的存在会导致其被识别成子项目,从而无法被上传到源码仓库。

  2. 在博客根目录[Blog]路径下运行指令

    1
    2
    3
    4
    5
    git init #初始化
    git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为存放源码的github私有仓库
    git checkout -b master # 切换到master分支,
    #2020年10月后github新建仓库默认分支改为main,注意更改
    # 如果不是,后面的所有设置的分支记得保持一致
  3. 添加屏蔽项
    因为能够使用指令进行安装的内容不包括在需要提交的源码内,所有我们需要将这些内容添加到屏蔽项,表示不上传到Github上。这样可以显著减少需要提交的文件量和加快提交速度。
    打开[Blogroot]/.gitignore,输入以下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git*/
    .idea
    themes/butterfly/.git

如果不是butterfly主题,记得替换最后一行内容为你自己当前使用的主题。

  1. 之后再运行git提交指令,将博客源码提交到Github上。牢记下方的三行指令,以后都是通过这个指令进行提交。

    1
    2
    3
    4
    git add .
    git commit -m "github action update" #引号内的内容可以自行更改作为提交记录。
    git push origin master
    #2020年10月后github新建仓库默认分支改为main,注意更改
  2. 此时你的主题文件夹若已经被正常上传,并且你也添加了主题文件夹下的.git文件夹的屏蔽项。那你可以考虑把第二步移走或删除的.git放回来,用作以后升级。(不禁怀疑真的有人会去用这个方式来升级吗)

  1. 添加屏蔽项

    因为能够使用指令进行安装的内容不包括在需要提交的源码内,所有我们需要将这些内容添加到屏蔽项,表示不上传到github上。这样可显著减少需要提交的文件量和加快提交速度。
    打开[Blogroot]/.gitignore,输入以下内容:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git*/
    .idea
    themes/butterfly/.git

​ 如果不是butterfly主题,记得替换最后一行内容为你自己当前使用的主题。

  1. 提交源码到私有仓库[SourceRepo]
    在博客根目录[Blogroot]下启动终端,使用 git 指令重设仓库地址。这样在新建仓库,我们仍旧可以保留珍贵的 commit history,便于版本回滚。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    git remote rm origin # 删除原有仓库链接
    git remote add origin git@github.com:[GithubUsername]/[SourceRepo].git #[SourceRepo]为新的存放源码的github私有仓库
    git checkout -b master # 切换到master分支,
    #2020年10月后github新建仓库默认分支改为main,注意更改
    # 如果不是,后面的所有设置的分支记得保持一致
    git add .
    git commit -m "github action update"
    git push origin master
    #2020年10月后github新建仓库默认分支改为main,注意更改
  2. 可能遇到的 bug
    因为 butterfly 主题文件夹下的.git 文件夹的存在,那么主题文件夹会被识别子项目。从而无法被上传到源码仓库。若是遇到添加屏蔽项,但是还是无法正常上传主题文件夹的情况。请先将本地源码中的 themes 文件夹移动到别的目录下。然后 commit 一次。接着将 themes 文件夹移动回来,再 commit 一次。

要是还不行,那就删了 butterfly 主题文件夹下的.git 文件夹,然后再重复上述的 commit 操作。

查看部署情况

点击查看

此时,打开 GIthub 存放源码的私有仓库,找到 action

根据刚刚的 Commit 记录找到相应的任务

点击 Deploy 查看部署情况

若全部打钩,就代表你部署成功了。

可能遇到的 bug

要是在 github action 部署时遇到 unknown block tag: “tagname”这样的报错,说明你可能没有正确上传主题文件夹,也可能遇到安装依赖或生成页面失败的情况。

  1. 是否将node_modules也上传到源码仓库[SourceRepo]了。源码仓库不需要有node_modules文件夹。
  2. 是否有将[Blogroot]/themes/下的主题文件夹上传,例如检查[SourceRepo]内的 [Blogroot]/themes/Butterfly是否为空文件夹。为了能够正常编译页面,源码仓库需要有 [Blogroot]/themes/Butterfly文件夹及它所包含的主题文件内容。为了避免这两点,需要添加 git 屏蔽项。通过给 .gitignore添加屏蔽项解决。打开[Blogroot]/.gitignore,输入以下内容:
1
2
3
4
5
6
7
8
9
10
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git
  1. 若是遇到添加屏蔽项,但是还是无法正常上传主题文件夹的情况。请先将本地源码中的themes文件夹移动到别的目录下。然后commit一次。接着将themes文件夹移动回来,再commit一次。

若是遇到 spawn failed 报错。在 github action 的配置中出现这一报错。一般是因为涉及到部署地址的配置项有误。

  1. 首先排查你在[Blog]\_config.ymldeploy配置项是否按照上文配置 deploy 项中的步骤正确组装配置链接。
  2. 其次排查[Blog]\.github\workflows\autodeploy.yml中各个关于仓库链接的配置内容,注意按照注释指引检查空格、分支等。
  3. 更多可能的因素和解决方案可以参考@洪哥 HEO写的方案:Hexo 错误:spawn failed 的解决方法

202010 月后 github 新建仓库默认分支改为 main,注意更改