静态博客极速部署指南：Hexo + Redefine + Cloudflare Pages

引言

在经历了动态博客（如 Halo）的服务器内存焦虑、国内备案拦截、以及 :8090 端口尾巴的折磨之后，我最终选择了一条更纯粹的道路：静态博客。

静态博客的本质，是在本地将 Markdown 文件预渲染为纯 HTML/CSS/JS 文件，再将其托管到全球 CDN 节点上。它没有数据库、没有后端运行时、不消耗服务器内存，无需备案、无需绑卡、完全免费。

本文完整记录从零搭建一个基于 Hexo + Redefine 主题 + Cloudflare Pages 的静态博客全过程，并着重分析部署与配置中的常见陷阱。

环境与组件

项目	版本/配置
操作系统	Windows 10/11
本地运行时	Node.js v24.21.0 LTS
版本控制	Git 2.56.0
博客框架	Hexo 7.0
博客主题	Redefine v2.9.0
部署平台	Cloudflare Pages
域名解析	Cloudflare DNS

一、本地环境搭建

1.1 安装 Node.js 与 Git

Hexo 基于 Node.js 运行，因此首先需要安装 Node.js 与 Git。

Node.js：访问 nodejs.org 下载 LTS 长期支持版，一路 Next 安装。
Git：访问 git-scm.com 下载 Windows 版，一路 Next 安装。

安装完成后，打开命令提示符（CMD），验证安装：

node -v
# 输出示例：v24.21.0

git --version
# 输出示例：git version 2.56.0

1.2 安装 Hexo CLI

在全局环境中安装 Hexo 命令行工具：

1	npm install -g hexo-cli

1.3 初始化博客项目

选择一个存放博客源码的目录（例如 D:\MyBlog），在该目录下打开 CMD：

# 初始化博客，会自动生成 blog 文件夹
hexo init blog

# 进入博客目录
cd blog

# 安装项目依赖
npm install

初始化完成后，执行 hexo s，浏览器访问 http://localhost:4000，若能看到 Hexo 默认页面，说明本地环境搭建成功。

二、安装与配置 Redefine 主题

2.1 下载主题

Redefine 主题相较默认主题更加现代美观，支持暗黑模式、代码高亮、TOC 目录等功能。在博客根目录下执行：

1	git clone https://github.com/EvanNotFound/hexo-theme-redefine.git themes/redefine

2.2 启用主题

打开博客根目录下的 _config.yml，找到 theme: 字段并修改：

1	theme: redefine

2.3 复制主题配置文件

将主题目录下的配置文件复制到博客根目录，便于后续个性化修改且不影响主题升级：

1	cp themes/redefine/_config.yml _config.redefine.yml

注意：Hexo 的配置层级为：博客根目录/_config.yml（站点配置） > _config.redefine.yml（主题配置） > themes/redefine/_config.yml（主题默认配置）。

三、撰写与排版文章

3.1 新建文章

在博客根目录下执行：

1	hexo new "我的第一篇文章"

Hexo 会在 source/_posts/ 目录下生成对应的 Markdown 文件。

3.2 Markdown 核心语法

静态博客的排版完全依赖 Markdown 语法，以下为最常用的格式：

标题：

1 2	## 二级标题 ### 三级标题

代码块：

1
2
3

```bash
echo "Hello World"
```

表格：

1
2
3

| 项目 | 版本 |
| :--- | :--- |
| Hexo | 7.0 |

图片：

1	![图片描述](/images/图片名.jpg)

避坑警告：图片文件名必须为纯英文小写，路径必须为英文斜杠开头。VS Code 的预览窗口不识别 Hexo 的 source 根目录，会显示碎图，但部署后能正常显示，无需惊慌。

3.3 封面设置

在文章的头部信息（Front-matter）中添加 cover 字段：

---
title: 我的第一篇文章
date: 2026-10-02 12:00:00
tags:
  - 教程
categories:
  - 技术分享
cover: /images/cover.jpg
---

四、部署到 Cloudflare Pages

4.1 生成静态文件

在博客根目录下执行：

1 2	hexo clean hexo g

命令执行后，会生成 public 文件夹，其中包含完整的静态 HTML 文件。

4.2 上传到 Cloudflare Pages

登录 Cloudflare 控制台。
进入 Workers 和 Pages，点击 创建应用程序。
选择 Pages -> Upload assets。
输入项目名称（必须以英文字母开头，例如 my-hexo-blog）。
将 public 文件夹拖拽到上传区域，点击 部署站点。

部署完成后，Cloudflare 会分配一个 xxx.pages.dev 的临时域名。

4.3 绑定自定义域名

在 Pages 项目中，点击 自定义域 -> 设置自定义域。
输入你的域名（如 2004888.xyz），点击继续。
若域名已托管在 Cloudflare，系统会自动添加 CNAME 记录，无需手动操作。
等待状态变为 Active，即可通过 https://2004888.xyz 访问博客。

五、常见问题与排查

5.1 代码块无高亮、标题与正文混排

原因通常是底层渲染器缺失或注入的 CSS 覆盖了主题样式。

解决方案：

1	npm install hexo-renderer-marked --save

同时在 _config.redefine.yml 中确认：

code_block:
  copy: true
  style: mac
  highlight_theme:
    light: github
    dark: vs2015

5.2 域名绑定报错 “Hostname already in use”

这是因为旧项目仍占用该域名。前往 Cloudflare Pages 中的旧项目，删除其中的自定义域名，再回到新项目重新添加即可。

5.3 图片预览不显示但正文正常

VS Code 预览器的根目录是 blog/，而 Hexo 部署后的根目录是 source/。因此在 VS Code 中写 /images/xxx.jpg 会显示碎图，但 hexo g 后部署到 Cloudflare Pages 上能够正常渲染。以 localhost:4000 的实际显示为准。

六、运维与优化

6.1 常用命令速查

# 清除缓存
hexo clean

# 生成本地预览
hexo s

# 生成静态文件
hexo g

# 新建文章
hexo new "文章标题"

6.2 性能优化建议

图片压缩：上传前将图片压缩至 500KB 以内，减少带宽消耗。
CDN 加速：Cloudflare Pages 默认使用全球 CDN，无需额外配置。
自动部署：进阶方案可将博客源码推送至 GitHub，通过 GitHub Actions 自动构建并部署到 Cloudflare Pages，实现 git push 一键发布。

七、总结

静态博客无需服务器、无需备案，是个人博客的理想方案。
Hexo 负责本地渲染，Cloudflare Pages 负责全球托管，二者组合实现了零成本、免运维的博客部署。
配置文件严格遵循 YAML 语法，缩进必须使用空格，禁止使用 Tab 键。
Markdown 语法中的标题符号 # 与代码块符号 ``` 必须独立成行，且符号后保留一个空格。
本地预览与部署预览的根目录不同，图片路径以 localhost:4000 的实际显示为准。

八、整体系统架构图

以下为本博客部署的整体数据流转架构：

[本地电脑]
    │ 1. 写 Markdown 文章
    ▼
[Hexo 本地生成]
    │ 2. 执行 hexo g
    ▼
[public 静态文件夹] 
    │ 3. 拖拽上传
    ▼
[Cloudflare Pages] ──(自动同步)──> [全球 CDN 节点]
                                          │
                                          ▼
[访客浏览器] <───(HTTPS极速加载)─── [https://2004888.xyz]

致谢

感谢所有在开源社区贡献代码的开发者，让个人建站从一项复杂的工程，变成了一次愉快的折腾。

本文基于 Windows 11 / Node.js v24.21.0 / Hexo 7.0 / Redefine v2.9.0 / Cloudflare Pages 实践整理。

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)