从零开始：在 Cloudflare 上搭建一个全栈博客
摘要
本文分享在 Cloudflare 上搭建全栈博客的经验。利用 Workers、D1、R2 等免费服务构建架构，结合 React 和 Tailwind CSS。作者还自研了基于地理位置的访问分析面板及 UptimeFlare 监控工具。尽管文章不多，但拥有全球加速、零成本的稳定基础设施，为写作提供了坚实保障。
从零开始：在 Cloudflare 上搭建一个全栈博客#
当你在网上找到一个心仪的博客主题，Fork 下来，准备开始写作——却发现文章没写几篇，基础设施倒是越建越多。
这不是自嘲，这是真实写照。
为什么选 Cloudflare？#
很简单：免费额度够用，全家桶齐全。
Workers 每天 10 万次请求、D1 数据库 500 万行读写、R2 对象存储 10GB 免费空间、KV 键值存储——对一个个人博客来说，这些数字约等于"用不完"。
更关键的是，Cloudflare 全球有 300+ 边缘节点。你的文章不需要从某个遥远的机房传到读者眼前，而是从离读者最近的地方直接被访问——比绝大多数收费主机都要快。
技术栈一览#
博客基于 flare-stack-blog，架构大致是这样：
层级 | 技术 | 用途 |
|---|---|---|
前端 | React 19 + TanStack Router/Query TailwindCSS 4 React Hook Form + Zod Recharts | 页面渲染、路由 |
样式 | Tailwind CSS | UI 设计 |
后端 | Cloudflare Workers | 无服务器 API |
数据库 | D1 (SQLite) | 文章、用户、标签 |
存储 | R2 | 图片和媒体文件 |
缓存 | KV | 站点配置、会话 |
认证 | Arctic + GitHub OAuth | 管理员登录 |
部署 | GitHub Actions | CI/CD 自动部署 |
编辑器 | Tiptap 富文本 | 所见即所得写作 |
自建访问分析面板#
博客内置的分析只显示基本计数。想要看到访问者的国家分布、浏览器类型、设备比例——数据不够细。
"为什么不自己做一个？"
用 Hono + D1 + Chart.js 搭了一个独立的分析面板。核心逻辑不到 300 行：
前端埋点脚本通过
request.cfAPI 自动获取访问者国家/城市（不需要额外的 IP 数据库）D1 表记录每次页面浏览，用
bot_score字段过滤爬虫后端 API 按时间窗口聚合数据
前端用 Chart.js 渲染流量趋势折线图、地域柱状图、浏览器分布图
面板通过自定义域名独立部署，和博客本身完全解耦。
最大的收获：CF Workers 的 request.cf 对象自带地理位置信息——免费的！ 不用接任何第三方 IP 库。
服务监控：UptimeFlare#
博客断线了怎么办？总不能整天手动刷新。
UptimeFlare 是一个开源的 Cloudflare 服务监控工具，同样基于 Workers + D1。它在状态页上展示每个监控项的健康状况，检测到异常时通过 Webhook 发送通知。
数据存在 D1 里，界面是纯静态的 Pages 部署。零运营成本。
GitHub 链接#
Flare-Stack-blog：https://github.com/du2333/flare-stack-blog
UptimeFlare：https://github.com/lyc8503/UptimeFlare
监控面板（AI 制作):https://github.com/snsmacher/Seval-Panel
最后#
这篇文章本身是这个博客的前几篇内容。前面的时间全花在了建基础设施上——主题、分析、监控、部署流水线。
这可能有点滑稽：一个全栈博客，文章屈指可数，但架构却已经坚如磐石。
但换个角度看，当你写第一篇真正想表达的东西时，你知道它会被免费托管、全球边缘加速、实时监控，然后在一个好看的界面上被来自世界各地的读者阅读。
也算一种仪式感。