Astro + React：打造现代化技术博客

最近用 Astro 和 React 搭建了这个技术博客，体验非常不错。相比 WordPress 这种重量级 CMS，Astro 提供了更加轻量和灵活的解决方案。

为什么选择 Astro？

1. 静态生成，性能出色

Astro 默认生成静态 HTML，加载速度极快，SEO 友好。

2. 多框架支持

可以在同一个项目中使用 React、Vue、Svelte 等不同框架的组件。

3. 零 JavaScript 默认

只有需要交互的组件才会加载 JavaScript，大幅减少包体积。

技术栈

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';

export default defineConfig({
  integrations: [react()],
});

• Astro 5.14.1 - 静态站点生成器
• React 18 - 交互组件开发
• TypeScript - 类型安全
• Content Collections - Markdown 内容管理

设计理念

采用黑底白字的极简设计，灵感来源于 GitHub Dark 主题：

• 背景色：#0d1117
• 主文字：#f0f6fc
• 链接色：#58a6ff
• 边框色：#30363d

内容管理

使用 Astro 的 Content Collections 管理博客文章：

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().optional(),
  }),
});

React 组件集成

在 Astro 中使用 React 组件非常简单：

---
import BlogCard from '../components/BlogCard.tsx';
---

<BlogCard post={post} client:load />

总结

Astro + React 的组合提供了：

• 出色的开发体验
• 优秀的性能表现
• 灵活的组件架构
• 简单的内容管理

对于技术博客来说，这是一个理想的技术选型。