这篇文章记录了我从零搭建这个博客的完整过程。不需要服务器、不需要备案，全程免费，最终效果是一个全球 CDN 加速的静态博客，推送代码就自动更新。

前置条件

以下工具需要提前准备好，不展开讲安装过程：

  • 科学上网工具 — 访问 GitHub 和 Cloudflare 需要
  • AI 编程助手（如 Claude Code）— 不是必需，但能大幅加快配置过程，尤其对不熟悉命令行的人
  • Node.js — 去 官网 下载 LTS 版本安装即可，安装时一路默认
  • Git — 去 官网 下载安装，安装时一路默认
  • GitHub 账号 — 去 github.com 注册
  • Cloudflare 账号 — 去 cloudflare.com 注册，可以直接用 GitHub 账号登录

一、初始化 Hexo 博客

打开终端（Windows 上搜索 PowerShell），执行：

1
2
3
npx hexo init my-blog
cd my-blog
npm install

这会创建一个名为 my-blog 的目录，里面就是博客的全部文件。

目录结构简介

1
2
3
4
5
6
7
8
my-blog/
├── _config.yml        # 站点主配置
├── package.json       # 依赖管理
├── scaffolds/         # 文章模板
├── source/            # 内容目录
│   ├── _posts/        # 文章放这里
│   └── about/         # 关于页面
└── themes/            # 主题目录

二、安装主题

Hexo 默认的 landscape 主题比较简陋，推荐换成 Butterfly，视觉效果好很多，支持封面图、卡片布局、深色模式等。

1
npm install hexo-theme-butterfly

三、配置站点

编辑根目录的 _config.yml，修改以下几项：

1
2
3
4
5
6
7
8
9
10
11
# 站点信息
title: 你的博客名称
author: 你的昵称
language: zh-CN
timezone: Asia/Shanghai

# URL（先随便填，部署后再改成真实地址）
url: https://example.com

# 主题
theme: butterfly

四、配置主题

在根目录创建 _config.butterfly.yml（不要去改 node_modules 里的文件），写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 菜单
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  关于: /about/ || fas fa-user

# 首页大图（换成你喜欢的图片链接）
index_img: https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80

# 文章默认封面
cover:
  index_enable: true
  default_cover:
    - https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80

# 文章目录
toc:
  post: true
  number: true

# 代码高亮
highlight_theme: mac light
highlight_copy: true

# 深色模式
darkmode:
  enable: true
  button: true

# 图片懒加载
lazyload:
  enable: true

# 侧边栏
aside:
  enable: true
  card_author:
    enable: true
    description: 一句话简介

封面图推荐去 Unsplash 找，免费且高质量。搜关键词后复制图片链接即可。

五、创建页面和文章

创建「关于」页面

1
npx hexo new page about

编辑 source/about/index.md，写上你的个人介绍。

创建第一篇文章

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

编辑 source/_posts/我的第一篇文章.md：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
title: 我的第一篇文章
date: 2026-08-16 10:00:00
tags:
  - 随笔
categories:
  - 思考
cover: https://images.unsplash.com/photo-1455390582262-044cdead277a?w=800&q=80
---

正文从这里开始，支持 Markdown 语法。

## 二级标题

**加粗**、*斜体*、`行内代码`都可以用。

代码块也支持：

​```python
print("Hello World")
​```

文章头部字段说明

字段 作用 示例
title 文章标题 我的第一篇文章
date 发布时间 2026-08-16 10:00:00
tags 标签（可多个） - Python - 教程
categories 分类（一般一个） - 技术
cover 封面图 URL Unsplash 图片链接

六、本地预览

1
npx hexo clean && npx hexo server

浏览器打开 http://localhost:4000 即可预览效果。确认满意后进入下一步。

七、推送到 GitHub

安装 GitHub CLI

1
winget install GitHub.cli

安装后重新打开一个终端窗口（否则找不到命令），然后登录：

1
gh auth login -h github.com -p https -w

它会给你一个 8 位代码，打开 https://github.com/login/device 输入代码完成授权。

初始化仓库并推送

1
2
3
4
5
cd my-blog
git init
git add -A
git commit -m "init: hexo blog with butterfly theme"
gh repo create my-blog --private --source=. --remote=origin --push

这一步完成后，你的代码就在 GitHub 上了。

配置 Git 凭据（如果 push 报错）

1
gh auth setup-git

然后再 git push 就不会报错了。

八、部署到 Cloudflare Pages

这是最关键的一步，让博客上线到互联网。

  1. 登录 Cloudflare Dashboard
  2. 左侧找到 Compute → Workers & Pages
  3. 找到页面底部 “Looking to deploy Pages? Get started”，点 Get started（注意不要走 Worker 流程）
  4. 选择 Import an existing Git repository → Get started
  5. 连接 GitHub，选择你的博客仓库
  6. 填写构建设置：
    • Project name：你想要的名字（会成为 名字.pages.dev 的网址）
    • Build command：npm run build
    • Build output directory：public
  7. 点 Save and Deploy

等待 1-2 分钟构建完成，你会得到一个 xxx.pages.dev 的网址，这就是你的博客地址。

更新站点 URL

拿到网址后，回来改 _config.yml 里的 url：

1
url: https://你的项目名.pages.dev

然后推送更新：

1
2
3
git add .
git commit -m "update site url"
git push

Cloudflare 会自动重新构建部署。

九、日常更新流程

以后写新文章只需要三步：

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

# 2. 编辑 source/_posts/ 下生成的 .md 文件

# 3. 推送上线
git add .
git commit -m "新增文章：文章标题"
git push

推送后 Cloudflare 自动构建，1-2 分钟后网站就更新了。你的电脑关机也不影响网站访问。

十、图片怎么办

在 source/images/ 目录下放图片，文章里用 /images/文件名.jpg 引用：

1
![图片描述](/images/my-photo.jpg)

也可以直接用外链图片（比如 Unsplash 的链接），不需要放本地。

git push 后图片会一起部署到 Cloudflare 的 CDN 上，全球都能访问。

十一、添加评论系统（Twikoo）

静态博客本身没有评论功能，但可以通过 Twikoo 实现类似 WordPress 的评论效果——访客不需要登录，填昵称和邮箱就能留言。

整体思路：Twikoo 需要一个后端服务来存储评论数据，我们用 MongoDB（免费数据库）+ Vercel（免费托管后端）来实现。

第一步：创建 MongoDB 数据库

  1. 注册 MongoDB Atlas（可用 Google 账号）
  2. 创建一个免费的 Shared Cluster
  3. 在 Database Access 中创建数据库用户（记住用户名和密码）
  4. 在 Network Access → IP Access List 中添加 0.0.0.0/0（允许所有 IP 访问）
  5. 在 Database → Connect → Drivers 中复制连接字符串，格式类似：
1
mongodb+srv://用户名:密码@cluster0.xxxxx.mongodb.net/twikoo

注意末尾加上 /twikoo 指定数据库名。

第二步：部署 Twikoo 后端到 Vercel

  1. 打开一键部署链接：
1
https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ftwikoojs%2Ftwikoo%2Ftree%2Fmain%2Fsrc%2Fserver%2Fvercel-min
  1. 用 GitHub 账号登录 Vercel（首次会自动注册）
  2. 仓库名填 twikoo，点 Create
  3. 部署完成后进入项目 Settings → Environment Variables
  4. 添加变量：
    • Key: MONGODB_URI
    • Value: 上面复制的 MongoDB 连接字符串
  5. 去 Deployments 页面，点最新部署右边的 … → Redeploy

部署完成后你会得到一个地址，类似 https://twikoo-xxx.vercel.app。

第三步：配置博客

在 _config.butterfly.yml 中添加：

1
2
3
4
5
6
7
8
9
10
11
comments:
  use: Twikoo
  text: true
  lazyload: true
  count: true

twikoo:
  envId: https://你的twikoo地址.vercel.app
  region:
  visitor: true
  option:

推送后文章底部就会出现评论框。

管理评论

打开任意文章的评论区，点击小齿轮图标，首次使用需要设置管理员密码。登录后可以：

  • 删除垃圾评论
  • 回复评论
  • 查看评论者邮箱和 IP
  • 设置敏感词过滤

架构总结

1
2
3
4
5
你的电脑 --git push--> GitHub --自动触发--> Cloudflare Pages
   ↑                    ↑                      ↑
 写文章              存代码                 托管网站
 本地预览            版本管理              全球 CDN
                   换电脑可 clone          24 小时在线

整个方案的好处：

  • 免费 — GitHub 和 Cloudflare Pages 的免费额度完全够用
  • 无需服务器 — 不用买云主机、不用备案
  • 全球加速 — Cloudflare CDN 节点遍布全球
  • 自动部署 — 推代码就上线，不需要手动操作
  • 换设备也能写 — 新电脑 git clone 拉代码，手机上可以直接在 GitHub 网页编辑

这就是这个博客的全部搭建过程。如果你也想试试，跟着走一遍就行。