我用 Hexo 和 Cloudflare 重构了整个博客

起因

之前, 我的博客的技术栈是这样的:

但是我受够 Jekyll 的种种不便之处了, 主要原因还是自己不懂 Ruby, 又不想多学一种语言, 而且最近我白嫖的阿里云服务器也快过期了.

种种因素加起来, 导致我决定转向以 NodeJS 为开发语言的 Hexo. 事实证明,对我来说 Hexo 比 Jekyll 快乐多了, 那是一种本来在沙漠中数天没喝水, 突然发现了一片绿洲, 整个人精神焕发的奇妙感觉.

于是, 我决定将技术栈转变为, 并将整个博客重构:

本文参考了两篇博文:

MexiiSukka

我会较为详细地描述我构建博客的整个过程, 希望对你有所帮助 😃

本地搭建

Hexo 的基础使用

安装

首先你需要安装 NodeJS, 可以在网上找到相关的下载地址, 这里就不在赘述.

然后你就可以在命令行执行下面的命令安装 Hexo.

1
npm install -g hexo-cli

安装完成之后, 可以执行

1
hexo --version

来检查是否安装成功.

创建项目

安装好 Hexo 之后, 就要创建你的博客项目了.

这里的 blog 是你的项目的目录名称, 可以改成任何你需要的名称.

1
2
3
4
hexo init blog
cd blog
npm install
hexo serve

不出所料的话, 你的浏览器会打开一个页面, 表明着你的博客诞生了:

『 Hello, World! 』

加入 Git 版本控制

在这里, 我默认你已经知道 Git 的基本用法.

若你还没用过 Git, 可以在 腾讯软件中心 下载安装 Git. 想了解更多 Git 有关的内容, 可以看看 廖雪峰的 Git 教程.

在博客根目录下执行:

1
2
3
git init
git add *
git commit -m"Init"

并在 Github 上 新建一个 Repo 用于存储你的代码.

详细用法

请参照 Hexo 官网

其中我认为比较重要的是:

  • 如何发布新博文
    • hexo new draft <title>
    • hexo publish <title>
  • 如何添加查看全文
    • <!-- more -->
  • 本地热更新 Server (开发用)
    • hexo s
    • hexo s --draft
  • 生成静态文件
    • hexo g
    • 部署前请务必执行一次该命令

Hexo 主题的选择

Hexo 知道默认主题不可能让挑剔的你满意, 所以在开源社区的帮助下, 向你提供了超过三百个不同的主题插件.

在这里, 我选择了一个界面相对美观且功能齐全的主题: Stun.

你也可以直接查阅它的官方文档.

Stun 内置了许多功能, 你可以自由选择是否开启.

我开启了 Stun 中的这些功能:

  • 国际化 (i18n)
  • 夜晚模式
  • 二级导航菜单
  • 文章目录
  • 文章阅读进度条
  • 文章置顶
  • 代码高亮
  • 标签云
  • 评论系统 (Gitalk)
  • 搜索系统
  • 数学公式支持 (KaTex)
  • Nest 特效

安装主题的一个坑

因为主题本身也是一个 Repo, 有着自己的 .git, 导致引发了 submodule 问题. 大概就是 git 提交不成功, 主题文件会被识别为 submodule.

按照 Mexii 的说法, 似乎可以自己新建一个.gitmodules文件,填入:

1
2
3
[submodule "hexo-theme-light"]
path = themes/light
url = https://github.com/tommy351/hexo-theme-light

我暂时没什么好的解决办法, 干脆把 themes/stun 目录下的 .git 目录给删除了. 虽然这会对后续的更新造成极大的困难, 但是好歹解决了一定的问题.

部署到 Cloudflare

安装 Wrangler CLI

这里本来应该用 NPM 或者 Yarn 安装, 就像这样:

1
2
npm i @cloudflare/wrangler -g
# yarn global add @cloudflare/wrangler

但是不知道为什么我总是安装失败, 各种报错看得我头疼, 最终放弃这种方式.
(也不知道是不是网络问题)

我们可以直接去 Github Release 下载.

如果你是 Windows 系统, 只需要选择 pc-windows 对应的包就好. 下载好了以后解压到 PATH 环境变量下, 即可在命令行通过 wrangler 命令调用.

可以使用以下命令查看是否安装成功:

1
wrangler --version

开启 Workers

Workers 是 Cloudflare 开发的用于构建无服务器应用程序的服务, 其会部署到 Cloudflare 在全球数以百计, 而且支持续集成 CI, 可以说很适合 Hexo 这种静态博客网站的部署.

前往 Cloudflare Workers, 可以选择免费计划并开启一个 Worker, 免费计划可以支持一天最多10万次请求, 对小型博客来说完全足够, 如果请求量大, 可以选择升级套餐, 获得更好的支持.

例如说我开启了一个名叫 blog 的 Worker, 那么在上传了网站内容之后, 我就能获得一个叫 blog.orangex4.workers.dev 的子域名, 这个子域名就是可以访问的 Workers 了.

绑定域名

如果你在其他服务商如阿里云那里买了一个域名, 你只需要给域名添加一个 CNAME 记录, 让它映射到你开启的 Workers 子域名便好.

你也可以让 Cloudflare 托管你的域名, 即在你的域名服务商那里把 DNS 服务器更改为 Cloudflare 的服务器, 然后在 Cloudflare 那里也修改你域名的 CNAME 记录, 让它映射到你的 Workers.

详细请见 Cloudflare Add Site

接下来的内容绝大部分参考 Sukka 的博文.

创建 API Token

使用 Wrangler CLI 前需要申请一个 API Token.

Cloudflare 提供了包括「Edit Cloudflare Workers」在内的一系列 Token 模板, 直接选择 Workers 即可. 不过需要注意的是, 在下一步设置 Token 权限时将下图两个权限去掉, 因为部署 Cloudflare Workers Site 不需要用到这两个权限.

cfworkers-token-perm

其他配置同理, 按照默认即可.

初始化项目

在 Hexo 站点目录下执行命令:

1
2
wrangler init --site my-static-site
# 其中 my-static-site 是 Worker 名称, 如我的就是 blog

Wrangler CLI 会使用 Cloudflare Workers Site 的模板在项目里新生成一个 workers-site 目录和一个 wrangler.toml 文件.

接着手动配置 wrangler.toml:

1
2
3
4
5
6
7
8
account_id = ""                 # Cloudflare Account ID,去 Cloudflare 的控制面板找找
workers_dev = true # 是否启用 workers.dev 子域名
route = "blog.orangex4.cool/*" # Workers 所载的 Route
zone_id = "" # 域名在 Cloudflare 的 Zone ID

[site]
bucket = "./public" # 生成的 dist 路径,对于 Hexo 来说就是 public
entry-point = "workers-site" # Cloudflare Workers 相关代码存放处,默认就是 workers-site 目录

配置完了之后在命令行执行命令:

1
wrangler config

它会让你输入 API Token, 将上一步获取到的 Token 粘贴上去, 回车即可.

若没有报错, 说明初始化成功了.

预览和发布

运行下述命令即可对 Cloudflare Workers Site 进行预览:

1
2
wrangler preview --watch
# 将 bucket 中的文件上传到 Workers KV 中,浏览器会自动打开一个窗口进行预览

运行下述命令即可将网站发布到 Cloudflare Workers Site:

1
2
wrangler publish
# 将 Workers Site 发布到生产环境

使用 GitHub Action 持续集成

编写 Github Action 配置文件

在目录下新建目录 .github/workflows, 并在该目录下新建任意名称的 YAML 文件(如 deploy.yml), 该文件将作为 GitHub Actions 的配置文件.

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
name: Deploy
on:
push:
branches:
- main # 这里填写你的主分支, 比如 Sukka 的是 master, 而我的是 main
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version:
- 12.x
steps:
- name: Checkout # 这里 Sukka 的博文上缩进错了, 导致不能运行成功, 我修改了这里的缩进
uses: actions/checkout@v2
with:
# 令 GitHub 在 git clone 和 git checkout 后「忘记」使用的 credentials。
# 如果之后需要以另外的身份(如你的 GitHub Bot)执行 git push 操作时(如部署到 GitHub Pages),必须设置为 false。
persist-credentials: false
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
# 缓存 node_modules,缓存机制参见 GitHub 文档:https://help.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows
- name: Cache node_modules
uses: actions/cache@v1 # 使用 GitHub 官方的缓存 Action。
env:
cache-name: hexo-node-modules
with:
path: node_modules
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }} # 使用 package-lock.json 的 Hash 作为缓存的 key。也可以使用 package.json 代替
# Wrangler 在构建时会在 workers-site 目录下执行 npm i,因此也要缓存这里的 node_modules
- name: Cache workers-site/node_modules
uses: actions/cache@v1
env:
cache-name: workers-site-node-modules
with:
path: workers-site/node_modules
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('workers-site/package-lock.json') }}
- run: npm i # 执行 Hexo 的依赖安装
# 完成 npm i 后,hexo 已经被链接到 node_modules 下的 bin 目录、并被注册在 Node.js 的 $PATH 中
# Hexo 博客的 package.json 中默认注册了这些 script:clean/build/deploy/server
# 因此,在目录下执行 npm run build 等同于执行 hexo g,但是不需要全局安装 hexo-cli
- run: npm run build

先将配置文件推到 GitHub 上, 如果 GitHub Action 自动触发开始构建, 且没有错误发生, 再添加部署到 Cloudflare Workers Site 的相关配置.

通过 GitHub Action 将构建结果发布至 Cloudflare Workers Site

Cloudflare 推出了 Wrangler CLI 的 GitHub Action, 通过引入 wrangler-action 可以直接执行 wrangler publish. 先在 GitHub 仓库的设置页面添加 Secrets 环境变量, 名字叫做 CF_WORKERS_TOKEN, 内容为之前生成的 Cloudflare 的 API Token. 当然, 你也可以生成一个新的 Token.

然后, 在之前的 GitHub Action 配置文件的结尾补充以下内容:

1
2
3
4
5
6
- name: Deploy to Cloudflare Workers
uses: cloudflare/wrangler-action@1.1.0
with:
apiToken: ${{ secrets.CF_WORKERS_TOKEN }}
# 前一步设置的 Secrets 的名称
# 注意代码的缩进

然后用 git push 进行推送. 如果 Github Action 执行成功了的话, 你的博客应该会自动更新.

从此, 你只需要 git push 就能完成整个博客的更新, 简单快乐!

添加搜索引擎优化 (SEO)

参照这个文档 hexo-submit-urls-to-search-engine 中文文档.

我给我的博客加入了搜索引擎优化, 也正是因为这个原因, 我才把 Github 上的 Repo 改成了 Private.

按照该文档进行配置, 我加入了百度, 必应和谷歌的 SEO.

想要和 Github Action 使用, 得加上 hexo d 命令, 即在 - run: npm run build 下一行加一句 - run: npm run deploy.

参考链接

使用搜索:谷歌必应百度