Astro 入门指南：从零搭建现代静态博客

什么是 Astro？

Astro 是一个现代化的静态站点生成器，它独特的 岛屿架构（Islands Architecture）让它在前端工具链中脱颖而出。与 Next.js、Nuxt 等框架不同，Astro 默认输出零 JavaScript 的静态 HTML，只在需要交互的地方加载对应的 JS 组件。

核心优势

零 JS 默认输出：页面默认不加载任何 JavaScript，加载速度极快
岛屿架构：按需加载交互组件，互不干扰
多框架支持：同一页面中混用 React、Vue、Svelte 等组件
Markdown 优先：对内容型站点有天然支持
内置优化：图片优化、CSS 压缩、RSS 生成等开箱即用

快速开始

创建项目

npm create astro@latest my-blog

按照提示选择模板，推荐选择 Blog 模板快速上手。

项目结构

my-blog/
├── src/
│   ├── components/    # 组件
│   ├── content/       # Markdown 内容
│   ├── layouts/       # 布局模板
│   └── pages/         # 页面路由
├── public/            # 静态资源
├── astro.config.mjs   # 配置文件
└── package.json

添加文章

在 src/content/blog/ 下创建 .md 文件：

---
title: "我的第一篇文章"
date: 2026-05-15
tags: ["Astro", "博客"]
---

这里是文章内容...

岛屿架构详解

Astro 最核心的概念是 岛屿架构。传统 SSR 框架会将整个页面打包成 JS 发送给客户端，而 Astro 只在需要交互的地方加载 JS。

---
// 这个组件是静态 HTML，不加载 JS
import MyReactComponent from "./MyReactComponent";
---

<!-- 静态内容，零 JS -->
<h1>欢迎来到我的博客</h1>
<p>这段文字不需要任何交互逻辑</p>

<!-- 只有这个交互组件会加载 JS -->
<MyReactComponent client:load />

使用 client:* 指令控制组件加载时机：

指令	加载时机
`client:load`	页面加载后立即加载
`client:idle`	浏览器空闲时加载
`client:visible`	组件进入视口时加载
`client:media`	匹配媒体查询时加载
`client:only`	仅在客户端渲染

内容集合

Astro v5 使用内容集合（Content Collections）管理文章：

// src/content.config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

部署

Astro 构建后输出纯静态文件，可以部署到任何平台：

npm run build

推荐平台：Vercel、Cloudflare Pages、Netlify，都支持零配置部署。

总结

Astro 的岛屿架构和零 JS 默认输出为内容型站点带来了极致的性能体验。如果你正在寻找一个高效、灵活的静态站点生成器，Astro 值得一试。

TheBlockSky