本指南将介绍如何通过 Hexo 、GitHub 与 Cloudflare 的协同配合，搭建一套无需服务器维护、完全免费且自动化程度高的个人博客系统。

其工作原理如下：

  1. Hexo 作为静态网站生成器，负责将编写的 Markdown 格式文章转换为标准的 HTML、CSS 和 JavaScript 文件，生成可直接在浏览器中运行的静态网页。
  2. GitHub 在此承担双重角色——既是源代码的远程仓库，存储你的文章与站点配置；又通过 GitHub Actions 实现持续集成与部署（CI/CD），当你向仓库推送更新时，自动触发构建流程，生成静态文件并完成版本管理。
  3. Cloudflare 则将这些静态资源分发至全球数百个边缘节点，利用其内容分发网络（CDN）缩短访客与服务器之间的物理距离，同时提供免费的 HTTPS 加密、自动 SSL 证书续期以及页面缓存优化。

这一架构的核心优势在于分离式部署：内容创作与站点构建解耦，只需在本地专注写作，提交代码后，构建、部署、加速、安全加固等后续环节全部由云端服务自动完成。整个过程不依赖传统虚拟主机或云服务器，因此无需支付服务器租赁费用，也不必操心系统维护与安全补丁更新，实现了真正意义上的零成本运维与高可用访问。

1. 核心架构

  • 博客框架 (本地): Hexo (基于 Node.js)
  • 代码托管 (云端): GitHub (存储源码)
  • 构建与托管 (云端): Cloudflare Pages (自动拉取代码、生成静态页、CDN 加速)
  • 主题: Maupassant (极简风格)

2. 环境准备 (Prerequisites)

请确保本地安装好以下环境：

  • Node.js: (推荐最新的 LTS 版本)
  • Git: (配置好 git config --global user.name 和 user.email)
  • GitHub 账号: 并生成好 Personal Access Token (用于替代密码)。
  • Cloudflare 账号: 博客托管。
  • Spaceship 账号: GitHub 和 Cloudflare 提供了免费的二级域名，但使用个性化域名能显著提升博客的专业度。

3. 从零开始搭建 (Local Setup)

3.1 初始化 Hexo

在终端（Terminal/CMD）执行：

1
2
3
4
5
6
7
8
9
# 1. 安装 Hexo 脚手架
npm install -g hexo-cli

# 2. 初始化博客文件夹 (myblog 可自定义)
hexo init myblog
cd myblog

# 3. 安装基础依赖
npm install

3.2 安装 Maupassant 主题 【可选】

安装方法主要参考主题本身的文档说明。下面以主题 maupassant为例，你也可以选择自己喜欢的主题模板。

1
2
3
4
5
6
7
8
9
10
11
# 1. 下载主题
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant

# 2. [关键] 删除主题内的 .git 目录 (防止 Git 子模块冲突)
# Windows: 手动进入 themes/maupassant 删除隐藏文件夹 .git
# Mac/Linux:
rm -rf themes/maupassant/.git

# 3. 安装主题依赖的渲染器 
npm install hexo-renderer-pug --save
npm install hexo-renderer-dartsass --save

3.3 修改配置

打开根目录下的 _config.yml：

1
2
# 找到 theme 字段并修改
theme: maupassant

3.4 本地预览

1
2
hexo clean   # 必须清理缓存，否则可能报错 "No layout"
hexo s       # 启动服务器

访问 http://localhost:4000。加载完就可以看到页面效果了！

4. 上传代码到 GitHub

4.1 创建仓库

在 GitHub 创建一个新的空仓库（Repository），建议设为 Public 或 Private 均可。不要勾选 “Add README”。

4.2 推送源码

在博客根目录执行：

1
2
3
4
5
6
7
git init
git add .
git commit -m "Initial commit with Maupassant theme"
git branch -M main
# 替换为你的仓库地址
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main

鉴权提示： 当 Git 提示输入密码时，必须粘贴你在 GitHub 设置里生成的 ghp_ 开头的 Personal Access Token。

5. Cloudflare Pages 部署

参考cloudflare的说明。

  1. 登录 Cloudflare Dashboard -> Workers & Pages。
  2. 点击 Create Application -> Connect to Git。
  3. 选择刚才创建的 GitHub 仓库。
  4. 配置构建环境 (Build Settings)：
  • Project name: 默认即可。
  • Production branch: main
  • Build command: npm run build
  • Build directory: public
  1. 点击 Save and Deploy。

6. 绑定自定义域名 (Custom Domain)

  1. 在 Pages 项目页面 -> Custom domains -> Set up a custom domain。
  2. 输入你的域名（如 blog.example.com）。
  3. DNS 设置：
  • 如果你使用 Cloudflare DNS：自动添加记录，点击 Activate。
  • 如果你使用其他 DNS (spaceship/阿里云/腾讯等)：去添加一条 CNAME 记录，指向 Cloudflare 提供的 xxx.pages.dev。

7. 日常写作与更新流程 (Workflow)

永远不需要运行 hexo g 或 hexo d。

  1. 新建文章：

    1
    hexo new "My New Post"

  2. 编辑内容：
    修改 source/_posts/My-New-Post.md 文件。

  3. 本地预览 (可选)：

    1
    hexo s

  4. 一键发布：

    1
    2
    3
    git add .
    git commit -m "add new post"
    git push

等待 1-2 分钟，Cloudflare 会自动完成构建并更新网站。