项目定位与架构演进#

s1oop-cloudflare-blog 是一套部署在 Cloudflare 全球边缘网络上的极简主义人文博客系统。

项目旨在探索**“纯静态轻量外壳＋边缘无服务器数据库（Cloudflare D1）纳秒级响应＋人文级纸质书排版质感”**的极限性能平衡。整个系统脱离传统重型 VPS 虚拟机的运维负担，无需任何外部关系型数据库或独立对象存储桶，直接以全球分布式的 Serverless 形态交付。

[用户全球就近访问] ➔ Cloudflare CDN 边缘节点
                          ⬇
[Astro 6 静态 Shell] ➔ 极速直出骨架
                          ⬇ (客户端水合流)
[Cloudflare Pages Functions (Edge API)] ➔ 查询 Cloudflare D1
                          ⬇
[In-D1 资产模型] ➔ 从 blob 二进制表原子直出文章配图 (免 R2 / S3)

In-D1 资产原子存储机制（免 R2 存储桶）#

在传统的博客架构中，文章配图通常上传至独立的对象存储（如 AWS S3、Cloudflare R2 或七牛云），由此带来跨服务权限鉴权复杂、图片删除后残留孤儿资产、发布文章与图片上传无法保证原子性等顽疾。

本项目开创性地设计了 In-D1 资产存储模型：

二进制 BLOB 原生关系存储：在 D1 SQLite 数据库中创建 blog_assets 关联表，将文章配图作为 BLOB 二进制数据直接落库；
单事务原子交付：文章内容与所有配图在单次 D1 SQL 事务中原子提交或回滚，发布失败则图片绝不残留；
边缘即时流式分发：边缘函数拦截 /api/assets/:id 请求，直接读取 D1 BLOB 并附带 Cache-Control: public, max-age=31536000, immutable 响应头，由 Cloudflare 边缘缓存节点全球秒级分发，彻底砍掉了 R2 存储桶与额外计费项。

Zero-CLS 骨架流渲染#

针对异步获取动态博文列表时的“布局抖动（Cumulative Layout Shift）”痛点，首页文章列表设计了专属的 Zero-CLS 骨架流占位体系：

原生 CSS 预设高度与排版占位：在 D1 数据到达前，首屏以精准的占位块提前锁定页面几何布局；
平滑无感过渡：数据渲染完成瞬间，文字与图片无缝填充，CLS 评分严格锁定为 0.00，带来如同阅读纸质书般的沉浸稳定感。

多衬线人文排印体系#

排版系统融合了西方经典印刷美学与现代屏幕显示技术：

西文字体：精选 Newsreader 与 Cormorant Garamond 衬线字族，呈现典雅的文学质感；
中文字体：选用思源宋体（Source Han Serif），优化中西文混排间隙与标点避头尾；
阅读微调：行高严格约束在 1.75 ~ 1.85 之间，字距适度微调，打造远离信息焦虑的深阅读体验。