Astro 入门指南

350 字

2 分钟

Astro 入门指南

2026-04-06

指南

Astro

/

教程

/

Web开发

什么是 Astro？#

Astro 是一个现代 Web 框架，专为构建快速、内容驱动的网站而设计。它开创了 群岛架构 的概念，交互组件独立水合，减少 JavaScript 负载。

快速入门#

1. 创建新项目#

1
npm create astro@latest my-blog
2
cd my-blog

2. 项目结构#

1
my-blog/
2
├── src/
3
│   ├── components/    # 可复用的 UI 组件
4
│   ├── content/       # 博客文章（Markdown）
5
│   ├── layouts/       # 页面布局
6
│   ├── pages/         # 基于文件的路由
7
│   └── styles/        # 全局样式
8
├── public/            # 静态资源
9
└── astro.config.mjs   # 配置文件

3. 创建你的第一个页面#

1
---
2
import Layout from '../layouts/Layout.astro';
3
---
4

5
<Layout title="主页">
6
  <h1>欢迎来到我的网站！</h1>
7
  <p>使用 Astro 构建 ✨</p>
8
</Layout>

4. 添加内容集合#

在 src/content.config.ts 中定义内容模式：

1
import { defineCollection, z } from 'astro:content';
2
import { glob } from 'astro/loaders';
3

4
const posts = defineCollection({
5
  loader: glob({ pattern: '**/*.md', base: './src/content/posts' }),
6
  schema: z.object({
7
    title: z.string(),
8
    published: z.coerce.date(),
9
    description: z.string().default(''),
10
    tags: z.array(z.string()).default([]),
11
  }),
12
});
13

14
export const collections = { posts };