Astro 是一个现代的静态网站生成器，专为构建快速、内容丰富的网站而设计。它的核心理念是”默认发送更少的 JavaScript”，这意味着你的网站将拥有出色的性能。
npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev
src/
├── components/ # 组件文件
├── layouts/ # 布局模板
├── pages/ # 页面文件
└── styles/ # 样式文件
在 src/pages/ 目录下创建 .astro 文件即可自动生成路由：
---
// 组件脚本（在构建时运行）
const title = "我的第一个 Astro 页面";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>欢迎来到 Astro！</p>
</body>
</html>
Astro 组件使用类似 JSX 的语法，但有一些独特的特性：
---
// 这里的代码在构建时运行，不会发送到浏览器
import Layout from '../layouts/Layout.astro';
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
const title = "我的博客";
---
<Layout title={title}>
<h1>最新文章</h1>
<ul>
{posts.map(post => (
<li>
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>
</Layout>
Astro 的内容集合功能让管理博客文章、产品页面等结构化内容变得简单：
import { defineCollection, z } from 'astro:content';
const blogCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
publishDate: z.date(),
tags: z.array(z.string()).optional(),
}),
});
export const collections = {
'blog': blogCollection,
};
---
title: "我的第一篇博客"
description: "这是一篇测试文章"
publishDate: 2025-01-15
tags: ["astro", "博客"]
---
# 文章内容
这里是 Markdown 格式的文章内容。
Astro 内置了许多性能优化功能：
<Image /> 组件自动优化图片Astro 可以部署到任何支持静态文件的平台：
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
常用部署平台：
Astro 是一个强大且易用的静态网站生成器，特别适合：
开始你的 Astro 之旅吧！🚀
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。