0%

【Hexo自动部署】优雅的使用 Github Actions 进行 Hexo 静态博客的持续集成与部署

  由于没有自己的云服务器,所以我之前选择博客工具的时候排除了Typora、Wordpress…转而选择了 Hexo,但其实相较于前者,Hexo 的云端写作体验一直很糟糕。
  随着近两年 CI/CD、DevOps 这些概念的流行,很多工具都火了起来,像 Jenkins、Github的好基友Travis等等,但这些都不太适用我们的情况,Jenkins 也需要自己的服务器,而TravisCI我也测试了一下,本来是适用的,也很方便,但是官方宣布后续不再免费,只赠送 10000 积分用完即止,开通付费版则要 69刀/月 [俺支持不起,倒不如整一个云服务器,大佬请随意!]。
  但是我偶然了解到全球最大的同性交友网站丢出了一个重磅炸弹-Github Actions,我发现利用此功能可以完美解决 Hexo 静态博客自动部署的问题,并且免费版每月赠送2000分钟的时长,完美!

  本篇博文就来浅谈一下 Github Actions 的原理,以及使用他简单实现 Hexo 静态博客的自动部署(即每次我们 push 源代码后,自动生成静态文件,并上传到我们的仓库或者云存储中;Github 本身可以开启运行结果邮件通知功能,有条件的也可以设置 WebHooks 来进行通知。),好了那么话不多说,我们直接开始,欢迎大佬批评指正。

Github Actions

简介

  前面我们有提到 CI/CD、DevOps 这些名词,其实就是我们一般开发完成后,需要进行测试、打包、发布等操作,这些动作其实都是可以自动完成的,之前提到的 Jenkins 就可以做到,但是需要有自己的服务器。

  而 Github Actions 服务,就是用来帮助我们完成这些动作,他既可以使用自己的服务器也可以使用 Github 的服务器(支持多种环境与语言)。

使用

  Github Actions 和其他工具一样,通过脚本文件来进行一系列复杂的操作,他也有自己的语法规则-官方文档

  由于很多操作在不同项目里面是类似的,完全可以共享。GitHub 注意到了这一点,想出了一个很妙的点子,允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用,官方市场github/actions 仓库

  其他基础使用,推荐查看阮一峰老师的介绍

原理(个人了解)

  其实 Github Actions 就是当我们完成触发条件后(例如:push/pull等),Github 通过我们编写的脚本文件把应该在本地运行的命令,放到他的服务器(也可以设置自己的服务器)上自动运行,大大减少我们的操作。

  经过博主的测试,Github 提供的服务器上预装了多种语言及一些常见的运行环境等,所以我们编写脚本其实很简单,只需按语法要求添加以下固定内容即可:

  • 提供脚本基本信息
  • 指定运行环境、触发条件
  • 编写任务、步骤、动作

  添加这些内容后,当匹配触发条件时,Github 就会读取我们的脚本文件,在服务器上的指定环境中运行我们预先写好的任务、步骤、动作。

好了,经过这些简单的了解后,我们开始配置 Github Actions吧。

Hexo 静态博客自动部署

建立博客源代码仓库

  因为我们需要 Hexo 源代码才能生成静态文件,所以我们需要建立一个私有仓库来保存我们的源代码,当然如果你觉得麻烦也可以建立一个分支来保存,此处就不介绍了。

Ps: 如果您还不会搭建 Hexo 博客,可以参考本站之前的 Hexo 搭建教学

  • 具体操作如图所示

  仓库建立后,我们可以先把自己的源代码通过 Git 提交上去,这里就不介绍了,也可以参考之前的博客搭建教学

Ps: 如果碰到 Github 连线失败的情况,建议禁用代理 git config --global --unset http.proxy,或者直接使用 open ssh 进行连线推送。

Hexo 简单配置与介绍

Github 的链接形式

  Github 这种网站的代码仓库地址常见有三种形式,适用于不同的情况,下面简单介绍一下。

  • 普通链接,一般在使用账号密码登录后或者ssh传输时使用。
1
2
3
// 这种地址可以直接在仓库中复制
https://github.com/pandaoh/biugle.git
git@github.com:pandaoh/biugle.git
  • 账号密码链接,这种适用于自己调用 Github 的数据或者当 Api 使用等情形。
1
https://{username}:{password}@github.com/pandaoh/biugle.git
  • token 链接,在 Github Settings 中生成 token 后,可以直接放到仓库地址中,这样就可以直接访问有权限的仓库,方便我们自动部署。
1
https://{token}@github.com/pandaoh/biugle.git

生成 Github Token

  了解完 Github 这些链接形式后,我们就可以开始配置了,因为我们决定使用 Token 这种链接形式来进行连线推送等操作,所以首先就是生成 Github Token

  • 打开我们自己的 Github Settings,选择 Developer settings => Personal access tokens

  • 生成 token 后,此信息只会展示一次,我们先保存下来,因安全问题后文我统一将此 token 称为 $GH_TOKEN

修改 config.yml

  大部分人之前应该都是在本地进行博客编写,所以连接 Github 的方式应该都是使用的 ssh,那么前面我们为了方便后续自动部署,需要把 config.yml 文件中的 deploy->repository->github 值改成 token url 的形式。

1
2
3
4
5
6
deploy:
- type: git
repository:
github: https://{$GH_TOKEN}@github.com/pandaoh/pandaoh.github.io.git,master
...
// 注意此处的 {$GH_TOKEN} 请替换成我们之前生成的 token 内容,此仓库地址是我们博客静态文件最终存放的仓库地址,即搭建教学中开通 Github Pages 服务的那个仓库地址。

添加 GitHub Actions 脚本

  配置完 Hexo,我们开始编写 Github 的脚本文件,GitHub Actions 的配置文件叫做 workflow 文件,存放在源代码仓库的 .github/workflows 目录。
  workflow 文件采用 YAML 格式,文件名可以任意取,但是后缀名统一为 .yml,比如 test.yml。一个库可以有多个 workflow 文件。
  GitHub 在我们完成预设触发条件时,只要发现 .github/workflows 目录里面有 .yml 文件,就会自动读取运行该文件。

添加步骤

  • 我们可以直接手动建立此文件,或者通过源代码仓库点击 Actions => 选择 Setup Node创建,但最终同样都需 push 到远端源代码仓库中。

参数介绍

建议阅读完前面给出的官方文档再来进行此处的了解 ^_^

  • 建立文件后,我们修改其配置如下。
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
name: DoubleAm's Blog CI/CD # 脚本 workflow 名称

on:
push:
branches: [main, master] # 当监测 main,master 的 push
paths: # 监测所有 source 目录下的文件变动,所有 yml,json 后缀文件的变动。
- '*.json'
- '**.yml'
- '**/source/**'

jobs:
blog: # 任务名称
timeout-minutes: 30 # 设置 30 分钟超时
runs-on: ubuntu-latest # 指定最新 ubuntu 系统
steps:
- uses: actions/checkout@v2 # 拉取仓库代码
- uses: actions/setup-node@v2 # 设置 node.js 环境
- name: Cache node_modules # 缓存 node_modules,提高编译速度,毕竟每月只有 2000 分钟。
uses: actions/cache@v2 # 亲测 Github 服务器编译速度比我自己电脑都快,如果每次构建按5分钟计算,我们每个月可以免费部署 400 次,Github yyds!!!
env:
cache-name: cache-node-modules
with:
path: ~/.npm
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-build-${{ env.cache-name }}-
${{ runner.os }}-build-
${{ runner.os }}-
- name: Init Node.js # 安装源代码所需插件
run: |
npm install
echo "init node successful"
- name: Install Hexo-cli # 安装 Hexo
run: |
npm install -g hexo-cli --save
echo "install hexo successful"
- name: Build Blog # 编译创建静态博客文件
run: |
hexo clean
hexo g
echo "build blog successful"
- name: Deploy DoubleAm's Blog # 设置 git 信息并推送静态博客文件
run: |
git config --global user.name "doubleam"
git config --global user.email "admin@biugle.cn"
hexo deploy

- run: echo "Deploy Successful!"

验证结果

Hexo 与 Github Actions 均配置完成后,我们将这两个文件变动都推送至源代码仓库中。

推送内容

完成以上操作后,我们每修改并 push 一次监测的文件,就可以触发脚本运行。

查看 Github Actions 运行日志与结果

触发后我们可以查看运行日志与结果,如下图所示。

  • 基础日志

  • 详细日志

添加 WebHooks 通知

  脚本运行完成一般都有邮件通知,但如果我们需要在 push 后添加其他通知,例如钉钉机器人、QQ等,我们可以添加 WebHooks 来进行通知。

  • 可以直接在仓库添加 WebHooks,选择触发条件后,输入接口地址【POST】与 Secret (可选),Github 会在我们完成触发条件时,携带此次操作的信息数据包请求一次这个 POST 接口,至于后面的处理就可以自定义啦。

如果有使用腾讯云 cos 桶托管博客,可能需要设置 CDN 缓存刷新,详细可参考文章COS桶托管Hexo。另外从本文开始,本站后续所有内容均为自动部署哦…此次分享就到这啦,干饭去!

bulb