GitHub x Pages:搭建静态化Hexo博客

GitHub x Pages:搭建静态化Hexo博客

前言

本篇博客会讲一讲我的博客现在的架构以及如何做一个差不多的博客。

架构

如果使用Hexo等静态页面生成器来构建个人博客的话肯定是建议使用Git + CI来进行储存+构建,因为如果静态博客一直在本地拖沓着没有版本控制/备份再加上NodeJS等解释器语言模块化的特性,用不了多久一直在本地部署的博客就会变得臃肿不看,甚至歇菜。
所以在这里推荐两种方式来部署,都用到了GitHub作为储存库,区别在于是使用CloudFlare Pages还是使用Github Pages来部署/分发页面。
而写这篇文章不仅是要讲讲这两种方法,也是对目前互联网上繁杂的信息做一个汇总,对现有的文章讲的东西进行优化之后再写的。

准备

使用两种方法都需要的先决条件就是有一个GitHub储存库,里面放着我们Hexo的源文件。
按图中大致方式创建一个私有储存库储存库,如果使用公开储存库则会让别人轻松地访问到我们博客的源文件,日后遇到版权纠纷就难说了。
TSIVB.png
创建好后,我们把这个库Clone到本地,这里建议使用GitHub Desktop进行操作。
TSCos.png
类似于这样,很方便地进行一个Clone。
TSwrK.png
Clone之后我们打开本地的文件夹,在该文件打开终端,进行hexo的配置。
当然因为这个文件夹不是空的,所以我们无法直接在里面进行Init,我们先随便找一个空文件夹执行

1
2
npm install hexo -g
hexo init

然后把这个文件夹内的东西移动到我们的Git文件夹
T0MQa.png
最后像这样,然后再按照个人需求进行配置,这里不多赘述。
配置完成后我们将源文件Push到GitHub。
T0O3S.png
回到GitHub Desktop我们可以发现更改已经可以提交了,在留言处随意写点什么然后commit即可,提交后我们发现旁边多出一个Push按钮,点击即可将更改推送到GitHub。
然后前置准备就完成了,让我们进入下一步。

CloudFlare Pages

这里先讲CFP的原因是这种方法相对于使用GitHub AC来部署会更简单易用,而且CF的CDN并不比GitHub慢,在SSL配置速度上甚至优于GitHub Pages。
下面是配置方法。
打开CloudFlare面板,进入Pages,添加一个站点。
按指引将自己的GitHub账户与CloudFlare连接起来后就可以选择储存库了,选择源文件所在的储存库,继续
T0oiN.png
按图上配置填写自动构建信息,保存并部署,然后就可以看到CloudFlare自动帮我们部署站点,坐等三分钟即可。
部署完成后添加自定义域名也是十分的方便,无论域名是否接入CloudFlare都可以绑定到Pages上,如果域名是绑定在CloudFlare上的那CF还会帮我们搞定域名绑定。
自此,以后我们无论从何处向该储存库提交文章,CloudFlare Pages都会第一时间构建并发布我们的博客,十分方便。
T0qtC.png
我们也可以在GitHub查看每一次提交对应的部署是否成功,在CloudFlare还可以对部署进行回滚等操作。

GitHub Actions X Pages

如果想全流程使用GitHub的话那我们也可以选择使用GitHub Actions作为CI自动构建,Pages作为PaaS来分发的方式来搭建Hexo博客。
首先我们需要为Actions准备一份SSH密钥作为其CI部署时向储存库提交更改的凭据。
来到一个Linux系统的终端,执行 ssh-keygen -f hexocidemo(-f 后的字段可自定义)
一路回车完毕后如图所示
T052L.png
我们可以发现在这个目录多了两个文件,一个带有.pub后缀,一个没有,有后缀的为公钥,没有的为私钥,两个都留着备用。
打开GitHub,为Pages创建一个公开仓库(如果有GitHub Pro/Team/Enterprise那也可以是私有仓库),如下图所示
T0Tbi.png
其中 github.io 前应为你的GitHub用户名/组织名以便获得无后缀的Pages入口。
T0UgX.png
随便创建个文件,来到设置里发现已经自动开启了GitHub Pages
T0WVt.png
接下来按图上流程添加一个公钥到仓库,内容是我们刚刚创建的公钥(请将文件内容一字不差地复制进去),然后保存。不要忘记勾选允许写入权限。
T0kqx.png
然后想这样,把Git仓库的SSH信息复制走,备用。
之后回到我们刚刚存放源文件的私有库
T0xrj.png
按流程添加对应公开仓库公钥的私钥,名称自定义。
来到_config.yml,修改deploy配置

1
2
3
4
deploy:
type: git
repo: <刚刚复制的SSH信息>
branch: main

然后打开package.json
"dependencies"里加入"hexo-deployer-git": "^3.0.0",保存
新建目录/文件 .github/workflows/HexoCI.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
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

不要忘记替换掉里面 <> 引出的内容
然后提交,不出意外就部署成功了
T0zQp.png
进入Actions查看,14s就部署完成了,还是很快的。
T0FCU.png
进入Public库查看,提交已经完成了。

最后

为了方便大家参照,我把本次部署的所有仓库设置为了公开仓库以供查看。
源文件仓库:https://github.com/KaguyaCloud/HexoSiteDemo-CI
GitHub Pages仓库:https://github.com/KaguyaCloud/kaguyacloud.github.io
CloudFlare Pages部署:https://hexositedemo-ci.pages.dev/
最后说两句,一个Git托管,CI构建的博客远没有想想中的复杂,现在PaaS也在激烈内卷,相信未来会有更多的Pages形式/云函数形式的PaaS提供商出现,CI的门槛也会越来越低。并且从防攻击的角度来说,一个托管在PaaS上的静态博客也算是无懈可击了。