开始使用 Astro 构建现代网站

什么是 Astro？

Astro 是一个现代化的静态站点生成器，专为构建内容驱动的网站而设计。它的核心理念是”零 JavaScript 默认”，即默认情况下不向客户端发送任何 JavaScript，只在需要时才进行水合。

为什么选择 Astro？

1. 卓越的性能

Astro 生成的页面默认是纯 HTML 和 CSS，没有额外的 JavaScript 开销。这意味着：

• 更快的页面加载速度
• 更低的带宽消耗
• 更好的 SEO 表现

2. 框架无关

Astro 支持 React、Vue、Svelte 等多种前端框架，你可以根据需要选择最适合的工具。

---
import ReactCounter from './Counter.jsx';
import VueCounter from './Counter.vue';
---

<ReactCounter client:load />
<VueCounter client:visible />

3. 内容集合

Astro 提供了强大的内容集合功能，让你可以轻松管理博客文章、文档等内容。

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

开始使用

安装

npm create astro@latest

项目结构

├── src/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   └── pages/
├── public/
└── astro.config.mjs

总结

Astro 是构建内容驱动网站的绝佳选择。它的零 JavaScript 默认策略和框架无关的特性，让它成为博客、文档站点的理想工具。

在下一篇文章中，我们将深入探讨 Astro 的内容集合功能。