Astro 入门指南

技术Astro前端

Astro 是一个现代化的静态站点生成器，专注于内容驱动的网站。

为什么选择 Astro

Astro 有以下优势：

  1. ** Islands 架构** - 只在需要的地方加载 JavaScript
  2. 框架无关 - 支持 React、Vue、Svelte 等组件
  3. 快速构建 - 优化的构建流程
  4. 优秀的开发体验 - 热更新、清晰的错误提示

快速开始

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

# 进入项目目录
cd my-blog

# 启动开发服务器
npm run dev

项目结构

my-blog/
├── src/
│   ├── components/    # 组件
│   ├── layouts/       # 布局
│   ├── pages/         # 页面
│   └── content/       # 内容集合
├── public/            # 静态资源
└── astro.config.mjs   # 配置文件

内容集合

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

import { getCollection } from 'astro:content';

const posts = await getCollection('posts');

总结

Astro 是构建内容网站的绝佳选择。它的 Islands 架构确保了极快的页面加载速度，同时保留了现代开发框架的便利性。