使用 Hexo 在 Cloudflare Pages 上部署带主题的个人博客

浅蓝喜灰

本文章将介绍如何使用 Hexo 在 Cloudflare Pages 上部署属于自己的博客网站。

准备阶段

本文预设你已拥有一个自己的域名。

安装阶段

安装 Node.js

前往官网 下载 Node.js,你可以选择 LTS 版本,也可以选择最新版本。
下载好后,运行 Node.js 安装程序,你可以安装在你喜欢的位置,且安装时不需要额外勾选任何选项
你一安装完毕,在新建的终端中输入命令

1
npm

如果没有提示

1
2
'npm' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

则代表你已经成功安装。

安装 Hexo

在终端输入命令

1
2
# 如果你是在 Linux 下进行安装,该文件会被安装到 root 目录下,因此可能需要你使用 sudo 提权
npm install hexo-cli -g

之后,创建一个名为 blog 的文件夹,并初始化为博客仓库

1
2
3
mkdir blog
cd blog
hexo init

需要注意的是,如果你在安装 Hexo 时执行的命令是

1
npm install hexo

将意味着你仅局部安装 Hexo 包,请以

1
npx hexo init

代替

1
hexo init

安装主题

在终端中接着输入

1
npm install hexo-theme-redefine@latest

这样就可以安装 Redefine 主题到本地。
接着在 blog 文件夹里打开 _config.yml 并找到如下一行

1
theme: landscape

此处是你的博客所使用的主题,由于官方主题并不好看,我这里将以 Redefine 代替

1
theme: Redefine

大部分主题的配置文件应当相似,且部署步骤的差异应当很小,因此你可以自行替换为你想要的主题,但请在部署前仔细阅读主题文档,确保没有关于网页部署的特别要求。

配置主题

如果你使用的是 Redefine 主题,请参考他们的官方文档 进行修改,注意该主题有 v1 和 v2 两个版本,当你发现你的配置文件无法和官方文档对上时,请检查你的 Redefine 主题版本号是否和当前阅读的文档一致。此处不赘述配置过程。

推送到 GitHub

在你的 GitHub 上新建一个仓库,不限制仓库可见性,你可以将其设置为 Private 仓库;仓库名字不限。
部署的方法有很多,此处使用最简单的 hexo-deployer-git 方法。
首先安装 hexo-deployer-git 插件。

1
npm install hexo-deployer-git

完成后,打开 _config.yml 并在文件尾部追加下列配置项(如果该配置项已在 _config.yml 中存在,请直接将相关项替换即可)。

1
2
3
4
5
6
7
8
9
10
deploy:
type: git
repo: https://github.com/<username>/<project>
# repo 填的是你要推送的仓库地址,例如
# https://github.com/b1u3/blogstorage.git
# 除了 HTTPS 还支持 SSH 地址
# [email protected]:b1u3/blogstorage.git
# 额外声明:以上地址为本人虚构,如能推送,纯属巧合
branch: main
# 推送的分支,稍后会再提

这将推送到 main 分支上,同样的,不强制要求你必须把成品推送至此分支。

提示

请不要直接通过 Git 将你的源文件推送至仓库,否则你将会把一堆需要进行构建的源文件推送到仓库,在 Cloudflare Pages 自动抓取后还需要耗费大量时间从零构建,极其耗费时间。

在推送更改之前,请至少先检查网站是否正常工作,执行

1
hexo s

并通过 localhost:4000 检查你的网站是否正确显示。一旦确认无误,在 PowerShell 终端中执行

1
hexo clean; hexo d -g

你的网站就会先构建并在随后推送至你相应的 GitHub 仓库。

配置 Cloudflare Pages

前往 Cloudflare 登录你的账号(如果没有,请直接注册),在左侧边栏找到 Workers 和 Pages

点击“连接到 Git”

如果这是你第一次使用,Cloudflare 会要求获得你的 GitHub 账号授权,建议勾选上“All Repository”选项,确保将来构建的仓库也可以被 Cloudflare Pages 抓取。接着,找到你先前推送的仓库,选择它。此处,我先前推送的仓库是 blog,则此处选择 blog。

之后给你的项目进行设定,项目名称自拟,生产分支选择先前我们所推送到的分支,也就是我们先前在 _config.yml 中为 branch 设定的参数,如果不记得了就回头看一下吧。
一般来说我们要在“框架预设”中,设定你所使用的框架,但是由于某些原因,Cloudflare Pages 移除了对 Hexo 的支持,导致你现在无法在这里选择到 Hexo,不过没关系,由于我们推送的是已经构建好的网页文件,因此移除与否均不会影响我们使用,在“构建命令”中填入

1
exit 0

随后就可以直接开始构建。


构建完成后,我们可以为项目指定自己的域名。此处点击“设置自定义域”。

输入自己的域名。

由于我的域名是在 Cloudflare 上购买的,并且没有迁出该域名,因此可以直接在这一步骤中自动调整 DNS 设置。如果你使用的是其他的服务商提供的域名,那么就在相应的服务商网站按照下面的图片更改即可。

点击“激活域”之后,等待 DNS 检查完成,检查步骤不是立即完成,而是需要一定时间才能生效,如果你在其他服务商那里设置的域名 DNS 设置,可能时间会更长一点,请耐心等待。


到这一步你的部署也就完成了,如果你的文章有修改的需要,只需要每次重新执行

1
hexo clean; hexo d -g

即可重新推送网页到 GitHub 仓库,Cloudflare Pages 将会自动抓取仓库内容,生成网页。

评论
此页目录
使用 Hexo 在 Cloudflare Pages 上部署带主题的个人博客