使用Github Action自动部署Hexo到Gihub和Coding

本文主要介绍我这个小站的持续集成方案(Continuous integration,简称CI)。什么是持续集成呢,简单说,就是把我写完文章后,markdown源代码的提交、Hexo静态网页的生成、Hexo网页的发布这一整个流程使用自动化的工具串起来,通过一个命令来触发这一系列的动作,从而使用户专注于写作,不用管后续一堆的事情。

以前用过Travis CI将Hugo自动部署到服务器上,而这次我选择当下比较火的Github Action,不为别的,代码都托管在Github上了,亲儿子Action不用应该是脑袋有坑了。

我的方案是Github Action + Github + Coding。就是通过Github Action把网页自动部署在Github和Coding上。这个方案其实网络上早就有挺多人实现的了,但是试了一圈,一直卡在自动部署到Coding上,最后才发现Coding最近改版了,原来的方案都不能拿来直接就用,需要稍微改下域名才可以。

基本流程如下:

  1. 创建密钥
  2. 创建Github源代码仓库(私有),并上传私钥
  3. 创建Github静态网页仓库(开启GitPage),并上传公钥
  4. 创建Coding静态网页仓库,开上传私钥
  5. 在Github源代码仓库中编写Github Action代码,完成自动部署

1. 创建密钥

在命令行窗口中输入下面一行(其中your_email@example.com换成你的邮箱)

1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

然后一直回车就会在你的~/.ssh/目录下生成id_rsa.pub公钥和id_rsa私钥两个文件,这两个文件的内容待会要复制到git仓库中作为通关密码。

2. 创建Github源代码仓库


在Github上创建一个私有仓库,注意选择Private,然后将Hexo整个项目的代码上传上到该仓库下:

注意: 上传的时候可能会遇到报错,原因是theme下的next模板中也是一个git项目,简单粗暴的解决方案就是把next文件夹中的.git文件都删除了,但是这样做也有个坏处,就是当next官方发布更新时,你就无法直接拉取更新了

创建好了源代码仓库后,就可以设置私钥:在Settings->Secrets中选择Add a new secret:

然后填写NameValue,其中Name可以自己设定(后面编写自动部署的代码时会用到),比如我设为ACTION_DEPLOY_KEY,而Value就是你刚才生成的密钥了,你可以在命令行窗口运行

1
cat ~/.ssh/id_rsa

就可以得到如下的输出

将输出的内容全部(包括-----BEGIN OPENSSH PRIVATE KEY----------END OPENSSH PRIVATE KEY-----)复制到Value输入框中即可。

3. 创建Github静态网页仓库

在Github上创建另一个仓库,用于存放静态网页文件,并开启GitPage的功能。

创建的步骤就不用多说了,创建一个公开的仓库即可,然后把源代码的public文件中的内容上传到静态网页仓库。接着上传公钥,在Settings->Deploy keys中选择Add deploy key:


其中Title可以随便取名,key的内容来源于第一步设置的公钥,在命令行窗口中输入:

1
cat ~/.ssh/id_rsa.pub


然后将输出的内容复制到key中即可。

同时,不要忘记开启GitHub Pages的功能,在Settings->Options中,往下拉找到GitHub Pages并启用它,如果你用自己的域名,还可以顺带设置Custom domain:

4. 创建Coding静态网页仓库

在Coding中创建一个项目,选择DevOps项目

填写项目名称、项目地址等信息后,把静态网页的代码也上传到该仓库中

然后在代码仓库设置栏目中设置部署公钥,公钥名称可自定义,公钥内容内同第3步。

之后在持续部署静态网站中新建静态网站:

5. 在Github源代码仓库中编写Github Action代码

在Github源代码仓库的Action页面中New workflow,然后选择set up a workflow yourself

接着在代码编辑框中输入自动部署的代码:

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
name: CI

on:
push:
branches: [ master ]
pull_request:
branches: [ master ]

jobs:
build:
runs-on: macOS-latest # 配置代码运行操作系统环境
steps:
- uses: actions/checkout@v1
- name: Use Node.js 12.x # 配置Node环境
uses: actions/setup-node@v1
with:
node-version: "12.16.1"
- name: Setup Hexo env # 配置Hexo环境
env:
ACTION_DEPLOY_KEY: ${{ secrets.ACTION_DEPLOY_KEY }} # ACTION_DEPLOY_KEY在第2步中设置
run: |
# set up private key for deploy
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" | tr -d '\r' > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
ssh-keyscan e.coding.net >> ~/.ssh/known_hosts # 注意,Coding的地址已经改成e.coding.net,很多教程中使用的地址都是旧的,导致无法完成部署
git config --global user.name 'wwwxmu' # 这里要将wwwxmu改为你的github和Coding的用户名(注意github和Coding的用户名必须相同)
git config --global user.email 'www@stu.xmu.edu.cn' # 这里要将www@stu.xmu.edu.cn改为你的邮箱
npm i -g hexo-cli
npm i
- name: Deploy
run: |
# publish
hexo clean
hexo generate
hexo deploy # 执行部署程序

至此,所有设置都已经完成。接下来,你只要安心写作。写完之后,在源代码的根目录下依次运行:

1
2
3
git add .
git commit -m'修改哪些内容'
git push

这样,新的文章会自动推到github的源代码仓库,同时触发Github Action,将其发布到Github Page和Coding中。