终于！经过几天的摸索，我成功将个人博客通过 Hexo + Cloudflare Pages 搭建上线了🎉。这篇文章是这个博客的第一篇文章，记录整个过程，也为之后回顾或他人参考留下痕迹。

🚧 搭建背景

我一直想拥有一个属于自己的技术博客，用来记录学习笔记、项目经验、技术随想等内容。看过很多方案，最终选择了：

  • Hexo：静态博客框架，速度快、插件多、支持 Markdown。
  • Cloudflare Pages：部署简单，访问速度快，免费绑定自定义域名。

🧱 环境准备

  • Node.js：我使用的是 v20+
  • Git：用于版本控制和部署
  • GitHub：用来托管博客源代码
  • Cloudflare：用来部署博客并绑定自定义域名

⚙️ 搭建过程

1. 安装 Hexo

npm install -g hexo-cli
hexo init my-blog
cd my-blog
npm install

成功后，Hexo 会创建一套完整的博客目录结构。

2. 写第一篇文章

hexo new "Hello Hexo"

在 source/_posts/ 目录中会生成一篇 Markdown 文件，编辑后保存即可。

3. 本地预览

hexo server

访问：http://localhost:4000，能看到博客已经可以运行了 ✅

☁️ 配置自动部署到 Cloudflare Pages

我将整个 Hexo 项目推送到了 GitHub，然后通过 GitHub Actions 实现自动构建和部署，部署到 Cloudflare Pages。

具体流程如下：

  1. 在 Cloudflare Pages 中创建项目，连接到 GitHub 仓库。
  2. 配置构建命令：
    npx hexo generate
  3. 设置输出目录为：
    public
  4. 在 GitHub 添加 Secrets：CF_API_TOKEN 和 CF_ACCOUNT_ID
  5. 创建 GitHub Actions 工作流 .github/workflows/deploy.yml

完成后，每次我写完文章并 git push，Cloudflare Pages 会自动构建并上线博客。

🌐 自定义域名

我绑定了自己的域名，Cloudflare 提供免费 HTTPS 证书和自动续签，访问体验非常棒。

🎨 主题美化

我选用了开源主题 next，颜值和功能都非常不错，后续也会根据需要进行一些定制化修改，比如：

  • 添加评论系统（Waline / giscus）
  • 增加搜索功能
  • 页面加载动画
  • 夜间模式

🧠 踩坑记录

  • 一开始我把 Hexo 生成的 public/ 目录推送到 GitHub Pages，发现不能方便写作和管理，于是改为 整个项目上传，自动构建。
  • Cloudflare Pages 的 API Token 必须设置正确权限，否则 GitHub Actions 无法上传。
  • 一定要记得 .gitignore 里 不要忽略 Hexo 的重要目录（如 themes/）。

📸 最终效果

博客地址：https://your-name.pages.dev
自定义域名：https://blog.yourdomain.com

首页预览图：

blog-preview

📌 总结

Hexo + GitHub + Cloudflare Pages 的组合让我拥有了一个完全属于自己的技术博客，并且免费、快速、自动部署，写作体验极佳！

之后我会持续在这里分享学习笔记、实战经验和一些有趣的技术内容，希望能帮助到其他人，也算是给自己的成长做记录。

📬 你也可以通过右下角评论区与我交流，或者点击页面右上角关注更新~

谢谢阅读！