将现有网站部分改造为 CMS（Cloudflare Pages Functions + microCMS 应用笔记）

您好，我是Liberogic的CTO大冢。

要我再写点什么文章……这可真是难为我了。

因此，就“现有网站部分 CMS 化”这一主题，我打算留一份简单的技术笔记。

过去的常规做法是用 PHP 把“逻辑嵌入 HTML”，而现在借助 Cloudflare Pages 的 Functions，就能以更加简洁的方式搭建出既能被 Google 正确索引、又兼顾 SEO 的架构。

本文将介绍如何在由 Eleventy 构建的静态网站上，借助 Cloudflare Pages Functions 施加“后付式 SSR”，并集成 microCMS 的实践过程。

本次架构的要点

本次项目使用 Eleventy + Nunjucks 构建前端。与 Astro 那种将 Functions 内置于项目内部的方式不同，我们采用的是：对输出到 dist/ 的静态 HTML，之后再插入动态内容的方式。

用起来意外地顺手，很方便呢。

1. 仅在预览环境中启用 Basic 认证

需求是“预览环境中希望加入认证，但在正式环境中尽量减少不必要的 Worker 执行（成本）”。因此，我们在构建前处理中稍作调整，采用仅在正式构建时删除_middleware.js 的运营方式。

正式环境无需经过认证处理，因此在抑制多余运行成本的同时，兼顾了安全性与便利性。

2. 使用 Cache API 缓存 microCMS 的响应

采用 SSR（服务端渲染）时，难免会担心“每次请求都调用 API 所带来的负载与延迟”。

因此我们利用 Cloudflare 的 Cache API，将响应缓存在边缘节点。缓存 TTL 设置得较短，约为 5 至 10 分钟。

在保证内容新鲜度的同时，也充分确保了性能。

3. 使用 KV 进行缓存清除（revalidate）

尽管 TTL 较短，但“更新后无法立即生效”对运维方来说仍有些困扰。因此我们将 Cloudflare KV 用作 revalidate 的控制存储。

实现方式很简单。

• 在 microCMS 中更新文章时会触发 Webhook
• 在此时更新 KV 的值
• 在 Pages Functions 中，以 KV 的值为触发条件，判断是否需要使缓存失效

这样一来，就实现了“平时依靠缓存实现极速访问，更新时即时生效”的两全设计。

总结

这种“保留既有静态站点的优势，仅在必要之处在边缘进行加工”的方式，运维灵活性很高，我非常喜欢。

借助 Cloudflare 的强大能力，重现过去 PHP 那种轻松上手的便利！大刀阔斧地迁移框架固然不错，但这种“脚踏实地的改进”，其实在一线工作中最为实用。

那就先到这里。