Hello World：从 Astro 重新出发

为什么要重构？

用 Next.js 写博客，就像用卡车送外卖，虽然能用，但整体架构过重。

• 扩展性：过去的博客基于 tailwind-nextjs-starter-blog 修改，依赖链复杂，其中有几个耦合度很高的 MDX 处理”黑盒”库，博客的改造和扩展成本极高
• 稳定性：个别依赖库经过几次剧烈的变动，稳定性较差，且 Next.js 小版本更新频繁，大版本变更剧烈，工程维护成本太高
• 性能：Next.js 的水合成本对于一个以静态内容为主的博客来说比较昂贵，对性能有一定影响

为什么选择 Astro？

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

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

内容集合更优雅

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

Islands 架构的克制

对于我的博客来说，90% 以上的页面不需要客户端 JS，Astro 默认 ship 零 JS，需要交互的组件可以单独标记为 island 按需激活。

这次重构的目标

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

关于性能

Astro 的 SSG 输出是纯 HTML + CSS，没有 React 运行时、没有水合开销。配合恰当的图片优化和字体子集化后，Lighthouse Performance 可以做到无限接近 4 个 100 分。

总结

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