Astro 入门指南

📅 2026/6/15 ✍️ Astro 团队
入门指南基础

Astro 入门指南

什么是 Astro？

Astro 是一个现代静态站点生成器，它的核心理念是”按需发送 JavaScript”。

💡 Astro 不会限制你使用任何特定的 UI 框架。你可以自由选择 React、Vue、Svelte、SolidJS 或只是纯 HTML。

为什么选择 Astro？

1. 默认零 JavaScript

在 Astro 中，所有组件默认为静态 HTML。这意味着：

  • ⚡ 页面加载速度极快
  • 📉 用户可以更快地看到内容
  • 🔒 更少的安全风险

2. 岛屿架构

---
// 纯静态组件 — 零 JS
import StaticCard from './StaticCard.astro';

// 交互式组件 — 仅在客户端加载 JS
import InteractiveChart from './Chart.client.tsx';
---

<div>
  <StaticCard />
  <InteractiveChart client:visible />
</div>

3. 内容集合

Astro 内置了强大的内容管理系统：

// 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()),
  }),
});

export const collections = { blog };

项目结构

my-astro-site/
├── public/          # 静态资源（原样输出）
├── src/
│   ├── components/  # UI 组件
│   ├── content/     # 内容集合
│   ├── layouts/     # 页面布局
│   ├── pages/       # 路由页面
│   └── styles/      # 样式文件
└── astro.config.ts  # 配置文件

快速开始

  1. 创建项目
npm create astro@latest
  1. 启动开发服务器
npm run dev
  1. 构建生产版本
npm run build

最佳实践

  • 📦 将交互式组件放在 .client.tsx / .client.vue 文件中
  • 🎨 使用 is:global 给全局样式（如 CSS reset）
  • 📝 用内容集合管理 Markdown 内容
  • 🏗️ 善用布局组件减少重复代码
  • ⚡ 优先使用 client:idle 或 client:visible 而非 client:load

总结

Astro 的核心哲学是内容优先、按需交互。它让你能够构建极速的网站，同时保留使用你喜欢的任何工具和框架的自由。