用 Astro 搭个人站：一个周末从零到上线

个人站这件事我拖了两年。每次想动手，都卡在选框架上。这次干脆定死 Astro，周五晚上开工，周日晚上上线。

为什么是 Astro

我要的东西很简单。文章用 Markdown 写，构建出纯静态页面，页面上几乎不跑 JavaScript。Astro 默认就是这样，组件写完编译成 HTML，客户端零负担。

内容集合怎么定

文章字段我只留了六个。字段越多，写稿时越容易拖。

const writing = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/writing' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

Zod 在编译期校验，日期写错格式直接构建失败，比上线后才发现好得多。

草稿怎么处理

draft: true 的文章在列表、RSS 和路由里全部过滤掉。本地想预览草稿，临时改成 false 就行。

暗色模式别闪白

暗色模式最容易翻车的地方是刷新那一下。解决办法是在 <head> 里塞一段内联脚本，页面渲染前就把 .dark 类写到根节点上。

const saved = localStorage.getItem('theme');
const dark = saved ? saved === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.toggle('dark', dark);

上线清单

检查项	怎么验
暗色刷新不闪	切到暗色后连续刷新
375px 无横向滚动	手机宽度下左右拖
代码块可横滑	找一段长代码试

做完这三项，就可以推上去了。