这个博客就是用 Astro 搭的。首屏 0 KB JavaScript，Lighthouse 四项满分，而开发体验和写 React 几乎没差别。这篇文章完整记录它是怎么做到的。

Islands：把交互圈成孤岛

传统 SPA 的问题在于：哪怕是一个静态页面，也要把整棵组件树 hydrate 一遍。Astro 的思路反过来——默认所有组件都在构建期渲染成纯 HTML，只有你显式标记的“岛屿”才会带 JS 上船。

---
// 这部分只在服务端/构建期运行，不会出现在浏览器里
const posts = await getCollection('blog');
---
<ul>
  {posts.map((p) => <li><a href={`/posts/${p.id}`}>{p.data.title}</a></li>)}
</ul>

内容集合：类型安全的 Markdown

把文章放进 src/content/blog/，用 content.config.ts 定义 schema，frontmatter 就有了完整的类型检查和自动补全。写错一个字段名，构建期就会拦下你，而不是等读者在页面上看到 undefined。

部署：从构建到函数计算

配合 @astrojs/node 的 standalone 模式，astro build 产物是一个自带依赖的 entry.mjs，扔到任何 Node 运行时（包括阿里云函数计算 FC 3.0）就能跑。没有数据库、没有常驻服务，纯内容站的最轻形态。

0 JS 不是目的，按需付费才是——每一字节 JS 都要有它存在的理由。