前言
最近为自己从零搭建了一个个人博客，技术选型上尝试了 Astro + Cloudflare Pages 的组合。整个体验出乎意料地流畅，从开发到部署一气呵成。这里记录下架构思路和实现细节，希望能为同样有搭建需求的朋友提供一些参考。

技术栈

  • Astro：以内容为核心的现代网站框架，默认生成纯静态站点，也可以通过适配器开启 SSR，非常适合博客、文档等内容型网站。

  • Cloudflare Pages：部署在 Cloudflare 全球网络边缘，提供极快的访问速度和免费额度，个人项目基本零成本。

  • D1 数据库：Cloudflare 推出的无服务器 SQLite 兼容数据库，完美配合 Workers/Pages，读写延迟极低。

  • Cloudflare Workers：在边缘执行服务端逻辑，无需管理服务器，按请求计费。


    • 为什么这样选？Astro 对 Markdown 的一流支持让写作体验极佳，而 Cloudflare 的边缘生态把动态功能（认证、数据库）都搬到了离用户最近的地方，静态资源和动态接口都足够快。

    核心功能
  • SSR 动态渲染

    • Astro 创建的站点默认是预渲染的静态 HTML，想要实现登录、实时配置等功能就需要动态服务端渲染。通过安装 @astrojs/cloudflare 适配器并配置为 SSR 模式，所有页面都可以在请求时生成，从而支持：

  • 基于 JWT 的用户登录与权限校验

  • 文章在线发布、编辑和删除（管理后台）

  • 站点标题、头像、主题色等配置实时生效，无需重新构建


  • 数据库设计

    • 使用 D1 作为数据层，表结构清晰，覆盖博客的全部核心数据：

  • posts：文章表，存储标题、摘要、正文、作者、状态、发布时间等

  • users：管理员用户表，用于管理后台登录

  • categories：文章分类，支持创建、排序和绑定文章

  • treehole_messages：匿名留言板（树洞），访客可互动

  • site_config：站点全局配置，以键值对形式存储，方便扩展


    • 所有操作通过 Workers 内嵌入的 D1 客户端完成，不需要额外的数据库连接池，性能开销极低。

  • UI 设计

    • 整体视觉采用深色背景打底，搭配半透明磨砂材质（glassmorphism）和柔和阴影，营造现代科技感：

  • 磨砂玻璃顶栏，随滚动模糊背景

  • 卡片式文章列表，悬停有轻微位移和阴影加深效果

  • 完全适配移动端、平板和桌面，导航自动折叠为汉堡菜单

  • 暗色模式下文字对比度经过调整，长时间阅读不刺眼


    • 后台功能
    博客内置轻量管理面板，访问 /admin 并登录后即可管理所有内容：

  • 仪表盘：查看文章总数、分类数、最新留言等概览

  • 文章管理：支持富文本编辑、草稿/发布状态切换、删除确认

  • 分类管理：新建分类、修改名称、调整顺序

  • 用户管理：修改管理员密码、是否允许多人协作

  • 站点设置：实时修改站点名称、头像、背景图、社交媒体链接、页脚信息等


    • 部署流程
    集成 Cloudflare Pages 的部署非常简单。安装依赖并构建之后，一条命令即可上线：

    ``bash
    # 安装依赖
    npm install

    # 构建生产版本
    npm run build

    # 通过 Wrangler 将 dist 目录部署到 Cloudflare Pages
    npx wrangler pages deploy dist --project-name=astro-blog
    ``

    Pages 还支持连接到 GitHub 仓库，推送代码自动触发构建和部署，无需手动执行命令。自定义域名、HTTPS 证书也全部免费自动配置。

    性能优化
  • 边缘计算：所有请求都就近响应，国内访问相比传统 VPS 有明显提升

  • 静态资源缓存：JS、CSS、图片等文件通过 Cloudflare CDN 缓存，设置长过期时间

  • 无冷启动：Workers 常驻边缘节点，API 响应时间稳定在 20ms 以内

  • 按需渲染：文章页使用 SSR，博客首页和关于等静态内容按需开启预渲染，兼顾动态能力和加载速度



    • 总结
    这套方案兼顾了开发体验、运行性能和部署成本。Astro 让内容生产变得愉悦，Cloudflare Pages 提供了开箱即用的全球加速和零运维的数据库。如果你也计划搭建个人博客，又不想折腾服务器和繁琐的 CI/CD，非常推荐试一试这个组合。