折腾代码,也记录生活

作者在折腾无服务器博客过程中,最初选择了基于 Vue 的 Valaxy,但逐渐发现需要更复杂的结构来满足不断增加的文章数量和发布流程。最终,作者决定使用 Cloudflare Worker、D1 和 Backblaze B2 等免费服务来构建一个动态博客,实现直接后台发布文章和 SEO 处理。经过多次折腾和测试,作者成功地创建了一个不依赖服务器的博客,主要依靠 Cloudflare 的服务。

从 Markdown 静态文章,到 Cloudflare Worker + D1 + B2 的无服务器博客

折腾这个博客其实一开始没有想那么复杂。

最开始只是想搭一个自己的博客,记录一些学习过程。

选了 Valaxy,因为它基于 Vue,写文章就是 Markdown,用起来比较舒服。

刚开始的结构很简单:

Valaxy
+
Markdown
+
Vercel 部署

写一篇文章:

修改 .md 文件。

然后:

npm run build

↓

部署

↓

网站更新

对于刚开始写博客来说,这完全够用。


为什么想改造成动态博客?

但是慢慢发现一个问题:

文章越来越多以后,每次修改一点东西,都需要重新构建整个网站。

虽然构建速度还可以,但是这种方式总感觉不像一个真正的博客系统。

我开始想:

能不能像 WordPress 那样,直接后台发布文章?

但是又不想引入完整 CMS。


为什么不用传统博客系统?

其实 WordPress 很成熟。

但是对于个人博客来说:

  • 需要数据库
  • 需要服务器
  • 需要维护
  • 还需要处理各种插件问题

感觉为了写文章,增加了一堆额外工作。

所以最后决定:

继续使用 Valaxy 的前端体验,但是把内容管理独立出来。


我的方案

最后做成了现在这个结构:

用户

↓

Cloudflare

↓

Worker

↓

D1 数据库

↓

Backblaze B2

前端还是:

Valaxy + Vue

Cloudflare Worker 负责

  • API
  • 文章读取
  • 图片上传
  • SEO 处理

D1 保存

  • 文章信息
  • 发布时间
  • slug 等数据

Backblaze B2 保存

  • Markdown 文件
  • 图片资源

文章发布流程

现在发布文章大概变成:

后台输入文章

↓

调用 Worker API

↓

Markdown 保存

↓

图片上传 B2

↓

D1 写入数据

↓

前端读取显示

不用重新 build。

文章发布后可以直接访问。

这也是我最想实现的效果。


SPA 最大的问题:SEO

但是改成动态博客后,又遇到了另一个问题。

Valaxy 本质还是 SPA。

浏览器访问:

可以正常运行。

因为 Vue 会执行 JavaScript。

但是搜索引擎爬虫访问:

可能只看到:

<div id="app"></div>

里面什么都没有。

这对于博客来说很麻烦。

毕竟博客最重要的就是搜索流量。


给 SPA 加 SEO

所以我又给 Worker 加了一层处理。

访问文章:

/posts/xxx

Worker 会判断:

是不是搜索引擎爬虫。

如果是:

返回包含文章内容的 HTML。

里面提前放好:

  • title
  • description
  • h1
  • canonical
  • JSON-LD

普通用户访问:

还是正常 SPA。

这样:

用户体验不变。

搜索引擎也能读取内容。


搜索引擎测试

优化之前:

Bing 检测:

缺少 title

缺少 Meta Description

缺少 h1

后来增加静态 SEO 注入。

结果:

✅ 可以编制索引

✅ SEO/GEO 问题 0

Google:

✅ sitemap 正常

✅ Article 结构化数据通过

✅ 页面成功收录

另外加了一些东西

除了基本 SEO,还加了:

sitemap

动态生成:

/sitemap.xml

让搜索引擎知道有哪些文章。


robots.txt

告诉爬虫:

哪些地方可以访问。


llms.txt

这个算是比较新的东西。

主要是方便 AI 搜索工具理解网站内容。

现在 AI 搜索越来越多,所以提前准备一下。


现在这个博客是什么样?

目前它已经不是单纯的静态博客。

更像:

Valaxy
负责页面

↓

Worker
负责逻辑

↓

D1
负责数据

↓

B2
负责文件

↓

搜索引擎
负责带来流量

没有购买服务器。

没有传统后端。

主要依靠 Cloudflare 的免费服务。


折腾过程中遇到的问题

当然过程也没有那么顺利。

期间遇到过:

  • Worker 路由问题
  • Vercel 构建冲突
  • SPA fallback 问题
  • SEO 页面抓不到内容
  • Bing 不识别标题

很多时候不是不会写代码,而是不知道问题在哪里。

一步一步测试:

  1. 看日志
  2. 改代码
  3. 重新部署
  4. 慢慢解决

最后

这个博客没有什么特别厉害的技术。

只是把一些免费的服务组合起来:

  • Valaxy
  • Cloudflare Worker
  • D1
  • Backblaze B2

然后慢慢改成自己想要的样子。

对我来说,博客最大的意义不是访问量。

而是记录自己从不会,到慢慢搞懂的过程。

这就是这个博客诞生的原因。