使用 Astro 搭建个人博客

Astro 是一个现代化的前端框架，专注于内容驱动的网站。它拥有出色的性能和灵活的架构，非常适合用来搭建个人博客。

为什么选择 Astro？

Astro 的核心特性是 Islands Architecture（孤岛架构），它允许你在 HTML 中嵌入交互式的 UI 组件。默认情况下，Astro 在服务端渲染页面，只在需要交互的地方加载 JavaScript。

主要优势

• 零 JavaScript 默认输出 — 直出 HTML，体积极小
• 多框架支持 — 可以同时使用 React、Vue、Svelte 组件
• Markdown 优先 — 内置 Markdown 和 MDX 支持
• 内容集合 — 类型安全的内容管理系统

项目初始化

# 创建项目
npm create astro@latest my-blog

# 安装依赖
cd my-blog
npm install

# 启动开发服务器
npm run dev

添加 Tailwind CSS

Tailwind CSS 是一个很好的选择，它能让你快速构建漂亮的界面。

npx astro add tailwind

内容管理

Astro 的内容集合功能让管理博客文章变得简单。你可以定义文章的数据结构：

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

const blogCollection = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
  }),
});

总结

Astro 是搭建博客的理想选择，它快速、灵活且易于使用。配合 Tailwind CSS，你可以在短时间内构建一个功能完善、外观精美的个人博客。

接下来，我会分享更多关于博客定制化的内容，包括暗色模式、SEO 优化、RSS 订阅等。