# 从零搭建首个 Astro 静态站点

> 45 分钟从零到极速上线：深度解析 Astro 的内容集合、组件群岛架构与核心心智模型。
>
> 2026-06-10 — y7.hk

## 为什么选择 Astro？

现代 Web 框架往往默认向客户端打包沉重的 JavaScript 运行时，即便页面内容几乎完全是只读的。Astro 则带来了范式革新：默认输出极致纯粹的零 JS 静态 HTML 与 CSS，唯有声明了 `client:*` 指令的交互组件（如 React、Vue）才会被按需作为独立“群岛”注入并水合。

## 核心心智模型：组件群岛 (Islands)

```astro
---
import Header from "../components/Header.astro";
import InteractiveCounter from "../components/Counter.jsx";
---

<Header />
<main>
  <h1>欢迎使用 Astro</h1>
  <InteractiveCounter client:visible />
</main>
```

上述代码中，`Header` 保持为纯 HTML，而 `InteractiveCounter` 仅在滚动至视口时才会异步加载对应的小体积 React 脚本并完成交互水合。