把博客搬到 SvelteKit + Cloudflare

这个博客几经重做——从 2020 年的一个 WordPress 站点，一路折腾到现在这套 SvelteKit + Cloudflare 的静态架构。这篇记录最近这次重构的选型：目标很简单——静态、快、好维护，顺便把所有可用的内容组件都演示一遍。

选型

• SvelteKit + adapter-cloudflare：整站预渲染成静态资源，部署到 Cloudflare Workers。
• Markdown + mdsvex：文章就是 .md 文件，还能在正文里嵌 Svelte 组件。
• Tailwind v4 + Shiki：设计 token 集中管理，代码块构建期高亮。

核心配置其实就两个文件：

import adapter from '@sveltejs/adapter-cloudflare';

export default {
	kit: { adapter: adapter() }
};content_copy

{
	"name": "atlas",
	"main": ".svelte-kit/cloudflare/_worker.js",
	"compatibility_date": "2026-05-29"
}content_copy

一张图看懂构建流程

flowchart LR
    A[".md 文章"] --> B["mdsvex"]
    B --> C{"代码块?"}
    C -->|"普通"| D["Shiki 高亮"]
    C -->|"mermaid"| E["客户端渲染 SVG"]
    B --> F["预渲染 prerender"]
    D --> F
    F --> G["Cloudflare Workers"]

用 mermaid 围栏写流程图即可：构建期留占位，客户端按当前明暗主题渲染成 SVG（库按需懒加载，没有图的页面不会引入它）。

写作体验

加一篇文章 = 往 content/articles/ 丢一个 .md，列表、首页、归档、目录全自动更新。

灵感氛围

写代码时的背景音，大概就是这种 lo-fi 的安静：

之后

慢慢把灵感、实验和过去都沉淀进来——少一点魔法，多一点确定性。