跳到正文

博客 · Cloudflare

这个网站是怎么搭起来的

从 Astro 前端到 Hono 接口服务、D1 和 R2,整个网站都跑在 Cloudflare 上。

这个网站完全运行在 Cloudflare 上。下面简单介绍一下各个部分,以及为什么这样选。

整体结构

部分 作用
公开网站 Astro,在 Workers 上按需渲染,并在边缘节点缓存
接口服务 运行在 Workers 上的 Hono,是唯一读写数据库和文件存储的代码
数据库 D1(SQLite),存放文章、项目、标签和设置
文件 R2,存放图片、视频和演示文件
演示 一个独立的 Workers 服务,有自己的子域名,在沙盒化的内嵌框架中显示

内容就是数据

文章以 Markdown 格式存在数据库里,保存时就渲染成 HTML。页面只需要取回现成的 HTML,所以加载很快。

// 公开网站通过服务绑定调用接口,不经过网络。
const res = await api.entries[':type'][':slug'].$get({
  param: { type: 'post', slug },
  query: { locale },
});

从第一天起就是双语

英文版在根路径,中文版在 /zh/ 下。每篇文章每种语言各有一行数据;每个页面只显示一种语言:如果某个页面还没有中文翻译,中文链接会直接带你去英文页面。

演示待在沙盒里

演示运行在另一个域名下的沙盒化内嵌框架中,它们的代码无法接触到主站。下面就是一个正在运行的演示:

演示 · 流场全屏打开 ↗

推荐