Astro 上手笔记：为什么静态站这么香

决定重做个人站之后，我在 Next.js、Hugo 和 Astro 之间来回横跳了两天，最后落在了 Astro 上。用了三周，感觉可以写点东西了。

最喜欢的一点：默认不发 JS

Astro 的思路很直接：页面在构建时就渲染成 HTML，只有你明确写了 client:* 指令的组件才会往浏览器里塞 JavaScript。

对一个以文字为主的博客来说，这意味着打开速度基本只取决于网络，而不取决于我的代码写得多烂。看到构建产物体积的那一刻确实有点爽：

$ npx astro build
✓ Completed in 3.21s
dist/index.html          8.4 kB
dist/blog/index.html     12.1 kB

单页十几 KB，其中一大半还是文章里的文字。以前用 SPA 写博客，光框架运行时就得几百 KB，每次打开都觉得别扭。

内容集合比想象中省事

文章放在 src/content/blog/ 下，字段用 Zod 定义。frontmatter 写错了构建会直接报错，而不是等页面上显示出一个 undefined 才后知后觉。

• 标题、日期是必填，描述和标签有默认值；
• draft: true 的文章不进列表，也不会生成页面；
• 以后想加个「书单」集合，照着抄一份配置就行。

对我这种偶尔手滑打错字段名的人，这个校验至少救过三次。

几个上手才会遇到的小坑

日期和时区。写 pubDate: 2026-09-12，它会被当成 UTC 零点。要是格式化的时候用本地时间的方法取值，住在西半球的话日期就会莫名差一天。所以我干脆自己写了个按 UTC 取值的格式化函数，输出稳定的 2026-09-12，永远不飘。

别什么都抽成组件。一开始我连页脚都想复用，结果传了五六个 props，改起来比直接写还慢。现在只把真正重复三次以上的东西抽出来，剩下的先复制粘贴——真要重构，也是等第三个使用场景出现之后。

静态站不是银弹，它只是把复杂度挪到了构建时。而你恰好只在构建的时候才有耐心。

小结

如果站点以内容为主、交互就那么几处，Astro 大概是目前最省心的选择：零 JS 打底，需要交互的地方再单独加一小块。等哪天我把评论和搜索接上，再来补一篇后续。