← 返回文章列表
032 — 前端 · #Astro #静态站点 · 2026-08-15 · 1 MIN READ

用 Astro 搭建零 JS 博客的完整流程

这个博客就是 Astro 构建的。首页是零 JS 的静态 HTML,唯一的动态组件——AI 聊天窗——以 React 岛屿的形式按需水合。

为什么是 Astro

内容站点的本质是 HTML + CSS。传统 SPA 把一个 React 运行时塞给每个读者,只为渲染几段文字,这是巨大的浪费。Astro 默认不发送任何 JS,除非你显式声明一个岛屿。

岛屿架构

页面上 95% 的内容是静态的,只有聊天窗需要复杂状态管理。Astro 允许我只给这一个组件加上 client:idle 指令,浏览器空闲时才加载它的 JS。

构建与部署

astro build 输出纯静态文件,scp 到服务器让 Nginx 直接托管即可,没有 Node 进程要守护。这也是整个站点年成本能压到 500 元以内的关键。

Comments