Hexo + Cloudflare Pages 完全指南

Posted on

这套方案可以完美实现你想要的自动化流程：本地写 Markdown → 推送到 GitHub → Cloudflare 自动构建并发布。

📋 整体架构

1
2
3
4
你的电脑                     GitHub                 Cloudflare Pages
    |                           |                          |
写文章(.md)  →  git push  →   仓库      →   自动触发构建   →   全球CDN发布
                                       (每次推送自动部署)      (pages.dev域名)

整个过程除了写文章，其他全是自动化的，不需要任何手动操作。

🚀 第一步：本地环境准备

1.1 安装 Node.js

Hexo 是基于 Node.js 的，所以需要先安装 Node.js。

  • 访问 Node.js 官网 下载 LTS 版本（长期支持版）
  • 安装完成后，打开命令行（CMD 或 Terminal），输入以下命令验证：
1
2
node -v
npm -v

如果能显示版本号（如 v20.x.x），说明安装成功。

1.2 安装 Git

Git 用于将本地代码推送到 GitHub。

  • 访问 Git 官网 下载并安装
  • 安装完成后配置用户名和邮箱（这些信息会记录在你的提交中）：
1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

1.3 安装 Hexo

1
npm install -g hexo-cli

安装后验证是否成功：

1
hexo -v

📝 第二步：初始化 Hexo 博客

2.1 创建博客项目

在你想要存放博客的文件夹中，打开 Git Bash 或命令行，执行：

1
2
3
hexo init my-blog      # my-blog 是文件夹名，可以改成你喜欢的
cd my-blog
npm install

初始化完成后，目录结构是这样的：

1
2
3
4
5
6
7
8
my-blog/
├── node_modules/    # 依赖包（自动生成，不用管）
├── scaffolds/       # 文章模板
├── source/          # ⭐ 你的 .md 文章就放在这里
│   └── _posts/      # ⭐⭐⭐ 文章存放目录（重要！）
├── themes/          # 主题文件
├── _config.yml      # 博客配置文件
└── package.json     # 项目配置

2.2 本地预览

1
hexo clean && hexo s

打开浏览器访问 http://localhost:4000，就能看到你的博客了。

2.3 写第一篇文章

1
hexo new "我的第一篇博客"

这个命令会在 source/_posts/ 目录下生成一个 我的第一篇博客.md 文件。用任何文本编辑器打开它，开头会有这样的格式：

1
2
3
4
5
6
7
8
9
10
---
title: 我的第一篇博客
date: 2026-04-06 16:00:00
tags: [随笔]
categories: 生活记录
---

# 正文从这里开始

这里用 Markdown 语法写内容...

这就是你以后写文章的方式：用 hexo new "文章标题" 创建新文章，然后用 Markdown 格式写内容。

🔗 第三步：推送到 GitHub

3.1 创建 GitHub 仓库

  1. 登录 GitHub，点击右上角 + → New repository
  2. 仓库名可以随便起（比如 my-blog）
  3. 建议设置为 Private（私有仓库），这样你的博客源码不会公开
  4. 创建完成后，复制仓库地址（如 https://github.com/你的用户名/my-blog.git）

3.2 推送本地代码

1
2
3
4
5
git init
git add .
git commit -m "初始化博客"
git remote add origin https://github.com/你的用户名/my-blog.git
git push -u origin main

☁️ 第四步：Cloudflare Pages 配置

4.1 连接 GitHub 仓库

  1. 登录 Cloudflare 控制台

  2. 左侧菜单点击 Workers & Pages

  3. 点击 创建应用程序 → Pages → 连接到 Git

  4. 授权 Cloudflare 访问你的 GitHub 账号，然后选择你刚才推送的仓库 my-blog

4.2 配置构建设置

这是最关键的一步，配置必须和下图一致：

配置项 填写内容 说明
生产分支 main 你的主分支名称
框架预设 None 保持无预设
构建命令 npm run build ⚠️ 注意：不要用 hexo generate，会报错
输出目录 public Hexo 默认输出目录

有教程提到官方文档写的 hexo generate 会报错找不到 hexo，正确命令是 npm run build。

4.3 点击部署

点击 保存并部署，Cloudflare 会自动拉取你的代码，执行构建命令，然后把生成的 public 目录发布到全球 CDN。

等待 1-2 分钟，部署成功后你会得到一个类似 xxxx.pages.dev 的访问地址。

🔧 第五步：后续工作流

写新文章并发布

以后每次写新文章，只需三步：

1
2
3
4
5
6
7
8
9
# 1. 创建新文章
hexo new "新文章标题"

# 2. 用编辑器写内容（在 source/_posts/xxx.md 里）

# 3. 推送到 GitHub
git add .
git commit -m "发布新文章"
git push

推送之后，Cloudflare Pages 会自动检测到更新并重新部署，无需任何手动操作。一般 1-2 分钟后，你的博客就会更新。

🌐 第六步（可选）：绑定自定义域名

如果你有自己的域名，可以这样配置：

  1. 在 Cloudflare Pages 项目页面，点击 自定义域
  2. 点击 设置自定义域，输入你的域名（如 blog.yourname.com）
  3. Cloudflare 会自动添加一条 CNAME 记录（如果你的域名也在 Cloudflare 管理的话）
  4. 等待 DNS 生效，SSL 证书会自动颁发

免费 SSL 证书是自动配置的，无需额外操作。

📊 免费额度一览

Cloudflare Pages 免费版非常慷慨，个人博客完全够用：

资源 免费额度
每月构建次数 500 次（每天平均 16 次，完全够用）
自定义域名数量 最多 100 个
单个文件大小限制 25 MB
静态文件请求 无限
全球 CDN 流量 无限
SSL 证书 自动免费提供

💡 关于你之前的自动化需求

你提到想用笔记软件写 MD 文件，然后自动同步。用这套方案的话：

  • 如果你用 Obsidian：可以把 my-blog/source/_posts/ 文件夹添加到 Obsidian 的仓库中，直接在 Obsidian 里写，保存后手动 git push（或配合 Obsidian Git 插件自动推送）
  • 如果你用 Typora 或其他编辑器：直接在 _posts 文件夹里编辑 .md 文件，然后用 Git 推送即可

推送后 Cloudflare 会自动构建，完全不用操心。

📋 总结

步骤 做什么 频率
环境准备 装 Node.js、Git、Hexo 一次
写文章 hexo new + 编辑 Markdown 每次写新文章
本地预览（可选） hexo s 每次写完后确认
推送 git push 每次写完文章后
自动部署 Cloudflare 自动完成 自动

需要我详细展开某个步骤吗？比如怎么选 Hexo 主题、或者怎么用 Obsidian Git 插件实现自动推送？