使用 Astro 构建现代化博客

为什么选择 Astro？

Astro 是一个现代化的静态网站生成器，它专注于构建快速、内容为中心的网站。与其他框架相比，Astro 有以下优势：

1. 零 JavaScript 默认

Astro 默认不向客户端发送任何 JavaScript，这意味着更快的页面加载速度。

// Astro 组件示例
---
const greeting = "Hello, World!";
---

<h1>{greeting}</h1>

2. 岛屿架构

当你确实需要交互性时，Astro 的岛屿架构允许你只在需要的地方添加 JavaScript。

---
import Counter from ''../components/Counter.jsx'';
---

<Counter client:visible />

3. 多框架支持

Astro 支持在同一个项目中使用 React、Vue、Svelte 等多种框架。

快速开始

创建新项目

npm create astro@latest my-blog
cd my-blog
npm install
npm run dev

项目结构

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

内容集合

Astro 的内容集合功能让管理 Markdown 文章变得简单：

// src/content/config.ts
import { defineCollection, z } from ''astro:content'';

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

export const collections = { blog };

总结

Astro 是构建博客的绝佳选择，它提供了出色的性能、灵活的架构和优秀的开发体验。