文档
Astro Hello World — 极简内容站点
目标
创建 Astro 内容站点，展示 .astro 组件、Markdown 渲染、以及多框架组件共存。
完整代码
首页 src/pages/index.astro
---
// 前置脚本（server-side，不会发送到浏览器）
const title = "🚀 我的 Astro 站点";
const description = "零 JavaScript，极致性能";
---
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
</head>
<body>
<main>
<h1>{title}</h1>
<p class="tagline">{description}</p>
<!-- 组件 -->
<Counter client:load />
<RecentPosts />
</main>
</body>
</html>
<style>
body {
font-family: -apple-system, 'Microsoft YaHei', sans-serif;
max-width: 640px;
margin: 60px auto;
padding: 0 16px;
background: #fafafa;
}
h1 { font-size: 2.5rem; }
.tagline { color: #666; font-size: 1.2rem; }
</style>
计数器组件 src/components/Counter.astro
---
// 纯 Astro 组件：无 JS 发送到客户端
let count = 0;
---
<div class="counter">
<p>计数：<strong>{count}</strong></p>
<p class="note">（纯服务端渲染，此处无法交互，需要 client 指令）</p>
</div>
<style>
.counter {
padding: 16px; border-radius: 12px;
background: #f0f0ff; margin: 16px 0;
}
.note { font-size: 0.8rem; color: #999; }
</style>
带交互的 React 计数器 src/components/ReactCounter.jsx
import { useState } from "react";
export default function ReactCounter() {
const [count, setCount] = useState(0);
return (
<div style={{ padding: 16, background: "#e8f5e9", borderRadius: 12, margin: "16px 0" }}>
<p>React 计数器：<strong>{count}</strong></p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
<p style={{ fontSize: "0.8rem", color: "#666" }}>
此组件由 React 水合，具有客户端交互
</p>
</div>
);
}
在 .astro 中使用：
---
import ReactCounter from "../components/ReactCounter";
---
<ReactCounter client:load /> <!-- client:load 使其在客户端水合 -->
博客文章 Markdown src/pages/posts/hello.md
---
title: "我的第一篇文章"
date: 2024-01-20
layout: ../../layouts/BlogPost.astro
---
# 你好，Astro！
Astro 的**内容集合**功能让 Markdown 管理变得极其优雅。
- ⚡ 默认零 JS
- 🏝️ 按需水合（Islands Architecture）
- 🎨 支持 React/Vue/Svelte/Preact/Solid 组件
博客布局 src/layouts/BlogPost.astro
---
const { frontmatter } = Astro.props;
---
<html lang="zh-CN">
<head>
<title>{frontmatter.title}</title>
</head>
<body>
<main>
<a href="/">← 返回</a>
<h1>{frontmatter.title}</h1>
<time>{frontmatter.date}</time>
<article>
<!-- slot 是 Markdown 内容 -->
<slot />
</article>
</main>
</body>
</html>
配置文件 astro.config.mjs
import { defineConfig } from "astro/config";
import react from "@astrojs/react";
export default defineConfig({
integrations: [react()],
});
运行步骤
npm run dev # 开发模式 http://localhost:4321
npm run build # 构建（默认零 JS 输出！）
npm run preview # 预览构建结果
预期输出
- 首页渲染 HTML，查看源代码可见完整内容
- React 计数器在客户端水合后可交互
- 默认情况下页面 JS 体积接近 0KB