本文最后更新于 197 天前，其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

文章摘要

针对动态博客依赖数据库及动态生成页面导致的CDN适配难题，通过Hexo框架搭建静态博客并部署至Cloudflare Pages实现解决方案。基于Node.js环境配置Hexo工作流，结合GitHub仓库托管与Cloudflare Pages自动化构建，解决了静态资源缓存与部署效率问题。通过主题更换与CSS自定义实现首页全屏背景展示，兼顾视觉效果与功能适配。该方案适用于需临时镜像备份的场景，利用静态博客免服务器依赖、抗DDoS攻击的特性，为家庭数据中心提供低成本高可用的博客托管方案。

Qwen3-14B · 2026-06-18

Contents

1 前言
2 本地部署hexo并创建对应的github仓库
3 使用cloudlflare pages关联github仓库构建hexo
4 更换主题
5 设置首页背景图片全屏显示
5 总结

1 前言

折腾了wordpress这几个月来，我从一个啥都不懂的纯小白，成功的进化成为了初级入门者：能够熟练使用各种插件、进行页面的布局设计、使用主题编辑器快速添加脚本等等常规操作，并充分享受到了wordpress带给新手的便利：评论、搜索(包括全文搜索)、通过插件快速扩充功能等。

不过嘛，有利就有弊，也慢慢感受到worldpress这类动态博客的缺点：
1、依赖于数据库

这点其实既是优势(评论和搜索功能都是基于数据库的)，也是劣势(必须使用虚拟机或者云主机或者至少一个支持docker的环境)，没有办法像静态博客一样随便找个托管商托管上去就完事。
2、页面需要动态生成

由于动态博客本身的工作方式，正常情况下页面缓存变得很麻烦，对CDN非常不友好。为了使用CDN，一般都需要通过插件把动态页面转成静态html才能进行缓存、又或者使用自建worker-KV的方式(官方正版功能是APO)才能达到比较好的访问体验。而更有甚者，一些博主为了达到接近静态博客全站缓存的效果，生生放弃了自带的评论和搜索功能，将wordpress生生”变成”了静态站点，这样的行为简直令人发指～～。

我虽然在短期内没有从动态博客改换门庭到静态博客的想法，但是也觉得静态博客的确有其优势，加上之前一段时间被ddos攻击了一番，虽然只有很小一部分流量进入我的家庭数据中心，且没造成太大影响，但是也颇为羡慕静态博客直接找个免费的静态页面托管商一托管就啥再也不用担心的优势：这是真正的永远在线啊。况且我现在的同城镜像站点是架在腾讯云的轻量服务器上，万一我不租服务器了，那镜像站点就没了～～～所以想想，如果只是临时解决我家里因为停电这种特殊场景导致的博客主、备用站点都down时的镜像站点需求，又不追求界面一模一样而是专注博文内容的话，那么静态博客其实也是一个实用性很高的解决方案(搜索和评论也有对应的实现方案，不过比较麻烦，暂时就不涉及了)。

研究了半天之后，决定使用基于node.js的Hexo框架，毕竟直接支持markdown，这个优势很大(现在wordpress也可以通过插件支持，不过在代码块里有一些特殊符号的时候，就容易出现乱码，这时候还是需要转成html)，并且Hexo貌似也有丰富的支持，同时也可以方便的通过插件把wordpress的文章导过去，虽然对环境配置有一些要求，迁移本地环境到其他环境时候需要重新配置，稍微麻烦一点，但是我只是用来做一个静态博客的演示站点，又不是主力博客，所以这些问题都可以忽略(况且在cloudflare pages上进行构建的时候，是可以指定和本地一模一样的版本的)，刚好我的macmini上装了github desktop来维护静态站点的更新，所以干脆就用macmini来部署Hexo，让m1乞丐版macmini继续发挥余热，多做贡献～。

2 本地部署hexo并创建对应的github仓库

2.1 部署node.js

hexo需要使用npm命令进行安装，而npm已经被集成进了node.js里，所以只需要安装node.js即可。
官方下载链接如下：https://nodejs.org/en/download：

下载完安装包并成功安装之后，可以使用如下命令确认当前npm和node的版本：

npm -v
node -v

如下：

记住这个版本号，后面要用。

2.2 在本地环境安装hexo

按照如下流程在本地安装hexo：
1、修改npm命令的权限范围

sudo chown -R  $(whoami)$ (npm config get prefix)/{lib/node_modules,bin,share}

注：如果不修改，则无法使用npm正常安装软件

2、升级npm到新版本(可选)
因为看到npm有新版本提示：

所以给npm升级：

npm install -g [email protected]

3、安装hexo

npm install hexo-cli -g

4、创建并初始化hexo工作目录(工作目录大家根据自己实际路径进行修改)：

mkdir /Volumes/data/hexo
hexo init /Volumes/data/hexo

2.3 以本地hexo目录直接创建github上的hexo仓库

注：本来之后通常的部署方式是采用命令行的方式，需要下载安装git并生成本机ssh公钥，然后将公钥添加到github账号中，还需要安装hexo-deployer-git插件并配置hexo配置文件，最后实现命令行下的更新发布管理，不过因为之前我已经在macmini上部署了github desktop，为了利旧，所以我后续的操作和网上的教程不同，不过因为github desktop是图形界面，用起来肯定比git的纯命令行要舒服，大家可以尝试一下，不过需要先安装github desktop。

以本地hexo目录直接创建hexo仓库，请按照如下流程：

提交hexo目录init的文件到hexo仓库的main：

发布到仓库：

这时候github上已经成功创建hexo仓库并完成了init生成文件的上传：

也可以在本地启用hexo服务并进行访问，查看实际效果，按照如下流程操作：
打开hexo本地web服务：

cd /Volumes/data/hexo
hexo server

使用http://localhost:4000访问hexo：

查看hexo安装的版本，后面构建的时候需要：

hexo version

3 使用cloudlflare pages关联github仓库构建hexo

详细的配置步骤请参考我另一篇文章：家庭数据中心系列使用github+cloudflare pages为www导航页搭建新家，我这里就简要记录下关键步骤：

上图中构建命令如下：

npm install [email protected] && npx hexo clean && npx hexo generate

在环境变量中添加和本地一样的npm和node的版本，因为这两者默认版本非常低，不可用：

部署成功：

4 更换主题

在部署博客完成之后，下一步就是选择一个心仪的主题了。hexo更换主题非常简单，以我为hexo版博客更换Argon主题为例(为了和我的wordpress版博客统一风格)。

1、下载argon主题文件

下载hexo版的Argon主题的zip包到hexo工作目录下的themes文件夹，然后重命名下载的文件夹为argon：

cd /Volumes/data/hexo/themes
wget https://github.com/solstice23/hexo-theme-argon/archive/refs/heads/master.zip
unzip master.zip
mv hexo-theme-argon-master argon

注：之所以不直接使用 git clone 命令来下载主题文件，是因为在某些情况下，Git 会将主题目录当作子模块来处理，而如果没有正确配置或更新子模块，可能会导致推送时出现错误。这样不仅会引发提交冲突，还可能让本地和远程仓库的状态不一致，从而影响后续的版本控制和协作。因此，为了避免这种潜在问题，最好选择直接下载 ZIP 包并手动解压，确保主题文件不会被误认为子模块。

2、根据需要修改hexo主题配置

将 Hexo 根目录/themes/argon/_config.yml 复制到 Hexo 根目录/source/_data 文件夹中，并重命名为 argon.yml，然后根据自己的需要修改argon.yml中的各种配置选项。：

mkdir /Volumes/data/hexo/source/_data
cp /Volumes/data/hexo/themes/argon/_config.yml /Volumes/data/hexo/source/_data/argon.yml

3、配置搜索功能

在 Hexo 根目录/themes 目录下执行：

npm install hexo-generator-search --save

在 Hexo 根目录/_config.yml 中添加选项：

search:
  path: search.xml
  field: post
  content: true

4、设置hexo使用argon主题

设置Hexo 根目录/_config.yml中的”theme”字段内容为argon：

然后和前面一样在github desktop中”commit to main”，然后”Push origin”即可：

之后，很快cloudflare pages检测到github仓库的更新就会自动部署，非常的方便。

最后和我另一篇文章一样设置好自定义域名即可(参看文章：家庭数据中心系列使用github+cloudflare pages为www导航页搭建新家)，最终效果见：Hexo静态博客argon主题效果。

5 设置首页背景图片全屏显示

argon主题的hexo版相比wordpress版少了不少功能，其中就有一个我最喜欢的首页banner全屏功能：

该功能可以让首页打开后直接显示全屏的页面背景图片，这样我辛苦搭建的随机图片API才能充分发挥作用(收集喜欢的背景图片我可是花了好多功夫的)，只需要按照如下步骤操作即可。

1、修改index.ejs文件

编辑index.ejs文件：

vim hexo工作目录/themes/argon/layout/index.ejs

删除原有代码，将以下代码粘贴进去并保存：

<% if (page.path === 'index.html') { %>
    <section class="hero-banner">
    </section>
<% } %>

<div class="main-content">
    <% page.posts.each(function(post){ %>
      <%- partial('_partial/content-preview', {post: post}) %>
    <% }) %>
    <%- partial('_partial/pagination', {page: page}) %>
</div>

这段代码的作用是在首页渲染一个全屏背景区域（hero-banner），并显示最新的文章列表及分页。

2、修改sytle.css文件

编辑sytle.css文件：

vim hexo工作目录/themes/argon/source/style.css

在文件的最后粘贴以下代码并保存：

.hero-banner {
  height: 100vh !important; /* 让背景图片占满整个屏幕 */
  background-image: url('https://wallpaper.tangwudi.com/fallback.jpg') !important; /* 背景图片 */
  background-size: cover !important; /* 背景图片铺满屏幕 */
  background-position: center center !important; /* 背景图片居中 */
  background-repeat: no-repeat !important; /* 防止背景图片重复 */
  background-attachment: fixed !important; /* 背景固定 */
  display: flex !important; /* 用 flex 布局对齐内容 */
  justify-content: center !important; /* 横向居中 */
  align-items: center !important; /* 纵向居中 */
  color: white !important; /* 文字颜色 */
  text-align: center !important; /* 文字居中对齐 */
  padding: 0 1rem !important; /* 内边距 */
}

.hero-content {
  background: rgba(0, 0, 0, 0.5) !important; /* 半透明背景 */
  padding: 2rem !important;
  border-radius: 1rem !important;
}

.hero-content h1 {
  font-size: 3rem !important;
  margin-bottom: 1rem !important;
}

.hero-content p {
  font-size: 1.5rem !important;
}

这段代码的作用是为 hero-banner 创建一个全屏背景图，并通过 flex 布局居中显示内容，同时给 .hero-content 添加半透明背景和内边距，调整标题和段落的样式。

然后，如果是本地渲染和查看效果，依次运行如下命令：

hexo clean
hexo generate
hexo server

如果是像本文一样使用cloudflare pages来托管，那么就按照文章前面的步骤commit然后push到github仓库即可，随后cloudflare pages就会自动部署。

全屏效果如下：

注：如果之前配置了CDN，一定记得清除sytle.css，比如我使用的cloudflare缓存规则，就需要清除https://hexo.tangwudi.com/sytle.css，而不能仅仅清除首页的缓存。

5 总结

hexo博客的部署和主题配置其实不算复杂，真正麻烦的还是后续添加一些功能(wordpress就不同了，通过插件就可以非常简单的扩展各种功能)，这个我先研究一阵再专门写一篇文章记录吧。

📌 内容结构提示：

这篇内容属于「Cloudflare 学习地图」的一部分，你可以从这里查看完整内容路径： Cloudflare 学习地图。

分享这篇文章