Astro个人博客搭建记录

Astro 很适合内容型网站：页面默认输出静态 HTML，只有明确标记的交互组件才向浏览器发送 JavaScript。

为什么选择 Astro

技术博客的核心是内容、阅读体验和长期维护，而不是复杂的客户端状态。Astro 的静态优先模型让这些目标自然对齐：

• Markdown 与 MDX 是一等公民；
• Content Collections 提供 frontmatter 类型校验；
• 构建结果可以直接交给 Nginx；
• 需要交互时仍可按需使用任意 UI 框架。

定义文章集合

这次使用 Zod 描述文章元数据，错误会在开发或构建阶段暴露：

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

设计系统

全站颜色都通过 CSS 自定义属性表达，暗色模式只需要在根节点切换 data-theme。主题偏好保存在 localStorage，首次访问则跟随系统。

保持零 JavaScript 默认

文章列表、标签和上一篇/下一篇全部在构建期生成。浏览器端脚本目前只有主题切换，因此页面即使在较慢网络上也能迅速可读。

静态部署

运行 npm run build 后，完整站点位于 dist/。它可以部署到普通 Linux + Nginx，也可以放到任意静态托管平台。

后续计划

后面可以继续加入全文搜索、评论系统和自动生成社交分享图。不过先让内容持续更新，比一次塞入过多功能更重要。