写在前面:过去几年,我的内容散落在微信公众号、GitHub Pages、零散的Markdown文件里。终于在这个五一假期,我把这些内容整合到了一起,搭建起一个真正属于自己的个人网站 —— shidonghua.9631369.xyz

这篇文章,把整个过程提炼成一份可复现的最佳实践。


🎯 为什么要做个人网站?

在开始讲技术之前,先说说为什么要花时间做这件事:

内容所有权 —— 微信公众号的文章是平台的,不是你的。哪天账号封了,内容就没了。个人网站的内容,100% 属于你。

统一展示 —— 技术文章在GitHub,生活随笔在公众号,照片在朋友圈… 别人想了解你,需要跑好几个地方。个人网站就是你的”数字客厅”。

SEO 流量 —— 微信公众号是封闭生态,搜索引擎搜不到。个人网站可以被Google、百度索引,被动带来流量。

技术练手 —— 整个过程涉及Openclaw任务执行、域名申请、DNS、静态站点生成,是很好的全栈实践。


🛠 技术选型:为什么是这套组合?

组件 选择 理由
静态站点框架 Hexo Node.js生态,中文社区成熟,Butterfly主题颜值在线
代码托管 GitHub 全球最大代码托管平台,免费私有仓库
静态托管 Cloudflare Pages 支持私有仓库部署,全球边缘节点,国内访问快
域名注册 Spaceship 数字域名便宜,续费价格透明
DNS/CDN Cloudflare 免费CDN加速,HTTPS自动配置,与Pages无缝集成

这套组合的核心优势:几乎零成本,全自动化,维护成本极低


📝 第一步:用 Hexo 搭建内容框架

为什么选 Hexo 而不是 Hugo/VitePress?

实话实说,三个我都试过:

  • Hugo 最快,但Go生态的主题对中文SEO支持一般
  • VitePress 适合文档站,博客功能偏弱
  • Hexo 中文社区最成熟,hexo-theme-butterfly 这个主题几乎满足了个人博客的所有需求

初始化项目

1
2
3
4
5
6
7
8
9
10
# 全局安装
npm install -g hexo-cli

# 初始化博客
hexo init blog
cd blog
npm install

# 安装 Butterfly 主题(强烈推荐)
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

关键配置

修改 _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 站点信息
title: 石头记
subtitle: '魔都生活记录'
description: 分享工作与生活中的思考
author: 老实
language: zh-CN
timezone: Asia/Shanghai

# 【重要】后面绑域名要用
url: https://shidonghua.9631369.xyz
root: /

# 主题
theme: butterfly

迁移内容

这是最耗时的一步。我的内容来源:

  1. 微信公众号文章 —— 没有找到从微信公众号批量导出Markdown的工具,尝试用爬虫获取Html内容,但是格式会乱特别是包含”代码”部分时;最终采用mdnice上留存的Markdown源文件作为数据源。让openclaw写一个脚本批量导出即可
  2. GitHub Pages —— Markdown格式历史个人博客,让OpenClaw写一个脚本批量导出自己github仓库中的原博客源文件

💡 踩坑提醒:Hexo的文章需要统一的YAML front matter格式。写个Python脚本批量处理,比手动改快10倍。


🌐 第二步:在 Spaceship 申请数字域名

为什么选 .xyz 域名?

.com 太贵,好域名基本被抢光了。.xyz 便宜、好记,而且 Google 对它的权重和 .com 没有区别。

我选的是 9631369.xyz 这个数字域名 —— 数字域名的好处是不容易拼错,而且有种”极客”的感觉。

Spaceship 注册流程

  1. 打开 spaceship.com
  2. 搜索你想要的数字域名
  3. .xyz 首年通常只要 $1-$2,比一杯奶茶还便宜
  4. 支持支付宝/信用卡付款

我的选择:主域名 9631369.xyz,博客用子域名 shidonghua.9631369.xyz或者blog.9631369.xyz。以后还可以加 it-tools.cv. 等子域名。


☁️ 第三步:Cloudflare 配置全攻略

这是整个流程中最关键的一步,也是最容易踩坑的地方。

为什么一定要用 Cloudflare?

  • 免费CDN —— GitHub Pages在国内访问很慢,Cloudflare可以加速
  • 免费HTTPS —— 自动签发证书,不用自己折腾Let’s Encrypt
  • DDoS防护 —— 虽然个人网站没人打,但有总比没有好
  • DNS管理 —— 界面比域名商好用10倍

Step 1:添加站点到 Cloudflare

  1. 注册 Cloudflare 账号
  2. 点击 “Add Site”,输入你的域名 9631369.xyz
  3. 选择免费套餐(Free Plan)
  4. Cloudflare 会扫描现有DNS记录,确认后继续

Step 2:修改域名商的 Nameserver

Spaceship 后台 → 域名管理 → Nameservers,改成 Cloudflare 给你的两个地址:

1
2
xxx.ns.cloudflare.com
yyy.ns.cloudflare.com

注意:DNS生效可能需要几分钟到几小时。去喝杯茶再回来。

Step 3:DNS 记录说明

划重点:因为我们后面会用 Cloudflare Pages 部署,而不是 GitHub Pages,所以这一步不需要手动配置任何 DNS 记录

💡 Cloudflare Pages 优势

  • 后面在 Cloudflare Pages 中绑定自定义域名时,Cloudflare 会自动配置 DNS
  • 不需要手动添加 CNAME 指向 github.io
  • Cloudflare Pages 直接从 GitHub 拉取代码构建,不走 GitHub Pages 服务
  • 橙色云朵代理模式自动开启,CDN 全球加速默认生效

这一步只需要确认 Cloudflare 已经成功接管了你的域名 DNS 即可,具体的 DNS 记录会在后面部署 Pages 时自动创建。

Step 4:SSL/TLS 配置

不需要特殊配置!

当你在 Cloudflare Pages 绑定自定义域名后,系统会自动:

  • 自动将 SSL/TLS 加密模式设为 “完整”(Full)
  • 自动签发免费 SSL 证书
  • 自动开启 “Always Use HTTPS”(HTTP 自动跳转到 HTTPS)

整个过程完全自动化,不需要手动去 SSL/TLS 页面调整任何设置。

💡 说明:因为 Cloudflare Pages 运行在 Cloudflare 基础设施上,源站本身就是安全的,所以系统自动选择的”完整”加密模式已经是最佳配置,无需手动干预。


🚀 第四步:Cloudflare Pages 自动部署

为什么选择 Cloudflare Pages 而不是 GitHub Pages?

这是我这次实践中最重要的一个决策:

  • 支持私有仓库 —— GitHub Pages 要求仓库必须公开,Cloudflare Pages 可以直接部署私有仓库
  • 构建在 Cloudflare 边缘 —— 比 GitHub Pages 国内访问快很多
  • 自动集成 CDN —— 不用额外配置,部署完自动走 Cloudflare 全球节点
  • 预览部署 —— 每个 PR 都会生成一个预览链接,方便审稿

连接 GitHub 仓库到 Cloudflare Pages

  1. Cloudflare 后台 → 左侧菜单 Workers 和 Pages → 点击 “Create application”
  2. 选择 Pages 标签 → “Connect to Git”
  3. 授权 Cloudflare 访问你的 GitHub 账号
  4. 选择你的 blog 仓库(可以是私有仓库!)
  5. 点击 “Begin setup”

配置构建设置

关键配置项:

配置项 说明
Project name shidonghua-blog 会生成 shidonghua-blog.pages.dev 子域名
Production branch main 你的主分支
Framework preset Hexo Cloudflare 自动识别并填充构建命令
Build command npm run build Hexo 构建命令
Build output directory public Hexo 构建输出目录

环境变量配置

如果你的 Hexo 项目需要特殊环境变量,在 “Environment variables” 中添加:

  • NODE_VERSION: 20 (指定 Node.js 版本)

💡 注意:Cloudflare Pages 的构建环境已经预装了大多数常用工具,一般不需要额外配置。

触发部署

配置完成后,点击 “Save and Deploy”。

以后每次 git pushmain 分支,Cloudflare 会自动:

  1. 拉取最新代码
  2. 安装 npm 依赖
  3. 运行 npm run build 构建静态文件
  4. 部署到 Cloudflare 全球边缘节点
  5. 网站自动更新 ✨

整个过程通常只需要 1-2 分钟,比 GitHub Actions 快不少。


🔗 第五步:Cloudflare Pages 自定义域名配置

绑定自定义域名

Cloudflare Pages 部署完成后,会自动分配一个 *.pages.dev 的子域名。但我们要用自己的域名:

  1. Cloudflare 后台 → Workers 和 Pages → 你的项目 → 自定义域 标签
  2. 点击 “设置自定义域”
  3. 输入 shidonghua.9631369.xyz
  4. Cloudflare 会自动检测并配置 DNS 记录
  5. 点击 “激活域”

💡 便捷之处:因为域名已经在 Cloudflare 管理 DNS,所以不需要手动添加 CNAME 记录,Cloudflare 会自动帮你配置好。

验证 HTTPS

绑定自定义域名后,Cloudflare 会自动签发 SSL 证书:

  • 证书签发通常需要几分钟
  • 签发完成后,https://shidonghua.9631369.xyz 就可以正常访问了
  • 会自动开启 “Always Use HTTPS”,HTTP 请求自动跳转到 HTTPS

验证部署

配置完成后,用这个命令检查 DNS:

1
dig shidonghua.9631369.xyz +short

如果看到 Cloudflare 的 IP 地址,说明配置生效了。


🎉 成果展示:我的新网站

经过这一系列操作,https://shidonghua.9631369.xyz 这个网站正式上线了!

网站亮点

  • 代码私有 —— Cloudflare Pages 支持私有仓库部署,草稿和配置不暴露
  • 响应式设计 —— 手机、平板、电脑都能完美适配
  • 暗色模式 —— 熬夜刷文章不伤眼
  • 搜索功能 —— 几十篇文章秒搜
  • 全球加速 —— Cloudflare 边缘节点,国内外访问都快

维护成本

现在更新文章只需要三步:

1
2
3
4
5
6
7
8
9
# 1. 写文章
hexo new post "我的新文章"

# 2. 提交代码
git add .
git commit -m "post: 新文章"

# 3. 推送
git push

然后 GitHub Actions 会自动搞定剩下的一切。真正的 “一次配置,终身受益”。


⚠️ 踩坑总结:这些坑我替你踩过了

坑1:域名续费陷阱

问题:很多域名商首年很便宜,第二年续费价格翻倍甚至翻十倍
解决:购买前一定要看清楚续费价格!我通过 Spaceship 购买的数字域名 9631369.xyz,首年和续费都是 ¥5.96/年,价格透明可控。不要贪图某些域名商首年 ¥1 的超低价优惠,第二年续费可能涨到 ¥100+,想转出还要收高额费用。

坑2:内容格式转换是最大的工作量

问题:OpenClaw 批量导出、转换 Markdown 文件是强项,但如果是从网页爬虫方式导出,格式会乱得一塌糊涂
解决一定要保留原始 Markdown 源文件! 比如在 mdnice、GitHub 代码仓库中保存原稿。从公众号网页爬取的文章,代码块、图片、链接都需要大量人工二次处理。保存源文件,节省 80% 的工作量。

坑3:Hexo i18n 国际化是个大坑

问题:OpenClaw 借助百度翻译 API 自动批量翻译英文文章是可行的,但 Hexo 的 i18n 国际化支持非常糟糕
具体表现:中英文页面的导航链接、分类链接、标签链接会反复横跳,从中文页点过去变成英文,从英文页点回来又不对。各种 Hexo 国际化插件都试了,问题依然存在。
最终决策放弃支持英文网站。个人博客先把中文内容做好,比追求双语但体验一团糟要强。等以后 Hexo 生态成熟了,或者换用更好的框架,再考虑国际化。

坑4:GitHub Pages 强制公开仓库

问题:GitHub Pages 要部署网站,必须把仓库设为 Public。这意味着你的所有草稿、未发布的文章、配置文件都暴露在公开互联网上
解决:改用 Cloudflare Pages!这是我这次最大的收获 —— Cloudflare Pages 完美支持部署 GitHub 私有仓库,不用公开任何代码。对于个人博客来说,这一点太重要了。


💰 成本核算:到底花了多少钱?

很多人以为建网站很贵,其实这套方案几乎不花钱:

项目 费用 备注
.xyz 数字域名 ¥5.96/年 Spaceship,首年续费同价
GitHub 私有仓库 ¥0 免费额度完全够用
Cloudflare Pages ¥0 免费套餐,无限带宽
Cloudflare DNS/CDN ¥0 免费
Hexo 主题 ¥0 开源免费
每年总计 ¥5.96 还不到一瓶矿泉水

也就是说,每天不到2分钱(5.96 ÷ 365 ≈ 0.016),你就可以拥有一个完全属于自己的个人网站,而且代码仓库可以保持私有,不用暴露在公开互联网上。


📈 下一步优化方向

网站上线只是开始,后面还有很多可以优化的地方:

  1. SEO 优化 —— 提交sitemap到Google Search Console、百度站长平台
  2. 评论系统 —— 接入Twikoo,自托管轻量级评论系统(支持私有仓库)
  3. 数据分析 —— 接入 Umami 或 Plausible 等轻量级统计工具(比 Google Analytics 隐私友好)
  4. 内容同步 —— 用 OpenClaw 写个脚本,自动把新文章同步到微信公众号、知乎、掘金等平台
  5. 订阅功能 —— 接入 RSS、邮件订阅,让读者能第一时间收到更新
  6. 主题定制 —— 深度定制 Butterfly 主题,做出更有个人风格的网站

🎯 写在最后:为什么我建议每个技术人都要有个人网站

在这个AI生成内容泛滥的时代,一个用心维护的个人网站,就是你最好的名片

面试官看你的GitHub,顺便点开你的个人网站 —— 他看到的不只是代码,还有你的思考、你的品味、你对技术的热爱。

读者通过搜索引擎找到你的文章 —— 他记住的不是某个平台的账号,而是你的名字。

10年后,微信公众号可能不在了,知乎可能被收购了,但你的个人网站,只要你还在续费,它就永远在那里。

技术人的浪漫,大概就是用代码给自己建一座数字纪念碑吧。


🔗 我的个人网站https://shidonghua.9631369.xyz


*觉得有用?点赞、在看、转发三连,让更多人