· 阅读时长约 6 分钟
Astro 快速入门指南
什么是 Astro？
Astro 是一个现代化的静态站点生成器，专注于构建快速、以内容为中心的网站。它的核心理念是”少即是多” - 默认情况下向浏览器发送零 JavaScript。
核心特性
1. 组件群岛（Islands Architecture）
Astro 引入了一种称为”组件群岛”的架构模式：
---
import InteractiveComponent from './InteractiveComponent.jsx';
---
<div>
<h1>静态内容</h1>
<!-- 只有这个组件会加载 JavaScript -->
<InteractiveComponent client:load />
</div>
2. 多框架支持
你可以在同一个项目中混用不同的框架：
- React
- Vue
- Svelte
- Solid
- Preact
3. 默认零 JS
Astro 组件默认只渲染 HTML 和 CSS，完全没有 JavaScript：
---
const greeting = 'Hello, World!';
---
<h1>{greeting}</h1>
<style>
h1 {
color: blue;
}
</style>
快速开始
安装
npm create astro@latest
项目结构
my-astro-site/
├── src/
│ ├── components/
│ ├── layouts/
│ ├── pages/
│ └── styles/
├── public/
├── astro.config.mjs
└── package.json
创建页面
在 src/pages/ 目录下创建 .astro 文件即可：
---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---
<Layout title="首页">
<h1>欢迎！</h1>
<p>这是我的网站。</p>
</Layout>
性能优势
Astro 的性能优势显著：
- ⚡ 快速加载: 默认零 JS，页面加载极快
- 🎯 精准优化: 只在需要时加载 JavaScript
- 📦 小体积: 自动代码分割和优化
- 🚀 SEO 友好: 完全静态的 HTML
适用场景
Astro 特别适合：
- 📝 博客和内容网站
- 📄 文档站点
- 🛍️ 营销页面
- 📰 新闻网站
总结
Astro 是构建现代化静态网站的优秀选择。如果你正在寻找一个性能出色、开发体验良好的框架，不妨试试 Astro！