使用 Astro 构建现代静态博客

Astro 是一个强大的静态站点生成器，它允许你使用你喜欢的框架（React、Vue、Svelte 等）来构建内容驱动的网站。在这篇文章中，我们将探索如何使用 Astro 构建一个现代、快速的博客。

什么是 Astro？

Astro 是一个零 JS 运行时的框架，这意味着默认情况下它不会向浏览器发送任何 JavaScript。这使得网站加载速度极快，同时仍然允许你在需要时使用 React、Vue 等框架的组件。

核心特性

  • 组件岛架构：只加载需要的 JavaScript
  • 内容集合：类型安全的内容管理
  • 多框架支持：React、Vue、Svelte、Preact 等
  • 内置优化：图片优化、代码分割等

开始使用

安装 Astro

首先，我们需要创建一个新的 Astro 项目。你可以使用以下命令：

npm create astro@latest

或者使用 pnpm：

pnpm create astro@latest

项目结构

一个典型的 Astro 项目结构如下：

my-blog/
├── src/
│   ├── components/     # 可复用组件
│   ├── layouts/       # 页面布局
│   ├── pages/         # 路由页面
│   ├── content/       # Markdown 内容
│   └── styles/        # 全局样式
├── public/            # 静态资源
└── astro.config.mjs  # Astro 配置

内容集合

Astro 的内容集合功能让你可以管理 Markdown 文件，并提供类型安全。

配置内容集合

在 src/content/config.ts 中定义你的内容结构：

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

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

export const collections = {
  blog: blogCollection,
};

创建文章

在 src/content/blog/ 目录下创建 Markdown 文件：

---
title: "我的第一篇文章"
description: "这是文章描述"
pubDate: 2024-01-15
tags: ["astro", "blog"]
---

# 文章标题

文章内容...

组件系统

Astro 支持多种前端框架的组件。你可以使用 client:load 指令来指定何时加载客户端 JavaScript。

React 组件示例

// src/components/Counter.tsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

在 Astro 页面中使用：

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

<Counter client:load />

样式处理

Astro 支持多种样式方案：

  • CSS Modules：import './styles.module.css'
  • Tailwind CSS：通过 @astrojs/tailwind 集成
  • Sass/SCSS：内置支持
  • 全局样式：在 <style> 标签中使用 is:global

使用 Tailwind CSS

安装 Tailwind 集成：

npx astro add tailwind

然后在组件中使用 Tailwind 类：

<div class="flex items-center justify-between p-4">
  <h1 class="text-2xl font-bold">标题</h1>
</div>

性能优化

图片优化

Astro 提供了 <Image /> 组件来优化图片：

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image src={heroImage} alt="Hero" />

代码分割

Astro 自动进行代码分割，每个页面只加载需要的 JavaScript。

部署

Astro 可以部署到多个平台：

  • Netlify：npm run build 然后拖拽 dist 文件夹
  • Vercel：连接 Git 仓库自动部署
  • GitHub Pages：使用 GitHub Actions
  • Cloudflare Pages：支持边缘部署

构建生产版本

npm run build

构建产物会在 dist/ 目录中。

总结

Astro 是一个强大的静态站点生成器，它结合了现代框架的灵活性和静态站点的性能优势。通过使用内容集合、组件系统和内置优化，你可以快速构建一个快速、现代的博客网站。

下一步

相关资源：

  • npm install astro - 安装 Astro
  • astro add react - 添加 React 支持
  • astro check - 类型检查

希望这篇文章对你有帮助！如果你有任何问题，欢迎在评论区留言。