旧版主页是 React + Redux + Ant Design 的单页应用。打开它要先下载完整的 JS 才能看到内容，而它依赖的后端早已下线，一半的页面都是空的。

重写之前，我给自己列了三条要求：

  1. 内容优先：作品和随笔都是 Markdown，写完即发布，不需要后台。
  2. 足够快：页面默认是纯静态 HTML，只有真正需要交互的地方才加载脚本。
  3. 好维护：新增一个作品，只需要写一个 Markdown 文件、放一个截图文件夹。

为什么是 Astro

Astro 默认不向浏览器发送任何框架运行时，这对以阅读为主的个人站点很合适。内容集合（Content Collections）用 Zod 校验 frontmatter，字段写错会在构建时直接报错，而不是上线后才发现某个页面缺了标题。

const posts = defineCollection({
	loader: glob({ pattern: '**/*.md', base: './src/content/posts' }),
	schema: z.object({ title: z.string(), date: z.coerce.date() }),
});

图片

截图是这个站点里最重的资源。源文件统一转成 WebP，最长边限制在 2400px；构建时再按 640、960、1440 三档宽度输出，浏览器按屏幕挑选合适的一张。首页的轮播只让第一张图立即加载，其余在接近视口时才请求，切换前预取下一张。

二十多张截图，源文件从 17MB 降到了 2MB 出头。

和 AI 一起做

这次重建几乎全程和 AI 编程助手协作完成：我负责定方向、做取舍、提出「这里不够好」，它负责快速给出实现，我再逐行读、在浏览器里逐页看效果。配色推翻过两次，导航改过三版——AI 让试错变得很便宜，但「哪一版更好」仍然需要自己判断。

这大概是我现在最习惯的工作方式：把想清楚的部分交给自己，把能描述清楚的部分交给 AI。