Astro 快速入门指南

· BlogAI
#Astro #Tutorial #JavaScript

Astro 快速入门指南

Astro 是一个现代化的静态站点生成器，专注于性能和开发体验。

为什么选择 Astro？

1. 零 JavaScript 默认输出

Astro 默认生成零 JavaScript 的 HTML 页面，只在需要交互时才加载 JavaScript。

2. 支持多种框架

你可以在同一个项目中使用：

  • React
  • Vue
  • Svelte
  • Solid
  • Preact

3. 内容优先

Astro 专为内容网站设计，如博客、文档站点、营销页面等。

快速开始

安装

npm create astro@latest

项目结构

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

创建页面

在 src/pages/ 目录下创建 .astro 文件：

---
const title = "我的页面";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

Content Collections

Content Collections 是 Astro 管理内容的推荐方式。

定义 Schema

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

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

export const collections = { blog };

查询内容

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---

<ul>
  {posts.map(post => (
    <li><a href={`/blog/${post.slug}`}>{post.data.title}</a></li>
  ))}
</ul>

组件

Astro 组件使用 .astro 扩展名，语法类似 JSX：

---
interface Props {
  title: string;
  description?: string;
}

const { title, description = '默认描述' } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  {description && <p>{description}</p>}
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }
</style>

集成

Astro 支持丰富的集成：

# 添加 Tailwind CSS
npx astro add tailwind

# 添加 React
npx astro add react

# 添加 Sitemap
npx astro add sitemap

部署

Astro 可以部署到任何静态托管平台：

  • Vercel
  • Netlify
  • Cloudflare Pages
  • GitHub Pages
  • Coolify

构建命令：

npm run build

输出目录：dist/

最佳实践

  1. 使用 Content Collections - 管理结构化内容
  2. 部分水合 - 只在需要时添加交互性
  3. 图片优化 - 使用 <Image> 组件
  4. CSS 作用域 - 利用 Astro 的作用域样式
  5. TypeScript - 启用类型检查

总结

Astro 是构建内容网站的绝佳选择，它提供了：

  • 出色的性能
  • 灵活的架构
  • 优秀的开发体验
  • 丰富的生态系统

开始使用 Astro，构建你的下一个项目吧！

参考资源

返回博客列表