使用openclaw整合已有的个人博客网站
写在前面:过去几年,我的内容散落在微信公众号、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 | # 全局安装 |
关键配置
修改 _config.yml:
1 | # 站点信息 |
迁移内容
这是最耗时的一步。我的内容来源:
- 微信公众号文章 —— 没有找到从微信公众号批量导出Markdown的工具,尝试用爬虫获取Html内容,但是格式会乱特别是包含”代码”部分时;最终采用
mdnice上留存的Markdown源文件作为数据源。让openclaw写一个脚本批量导出即可 - GitHub Pages —— Markdown格式历史个人博客,让OpenClaw写一个脚本批量导出自己github仓库中的原博客源文件
💡 踩坑提醒:Hexo的文章需要统一的YAML front matter格式。写个Python脚本批量处理,比手动改快10倍。
🌐 第二步:在 Spaceship 申请数字域名
为什么选 .xyz 域名?
.com 太贵,好域名基本被抢光了。.xyz 便宜、好记,而且 Google 对它的权重和 .com 没有区别。
我选的是 9631369.xyz 这个数字域名 —— 数字域名的好处是不容易拼错,而且有种”极客”的感觉。
Spaceship 注册流程
- 打开 spaceship.com
- 搜索你想要的数字域名
- .xyz 首年通常只要 $1-$2,比一杯奶茶还便宜
- 支持支付宝/信用卡付款
✅ 我的选择:主域名
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
- 注册 Cloudflare 账号
- 点击 “Add Site”,输入你的域名
9631369.xyz - 选择免费套餐(Free Plan)
- Cloudflare 会扫描现有DNS记录,确认后继续
Step 2:修改域名商的 Nameserver
Spaceship 后台 → 域名管理 → Nameservers,改成 Cloudflare 给你的两个地址:
1 | xxx.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
- Cloudflare 后台 → 左侧菜单 Workers 和 Pages → 点击 “Create application”
- 选择 Pages 标签 → “Connect to Git”
- 授权 Cloudflare 访问你的 GitHub 账号
- 选择你的
blog仓库(可以是私有仓库!) - 点击 “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 push 到 main 分支,Cloudflare 会自动:
- 拉取最新代码
- 安装 npm 依赖
- 运行
npm run build构建静态文件 - 部署到 Cloudflare 全球边缘节点
- 网站自动更新 ✨
整个过程通常只需要 1-2 分钟,比 GitHub Actions 快不少。
🔗 第五步:Cloudflare Pages 自定义域名配置
绑定自定义域名
Cloudflare Pages 部署完成后,会自动分配一个 *.pages.dev 的子域名。但我们要用自己的域名:
- Cloudflare 后台 → Workers 和 Pages → 你的项目 → 自定义域 标签
- 点击 “设置自定义域”
- 输入
shidonghua.9631369.xyz - Cloudflare 会自动检测并配置 DNS 记录
- 点击 “激活域”
💡 便捷之处:因为域名已经在 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 | # 1. 写文章 |
然后 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),你就可以拥有一个完全属于自己的个人网站,而且代码仓库可以保持私有,不用暴露在公开互联网上。
📈 下一步优化方向
网站上线只是开始,后面还有很多可以优化的地方:
- SEO 优化 —— 提交sitemap到Google Search Console、百度站长平台
- 评论系统 —— 接入Twikoo,自托管轻量级评论系统(支持私有仓库)
- 数据分析 —— 接入 Umami 或 Plausible 等轻量级统计工具(比 Google Analytics 隐私友好)
- 内容同步 —— 用 OpenClaw 写个脚本,自动把新文章同步到微信公众号、知乎、掘金等平台
- 订阅功能 —— 接入 RSS、邮件订阅,让读者能第一时间收到更新
- 主题定制 —— 深度定制 Butterfly 主题,做出更有个人风格的网站
🎯 写在最后:为什么我建议每个技术人都要有个人网站
在这个AI生成内容泛滥的时代,一个用心维护的个人网站,就是你最好的名片。
面试官看你的GitHub,顺便点开你的个人网站 —— 他看到的不只是代码,还有你的思考、你的品味、你对技术的热爱。
读者通过搜索引擎找到你的文章 —— 他记住的不是某个平台的账号,而是你的名字。
10年后,微信公众号可能不在了,知乎可能被收购了,但你的个人网站,只要你还在续费,它就永远在那里。
技术人的浪漫,大概就是用代码给自己建一座数字纪念碑吧。
🔗 我的个人网站:https://shidonghua.9631369.xyz
*觉得有用?点赞、在看、转发三连,让更多人