乐于分享
好东西不私藏

使用openclaw整合已有的个人博客网站

使用openclaw整合已有的个人博客网站

写在前面:过去几年,我的内容散落在微信公众号、GitHub Pages、零散的Markdown文件里。终于在这个五一假期,我把这些内容整合到了一起,搭建起一个真正属于自己的个人网站 —— shidonghua.9361369.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 这个主题几乎满足了个人博客的所有需求

初始化项目

# 全局安装
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

# 站点信息
title:石头记
subtitle:'魔都生活记录'
description:分享工作与生活中的思考
author:老实
language:zh-CN
timezone:Asia/Shanghai

# 【重要】后面绑域名要用
url:https://shidonghua.9361369.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 没有区别。

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

Spaceship 注册流程

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

✅ 我的选择:主域名 9361369.xyz,博客用子域名 shidonghua.9361369.xyz或者blog.9361369.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”,输入你的域名 9361369.xyz
  3. 选择免费套餐(Free Plan)
  4. Cloudflare 会扫描现有DNS记录,确认后继续

Step 2:修改域名商的 Nameserver

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

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
blog
会生成 blog-xxx.pages.dev子域名
Production branch
main
你的主分支
Framework preset
Hexo
Cloudflare 自动识别并填充构建命令
Build command
npm run build
Hexo 构建命令
Build output directory
public
Hexo 构建输出目录

环境变量配置

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

  • NODE_VERSION20 (指定 Node.js 版本)

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

触发部署

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

以后每次 git push 到 main 分支,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.9361369.xyz
  4. Cloudflare 会自动检测并配置 DNS 记录
  5. 点击 “激活域”

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

验证 HTTPS

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

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

验证部署

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

dig shidonghua.9361369.xyz +short

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


🎉 成果展示:我的新网站

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

网站亮点

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

维护成本

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

# 1. 写文章
hexo new post "我的新文章"

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

# 3. 推送
git push

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


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

坑1:域名续费陷阱

问题:很多域名商首年很便宜,第二年续费价格翻倍甚至翻十倍
解决:购买前一定要看清楚续费价格!我通过 Spaceship 购买的数字域名 9361369.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. 评论系统 —— 增加评论系统和互动
  3. 数据分析 —— 接入 Umami 或 Plausible 等轻量级统计工具(比 Google Analytics 隐私友好)
  4. 内容同步 —— 用 OpenClaw 写个脚本,自动把新文章同步到微信公众号、知乎、掘金等平台
  5. 订阅功能 —— 接入 RSS、邮件订阅,让读者能第一时间收到更新
  6. 主题定制 —— 深度定制 Butterfly 主题,做出更有个人风格的网站

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

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

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

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

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

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


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


觉得有用?点赞、在看、转发三连,让更多人看到这篇实战指南!