Hexo x GitHub:自托管静态博客并使用CI自动构建

Hexo x GitHub:自托管静态博客并使用CI自动构建

前言

这篇 文章中讲过了如何把自己的静态博客托管在PaaS平台,但免费的PaaS为我们带来了一些问题,那就是中国大陆访客的体验会非常差劲。所以今天就来说说如何在使用CI自动构建的同时使用自己的服务器来托管Hexo博客。

前置条件

我们需要使用GitHub Action来实现CI自动部署同时将公共代码放在GitHub仓库后,这部分的配置见前文。但在配置时无需开启GitHub Pages,我们将使用自己的服务器来托管页面。

托管配置

在网站服务器中我们创建一个站点,之后进入站点目录执行

1
2
3
4
5
6
apt update
apt install wget unzip nodejs npm -y
# yum update
# yum install wget unzip nodejs npm -y
wget https://codeload.github.com/[YourGitHubUserName/Repo Name]/zip/refs/heads/main
unzip main

输出如图所示
TU
可以看到,unzip自动创建了一个新文件夹,记住这个文件夹的名称,将站点目录修改为这个文件夹,然后我们部署一个我自己写的钩子
在目录中创建app.js并执行npm install shelljs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const shell = require('shelljs');
const resd = shell.pwd();
const http = require('http');
const server = http.createServer((req,res) => {
shell.exec('chattr -i <新文件夹的名称>/.user.ini', {
cwd: resd.stdout
});
shell.exec('rm -rf public', {
cwd: resd.stdout
});
shell.exec('rm -rf <新文件夹的名称>/', {
cwd: resd.stdout
});
shell.exec('wget https://codeload.github.com/[YourGitHubUserName/Repo Name]/zip/refs/heads/main', {
cwd: resd.stdout
});
shell.exec('unzip main', {
cwd: resd.stdout
});
res.end('done');
});
server.listen(1146);

放行服务器的1146端口,或者改成自己想要的端口。
进入存放博客CI配置及源文件的私有仓库,按下面的配置修改CI文件

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
name: CI
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout source
uses: actions/checkout@v1
with:
ref: main
- name: Setup NodeJS
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node_version }}
- name: Setup Hexo
env:
ACTION_DEPLOY_KEY: ${{ secrets.<刚刚的私钥的名字> }}
run: |
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "<Your Email>"
git config --global user.name "<Your NickName>"
npm install hexo-cli -g
npm install
sudo timedatectl set-timezone Asia/Shanghai
- name: Deploy Hexo
run: |
hexo clean
hexo d
- name: Request API to Pull
run: |
curl "http://<Your IP>:<Your Port>"

在流程的最后添加一个curl来触发钩子,拉取最新的构建到Web服务器。
至此,我们的托管+构建自动拉取就完成了。

最后

现在本博客便是托管在自己的服务器上的,香港服务器的低延迟+纯静态博客极佳的响应速度让博客整体体验甚至优于某些部署在中国大陆的动态博客。