Hello World：用 Astro 重新出发

为什么要重构？

用 Next.js 写博客，就像用卡车送外卖——能用，但总有点拧巴。

过去的博客基于 tailwind-nextjs-starter-blog，依赖链复杂，有一个我搞不定的 MDX 处理”黑盒”库，改造成本极高。加上 Next.js 13 的水合（hydration）成本对于一个以静态内容为主的博客来说过于昂贵，性能天花板摆在那里。

依赖地狱

当你的博客项目 node_modules 超过 300MB，而你写的内容还没超过 300KB 的时候，你就知道该换了。

为什么是 Astro？

Astro 的设计哲学和博客这个场景高度契合：

• 零 JS 默认：页面默认不下发任何 JavaScript，性能天花板极高
• 内容集合：内置的 Content Collections 提供类型安全的 Markdown/MDX 管理，不需要第三方黑盒
• Islands 架构：需要交互时按需激活，而不是一刀切
• View Transitions API：原生支持页面切换动画，体验丝滑

内容集合的优雅

Astro 的 Content Collections 允许你用 Zod Schema 定义 frontmatter 的类型，编辑器会自动补全，写错了 build 时就报错。再也不用担心某篇文章忘写了 description 导致 OG 卡片空白。

Islands 架构的克制

不是说 JavaScript 不好，而是对于一个博客来说，99% 的页面不需要客户端 JS。Astro 默认 ship 零 JS，你需要交互的组件可以单独标记为 “island”，按需激活。

这次重构的目标

1. 彻底去除黑盒依赖，核心功能用 Astro 原生能力实现
2. 引入微交互和动画，从”文档风”升级到”现代 2C 体验”
3. 性能与 SEO 做到极致，Lighthouse 无限接近 4 个 100
4. 支持中英双语，解决过去语言内容割裂的问题
5. 部署在对大陆访问更友好的 CDN 上

关于性能

Astro 的 SSG 输出是纯 HTML + CSS，没有 React 运行时、没有水合开销。在配合恰当的图片优化和字体子集化后，Lighthouse Performance 跑到 100 分不是梦。

总结

这是第一篇文章，也是新起点的标记。接下来会持续记录重构过程中的技术选型、踩坑和思考。

---

凝结尾迹（contrails）：飞机飞过之后，留在天空中的那条白线。