目录

用 Astro 构建一个安静、快速的内容网站

一个个人博客真正需要的，往往不是复杂的后台，而是一条足够可靠的内容发布路径：写完文章、提交文件、自动构建，然后让读者快速打开。

Astro 的静态输出很适合这件事。页面在构建阶段生成 HTML，浏览器不需要先下载一整个应用才能看到正文。

内容先于界面

在这个博客里，每篇文章都是一个 MDX 文件。文章的标题、日期、栏目、标签和封面放在 frontmatter 中，正文则使用熟悉的 Markdown：

---
title: "一篇新文章"
category: tech
tags: ["Astro", "性能"]
---

正文从这里开始。

Content Collections 会在构建时校验这些字段。如果遗漏标题，或者栏目名称写错，构建会直接给出明确错误，而不是让问题进入线上。

MDX 内容经过 Astro 构建后生成静态页面的流程图
内容与展示解耦：文章保持简单，构建过程负责校验和优化。

默认静态，按需交互

“静态”并不等于“没有交互”。它只是要求我们更克制地决定哪些功能需要 JavaScript：

  • 文章正文、目录、标签和导航直接输出为 HTML；
  • 搜索只在读者开始输入时加载；
  • 主题切换使用一小段原生脚本；
  • 图表优先输出 SVG，让移动端也能清晰缩放。

这种方式可以把页面的基础成本控制得很低。一个简单的性能预算可以写成：

Binitial=H+C+JessentialB_{\text{initial}} = H + C + J_{\text{essential}}

其中 HH 是 HTML，CC 是关键样式，而 JessentialJ_{\text{essential}} 只包含首屏真正需要的脚本。

移动端不是缩小版桌面

文章页在手机上会改变信息优先级：侧边目录收起、触控目标增大、代码块允许横向滚动、图片铺满内容宽度。排版的重点不是“把所有内容塞进去”，而是让读者能持续阅读。

const readingExperience = {
  lineLength: "舒适",
  contrast: "清晰",
  navigation: "可达",
  motion: "克制",
} as const;

对个人博客而言，最好的技术栈往往是那个让你愿意持续写作、又不会在半年后变成维护负担的技术栈。