Astro + MDX 初体验：从 Markdown 到组件的桥梁

为什么选择 MDX

在构建个人作品集站点时，我希望博客既能写纯 Markdown，又能在需要时嵌入自定义组件。MDX 恰好提供了这种灵活性。

传统的 Markdown 虽然简洁高效，但在需要展示交互式组件、自定义布局或嵌入第三方内容时就显得力不从心了。MDX 的出现解决了这个问题——它允许你在 Markdown 文件中直接使用 JSX 组件，同时保留了 Markdown 的书写体验。对于个人博客来说，这意味着你可以在一篇技术文章中既用 Markdown 写叙述性文字，又在需要的地方插入代码演示、图表、甚至交互式的 UI 组件。

以下是一段示例代码，展示如何在 Astro 中读取 Content Collection：

// src/pages/blog/index.astro
import { getCollection } from "astro:content";

const posts = await getCollection("posts");
posts.sort((a, b) => 
  new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
);

Content Collections 的配置

Astro 的 Content Collections 是管理结构化内容的核心机制。通过在 src/content.config.ts 中定义 schema，你可以为每篇文章的 frontmatter 提供类型校验，确保所有必填字段都不会遗漏。

这种类型安全的设计在实际开发中非常有价值。当你的文章数量增长到几十篇时，如果某篇文章缺少了 pubDate 或 description 字段，构建阶段就会直接报错，而不是等到线上才发现页面展示异常。这比传统的 Markdown 博客系统要可靠得多。

在配置过程中，我遇到了一个值得记录的细节：Content Collections 默认会递归扫描 src/content/ 下的所有子目录。如果你希望按分类组织文章（比如 posts/tech/、posts/life/），只需要在 schema 中添加一个 category 字段即可，不需要通过目录结构来区分。这样做的好处是保持了文件组织的扁平化，减少了路由配置的复杂度。

代码高亮方案选型

对于技术博客来说，代码高亮是必不可少的功能。Astro 内置了 Shiki 作为默认的代码高亮引擎，支持几百种编程语言和数十种主题。与 Prism.js 相比，Shiki 的优势在于它在构建时就完成了语法解析和样式注入，不需要在客户端加载额外的 JavaScript。

这完全符合 Astro 的「零 JS」理念——代码块在 HTML 中就是带有内联样式的 <span> 标签，浏览器渲染时不需要执行任何脚本。对于一个追求极致性能的个人站点来说，这是最理想的方案。

我在选型过程中也考虑过 rehype-pretty-code，它基于 Shiki 提供了更丰富的功能（如行号、行高亮、标题栏等）。但考虑到目前博客的代码块场景相对简单，Astro 的默认配置已经足够，暂时不引入额外依赖。等到未来需要更复杂的代码展示时，再做升级也不迟。

图片与排版

正文中的图片会通过 prose 样式自动获得合适的间距。配合 prose-img:my-8 可以确保图片上下留白充足，阅读节奏更舒适。

在中文排版中，行高的设置尤为重要。英文内容通常使用 1.5 到 1.6 的行高就足够了，但中文由于字符的视觉密度更高，需要更大的行间距来保证阅读舒适度。经过多轮测试，我最终选择了 1.8 的行高——这个数值在「留白充裕」和「紧凑不松散」之间取得了较好的平衡。

另一个值得关注的细节是每行的字数。在 Web 排版中，中文正文的最佳阅读体验通常在每行 35-45 个字之间。过宽的排版区域会导致读者的视线在换行时容易”跳行”，过窄则会频繁换行、打断阅读节奏。这也是为什么许多优秀的中文博客都会限制正文区域的最大宽度。

部署与构建

整个站点采用静态构建的方式部署在 Vercel 上。Astro 的构建产物是纯静态的 HTML + CSS + 少量按需加载的 JS（仅用于交互组件），这意味着页面的首屏加载速度极快，Lighthouse 的 Performance 评分可以轻松达到 95 以上。

Vercel 的部署流程也非常简洁：连接 GitHub 仓库后，每次 git push 都会自动触发构建和部署。从提交代码到线上生效，通常只需要 30-60 秒。对于个人项目来说，这种「写完即发布」的体验大大降低了维护成本。

小结

Astro 的 Content Collections + MDX 组合非常适合个人博客场景：类型安全、零配置的代码高亮、以及按需嵌入组件的能力，让写作和展示都更加顺畅。

回顾整个搭建过程，最大的收获是理解了「选择合适的工具比追求最强的工具更重要」。Astro 并不是功能最多的框架，但它在静态内容站点这个细分场景下做到了极致。对于一个以内容输出为核心的个人站点来说，这正是最需要的。