用 GitHub + Cloudflare 搭建自己的 Blog 平台

Blog 版：在 F-SJ Blog 阅读

为什么想做这个 Blog

一直想做一个自己的 Blog 平台。

最早的想法很简单：希望有一个属于自己的云端空间，用来学习云端知识，记录学习内容，也方便随时打开、快速查阅和对外展示。

但这个想法之前一直没有真正开始。原因也很现实：自己搭云服务听起来就意味着服务器、运维、域名、部署、安全、备份和费用。对个人学习项目来说，如果一开始就要持续付费和长期维护，很容易先被成本劝退。

后来，AI 编程工具逐渐成熟。它把很多原来需要长时间搜索、试错和反复调试的工作，变成了可以快速验证的小步迭代。试错成本明显降低之后，这个 Blog 项目才真正开始推进。

项目起因，是搜索资料时看到别人用 GitHub Pages 搭建个人网站。GitHub Pages 给了一个很好的启发：原来个人 Blog 不一定要从买服务器开始，也可以先从静态网页开始。于是先从 GitHub Pages 的思路出发，尝试搭建一个低成本、可维护、可持续迭代的个人 Blog。

随着和 AI 一起不断深入方案，最后发现 GitHub + Cloudflare 更适合这个目标：GitHub 负责代码和版本管理，Cloudflare 负责静态网站托管、域名、CDN、HTTPS，以及后续的边缘函数和数据能力。

最终选型

当前 Blog 使用的核心组合是：

  • GitHub：保存源码、文章和版本历史。
  • Hexo：把 Markdown 文章生成静态网页。
  • Butterfly：作为 Hexo 的主题，提供页面布局和博客基础体验。
  • Cloudflare Pages：托管静态网站并自动部署。
  • Cloudflare DNS：管理域名解析和 HTTPS。
  • Cloudflare D1 / Pages Functions：为静态 Blog 增加少量动态能力。

当前正式访问地址：

GitHub 是什么，在这个项目里做什么

GitHub 是代码托管平台。它最重要的能力不是“存代码”这么简单，而是提供版本管理、分支协作、提交记录和远程备份。

在这个 Blog 项目中，GitHub 主要承担这些职责：

  1. 保存 Blog 源码。
  2. 保存 Markdown 文章。
  3. 记录每一次修改历史。
  4. 使用分支区分测试版本和正式版本。
  5. 让 Cloudflare Pages 可以从 GitHub 自动拉取代码并构建网站。

当前项目使用两个主要分支：

  • test：测试分支，用来触发 Cloudflare Pages Preview 部署。
  • main：正式分支，用来触发生产环境部署。

这个流程的好处是：文章、样式、配置和功能改动都先进入测试环境确认，确认没问题后再合并到正式环境。

GitHub Pages 是什么，为什么最后没有只用它

GitHub Pages 是 GitHub 提供的静态网站托管服务。很多个人主页、文档站和简单 Blog 都可以直接放在 GitHub Pages 上。

它的优点是：

  • 免费。
  • 和 GitHub 仓库天然集成。
  • 很适合纯静态页面。
  • 上手成本低。

这个项目最初也是受 GitHub Pages 启发。但继续深入后，发现项目需求不只是“把静态页面放出来”。后续还希望有：

  • 自定义域名和 HTTPS。
  • 更强的 CDN 和缓存能力。
  • 评论、访问统计等轻量动态功能。
  • 边缘函数能力。
  • 后续 AI 搜索、问答、数据索引等扩展空间。

所以最终选择 GitHub + Cloudflare Pages：GitHub 继续负责源码和分支，Cloudflare 负责部署和云端能力。

Hexo 是什么

Hexo 是一个静态博客生成器。它可以把 Markdown 文件转换成完整的静态网站。

GitHub 地址：

官网：

Hexo 的核心能力包括：

  • 使用 Markdown 写文章。
  • 自动生成文章页、首页、标签页、分类页和归档页。
  • 支持主题系统。
  • 支持本地预览。
  • 构建后输出纯静态文件，方便部署到任何静态托管平台。

在这个 Blog 中，Hexo 负责把 source/_posts 目录下的 Markdown 文章生成最终网页。平时只需要写 Markdown，构建时 Hexo 会生成 HTML、CSS、JS 和文章列表。

我们主要使用了 Hexo 的这些功能：

  1. Markdown 文章写作。
  2. 首页文章列表。
  3. 文章详情页。
  4. 标签、分类和归档。
  5. 本地静态预览。
  6. 静态资源生成。
  7. 搜索索引生成。

Butterfly 是什么

Butterfly 是 Hexo 生态里一个常用的博客主题。它提供了完整的博客界面和阅读体验。

GitHub 地址：

文档：

Butterfly 主要提供：

  • 响应式页面布局。
  • 首页、文章页、归档页、分类页、标签页样式。
  • 代码块展示。
  • 目录导航。
  • 文章卡片。
  • 搜索入口。
  • 页面视觉和交互效果。

在这个 Blog 中，Butterfly 负责基础外观和阅读体验。我们使用它作为主题底座，而不是从零写前端页面。

这样做的好处是：先把精力放在内容、部署和云端能力上，页面基础体验直接站在成熟主题之上。

我们在基础 Blog 上增加了什么

Hexo + Butterfly 本身已经可以完成一个静态 Blog。但这个项目额外增加了一些自定义能力，让 Blog 更像一个可持续演进的个人平台。

目前增加的功能包括：

1. 自定义域名

正式地址使用：

它比默认的 Pages 域名更适合长期使用，也方便后续迁移、展示和记忆。

2. Cloudflare Pages 部署流程

Cloudflare Pages 从 GitHub 仓库拉取代码，执行构建命令，然后发布生成后的静态文件。

当前思路是：

  1. 本地写文章或改功能。
  2. 提交到 GitHub。
  3. 推送到 test 分支进行预览部署。
  4. 预览环境确认无误。
  5. 合并到 main 分支发布正式站点。

3. 访问统计和互动数据

纯静态 Blog 原本没有后端数据库。为了增加浏览量、点赞或帮助反馈等能力，项目使用 Cloudflare D1 保存轻量数据。

D1 是 Cloudflare 提供的边缘 SQLite 数据库。它适合小型应用、个人站点和轻量数据记录。

4. Pages Functions

Cloudflare Pages Functions 可以给静态站点增加 API 能力。它不需要单独维护服务器，函数跟随 Pages 项目一起部署。

这个 Blog 使用 Pages Functions 承载一些轻量 API，例如：

  • 访问统计。
  • 文章反馈。
  • 评论相关接口。
  • 搜索或 AI 相关接口。

5. AI 能力预留和集成

随着 AI 编程工具参与项目构建，Blog 也预留了面向 AI 的扩展方向，例如内容索引、搜索增强和问答入口。

这个方向不是一次性做完，而是随着真实使用继续迭代。

Cloudflare 是什么，在这个项目里做什么

Cloudflare 是一套云网络和边缘计算平台。它最常见的能力包括：DNS、CDN、HTTPS、网站托管、边缘函数、数据库和安全防护。

在这个 Blog 项目里，Cloudflare 承担这些职责：

  1. 托管静态网站：Cloudflare Pages。
  2. 绑定自定义域名：Cloudflare DNS。
  3. 自动提供 HTTPS 证书。
  4. 使用 CDN 加速访问。
  5. 使用 Pages Functions 提供 API。
  6. 使用 D1 保存轻量数据。
  7. 为后续 AI、搜索和更多边缘能力留出空间。

Cloudflare Pages 文档：

Cloudflare DNS 文档：

Cloudflare D1 文档：

域名绑定流程

域名绑定的目标是让用户访问自己的域名，而不是默认的 Cloudflare Pages 域名。

当前正式域名是：

  • blog.fsj.dpdns.org

大致流程如下：

  1. 在 Cloudflare 中接入 fsj.dpdns.org 这个域名。
  2. 在 Cloudflare Pages 中打开 Blog 项目。
  3. 添加自定义域名 blog.fsj.dpdns.org。
  4. 在 Cloudflare DNS 中添加一条 CNAME 记录。
  5. 让 blog.fsj.dpdns.org 指向 Cloudflare Pages 默认域名。
  6. 等待 Cloudflare 完成域名验证和 HTTPS 证书配置。
  7. 访问 https://blog.fsj.dpdns.org/ 验证页面是否正常打开。

当前没有强制把裸域名跳转到 Blog。也就是说，重点只放在：

  • https://blog.fsj.dpdns.org/

这种做法更简单，也避免一开始就把根域名用途固定死。以后如果根域名要做导航页、个人主页或其它服务，也可以继续扩展。

本地开发流程

日常写文章时，主要流程是：

  1. 在本地 Markdown 文件中写文章。
  2. 使用本地预览检查页面效果。
  3. 构建静态网站。
  4. 提交到 GitHub。
  5. 推送测试分支，等待 Cloudflare Pages Preview。
  6. 验证测试站点。
  7. 合并到正式分支发布。

常见命令思路：

1
2
npm run serve
npm run build

如果涉及 Cloudflare Pages Functions 或 D1，还需要使用项目自己的 Pages 本地预览流程，避免只看静态页面而漏掉 API 问题。

发布流程

这个 Blog 的发布流程强调“先测试，再正式发布”。

推荐流程：

  1. 本地完成文章或功能修改。
  2. 本地构建通过。
  3. 推送到 test 分支。
  4. 等待 Cloudflare Pages Preview 部署成功。
  5. 打开测试地址检查页面和功能。
  6. 确认无误后合并到 main。
  7. Cloudflare Pages 自动发布正式站点。
  8. 访问 https://blog.fsj.dpdns.org/ 做最终确认。

这种方式比直接推正式环境更稳，也更适合 AI 辅助开发。AI 可以快速生成修改，但仍然需要通过测试环境确认结果。

这次搭建的收获

这次 Blog 搭建最大的变化，不只是做出了一个网站，而是把“个人云端平台”这件事拆成了可迭代的小步骤：

  • 先用 GitHub 保存内容和代码。
  • 再用 Hexo 生成静态 Blog。
  • 再用 Butterfly 快速获得可用的阅读体验。
  • 再用 Cloudflare Pages 发布到公网。
  • 再绑定自己的域名。
  • 再逐步加入统计、评论、搜索和 AI 能力。

以前觉得“搭一个自己的云端平台”像是一个很大的项目；现在借助 AI 编程工具，可以把它变成一连串可以验证的小任务。

这也是这个 Blog 的初心：用低成本的方式，搭一个自己的学习记录入口；既能沉淀内容，也能不断练习云端、前端、部署、域名、边缘函数和数据服务这些真实技术。

Cloudflare 相关扩展：如果想单独了解 Cloudflare 在这个平台中的定位、能力边界和后续扩展，可以看 Cloudflare：个人云端平台的低成本基础设施。

相关链接

核心开源项目：

官方文档：

当前站点：