EdgeOne 边缘函数 + Hono.js + Fauna 搭建个人博客

一、背景

虽然 “博客” 已经是很多很多年前流行的东西了，但是时至今日，仍然有一部分人在维护自己的博客站点，输出不少高质量的文章。

我使用过几种博客托管平台或静态博客生成框架，前段时间使用Hono.js+Fauna ，基于 EO 边缘函数搭建了一个博客网站样例，写一篇小小文章进行记录。

二、技术栈

2.1 Hono.js

Hono.js 是一个轻量、快速的 Edge Web 框架，适用于多种 JavaScript 运行时：Cloudflare Workers、Fastly Compute、Deno、Bun、Vercel、Netlify、AWS Lambda 等，同样也可以在 EO 边缘函数 Runtime 中运行起来。

在 EO 边缘函数中，最简单的 Hono 应用写法如下:

import { Hono } from 'hono'
const app = new Hono()app.get('/', (c) => c.text('Hono!'))app.fire();

2.2 Fauna

Fauna 作为 Cloud API 提供的分布式文档关系数据库。Fauna 使用 FQL 进行数据库查询（FQL: A relational database language with the flexibility of documents）。

因此，我准备将博客文章存放在 Fauna 中，在 Fauna JS Driver 的基础上，包装 RESTful API 供边缘函数调用。

注意:
- 目前 EO 边缘函数还不能完全支持 Fauna JS Driver，因此现阶段还不能直接使用 JS Driver 进行数据查询，需要将 Fauna API 服务搭建在其他 JS 环境中。
- EO 边缘函数后续将支持 KV，同时也会兼容 Fauna JS Driver 的写法，因此这里可以进行优化。

import { Client, fql } from 'fauna';
...router.get('/', async c => {const query = fql`Blogs.all()`;const result = await (c.var.faunaClient as Client).query<Blog>(query);return c.json(result.data);
});
...

三、搭建博客

3.1 路由

博客网站的路由比较简单，可以直接使用 Hono.js 进行处理:

import { Hono } from "hono";import { Page } from "./pages/page";
import { Home } from "./pages/home";const app = new Hono();...app.get("/", async (c) => {const blogs = await getBlogList();return c.html(<Home blogs={blogs} />);
});app.get("/blog/:id{[0-9]+}", async (c) => {const id = c.req.param("id");const blog = await getBlogInfo(id);if (!blog) return c.notFound();return c.html(<Page blog={blog} />);
});app.fire();

3.2 页面

Hono.js 中，可以直接按照 jsx 的语法定义页面结构和样式:

import { DateTime } from "luxon";import { Layout } from "./components/layout";...const Item = (props: { blog: Blog }) => {const { ts, id, title } = props.blog;const dt = DateTime.fromISO(ts.isoString);const formatDate = dt.toFormat("yyyy-MM-dd");return (<li><section><p style={{ fontSize: "14px", color: "gray" }}>{formatDate}</p><a href={`/blog/${id}`}>{title}</a></section></li>);
};const List = (props: { blogs: Blog[] }) => (<ul>{props.blogs.map((blog) => (<Item blog={blog} />))}</ul>
);export const Home = (props: { blogs: Blog[] }) => {const title = "Tomtomyang's Blog";return (<Layout title={title}><header><h1>{title}</h1></header><List blogs={props.blogs} /></Layout>);
};

详情页要比列表页稍微复杂一点，一方面需要将 markdown 文件转换，另一方面还需要计算生成文章目录：

import { parse } from "marked";
import { html, raw } from "hono/html";import { DateTime } from "luxon";import type { Blog } from "..";
import { Layout } from "./components/layout";
import { getRenderer } from "../utils/render";const renderer = getRenderer();const Toc = () => { ... };const Info = (props: { author: string; time: string }) => {const { author, time } = props;const dt = DateTime.fromISO(time);const formatDate = dt.toFormat("yyyy-MM-dd hh:mm:ss");return (<div style={{ paddingBottom: "0.6em" }}><span style={{ color: "gray" }}>{formatDate}</span><span style={{ marginLeft: "10px" }}>{author}</span></div>);
};const Content = (props: { content: string }) => {return (<article style={{ fontSize: "16px" }}>{html`${raw(props.content)}`}</article>);
};export const Page = (props: { blog: Blog }) => {const { title, author, content, ts } = props.blog;const parsedContent = parse(content, { renderer });return (<Layout title={title}><header><h1>{title}</h1></header><Info author={author} time={ts.isoString}></Info><Content content={parsedContent} /><Toc content={parsedContent} /></Layout>);
};

3.3 缓存

在边缘构建站点的优势之一是对缓存的控制比较灵活，首先，我准备首先缓存 Fauna API 的响应结果:

首页展示所有文章列表，新增文章后，我需要在首页展示出来，因此列表接口我设置不缓存或者缓存时间很短:

export const fetchWithCache = async (url: string) => {try {return await fetch(url, {eo: {cacheTtlByStatus: {200: 24 * 60 * 60 * 1000,},},});} catch (err) {return new Response(`FetchWithCache Error: ${err.massage}`, {status: 500,});}
};

文章详情页展示文章的具体内容，我个人的习惯是一篇文章写完后，才进行发布，因此后续文章内容发生变动的概率较低，我选择缓存更长的时间:

export const fetchWithCache = async (url: string) => {try {return await fetch(url, {eo: {cacheTtlByStatus: {200: 7 * 24 * 60 * 60 * 1000,},},});} catch (err) {return new Response(`FetchWithCache Error: ${err.massage}`, {status: 500,});}
};

同时，文章详情页还有一个需要注意的点是，通过 API 获取到文章内容后，我还会计算生成文章目录，文章内容不变，生成的文章目录肯定也不会变，因此这部分重复的计算也可以通过缓存解决掉，方式是使用边缘函数 Runtime 中的 Cache API，将 c.html(<Page blog={blog} />) 生成的 HTML 字符串进行缓存，这样就解决了 Toc 重复计算的问题:

app.get("/blog/:id{[0-9]+}", async (c) => {const id = c.req.param("id");const cache = caches.default;const cacheKey = getCacheKey(id);try {const cacheResponse = await cache.match(cacheKey);if (cacheResponse) {return cacheResponse;}throw new Error(`Response not present in cache. Fetching and caching request.`);} catch {const blog = await getBlogInfo(id);if (!blog) return c.notFound();const html = await c.html(<Page blog={blog} />);html.headers.append("Cache-Control", "s-maxage=xxxx");c.event.waitUntil(cache.put(cacheKey, html));return html;}
});