使用 Astro 搭建个人博客的完整指南

🚀 为什么选择 Astro？#

在众多的静态网站生成器中，我选择了 Astro，主要原因是：

Astro 的优势#

极快的性能 ⚡
- 默认零 JavaScript
- 按需加载组件
- 自动优化资源
灵活的框架支持 🎯
- 支持 React、Vue、Svelte 等
- 可以混用不同框架
- 学习曲线平缓
内置功能丰富 📦
- Markdown 和 MDX 支持
- 图片优化
- RSS 生成
- Sitemap 生成
优秀的开发体验 💻
- 快速的热更新
- TypeScript 支持
- 组件化开发

📋 准备工作#

环境要求#

1
# Node.js 版本
2
node >= 18.0.0
3

4
# 包管理器（推荐 pnpm）
5
npm install -g pnpm

🛠️ 创建项目#

1. 初始化项目#

1
# 使用官方模板创建
2
pnpm create astro@latest my-blog
3

4
# 进入项目目录
5
cd my-blog
6

7
# 安装依赖
8
pnpm install

2. 项目结构#

1
my-blog/
2
├── public/          # 静态资源
3
├── src/
4
│   ├── components/  # 组件
5
│   ├── layouts/     # 布局
6
│   ├── pages/       # 页面
7
│   ├── content/     # 内容集合
8
│   └── styles/      # 样式
9
├── astro.config.mjs # Astro 配置
10
└── package.json

3. 配置 Tailwind CSS#

1
# 安装 Tailwind
2
pnpm astro add tailwind
3

4
# 配置会自动完成

4. 配置内容集合#

创建 src/content/config.ts：

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

3
const postsCollection = defineCollection({
4
  type: 'content',
5
  schema: z.object({
6
    title: z.string(),
7
    published: z.date(),
8
    description: z.string(),
9
    tags: z.array(z.string()),
10
    draft: z.boolean().default(false),
11
  }),
12
});
13

14
export const collections = {
15
  posts: postsCollection,
16
};

📝 创建文章#

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

1
---
2
title: 我的第一篇文章
3
published: 2025-11-05
4
description: 这是我的第一篇博客文章
5
tags: [博客, 教程]
6
draft: false
7
---
8

9
## 内容开始
10

11
这里是文章内容...

🎨 创建页面#

首页 `src/pages/index.astro`#

1
---
2
import { getCollection } from 'astro:content';
3

4
const posts = await getCollection('posts', ({ data }) => {
5
  return !data.draft;
6
});
7
---
8

9
<html>
10
  <head>
11
    <title>我的博客</title>
12
  </head>
13
  <body>
14
    <h1>文章列表</h1>
15
    {posts.map(post => (
16
      <article>
17
        <a href={`/posts/${post.slug}`}>
18
          <h2>{post.data.title}</h2>
19
        </a>
20
        <p>{post.data.description}</p>
21
      </article>
22
    ))}
23
  </body>
24
</html>

文章页面 `src/pages/posts/[...slug].astro`#

1
---
2
import { getCollection } from 'astro:content';
3

4
export async function getStaticPaths() {
5
  const posts = await getCollection('posts');
6
  return posts.map(post => ({
7
    params: { slug: post.slug },
8
    props: { post },
9
  }));
10
}
11

12
const { post } = Astro.props;
13
const { Content } = await post.render();
14
---
15

16
<article>
17
  <h1>{post.data.title}</h1>
18
  <Content />
19
</article>

🚢 部署#

Cloudflare Pages#

1
# 构建项目
2
pnpm build
3

4
# 部署到 Cloudflare Pages
5
# 在控制台配置：
6
# - 构建命令: pnpm build
7
# - 输出目录: dist

Vercel#

1
# 安装 Vercel CLI
2
npm i -g vercel
3

4
# 部署
5
vercel

💡 优化建议#

SEO 优化
- 添加 sitemap
- 配置 robots.txt
- 使用语义化 HTML
性能优化
- 图片压缩和懒加载
- 代码分割
- CDN 加速
用户体验
- 响应式设计
- 深色模式
- 搜索功能

📚 学习资源#

🎉 总结#

使用 Astro 搭建博客的优势：

✅ 性能出色，加载速度快 ✅ 开发体验好，上手简单 ✅ 部署方便，支持多平台 ✅ 生态丰富，插件众多

现在就开始搭建你的博客吧！💪

Lovely Eckes!

支持博主

使用 Astro 搭建个人博客的完整指南

🚀 为什么选择 Astro？#

Astro 的优势#

📋 准备工作#

环境要求#

🛠️ 创建项目#

1. 初始化项目#

2. 项目结构#

3. 配置 Tailwind CSS#

4. 配置内容集合#

📝 创建文章#

🎨 创建页面#

首页 `src/pages/index.astro`#

文章页面 `src/pages/posts/[...slug].astro`#

🚢 部署#

Cloudflare Pages#

Vercel#

💡 优化建议#

📚 学习资源#

🎉 总结#

赞助支持

目录

Lovely Eckes!

支持博主

使用 Astro 搭建个人博客的完整指南

🚀 为什么选择 Astro？#

Astro 的优势#

📋 准备工作#

环境要求#

🛠️ 创建项目#

1. 初始化项目#

2. 项目结构#

3. 配置 Tailwind CSS#

4. 配置内容集合#

📝 创建文章#

🎨 创建页面#

首页 src/pages/index.astro#

文章页面 src/pages/posts/[...slug].astro#

🚢 部署#

Cloudflare Pages#

Vercel#

💡 优化建议#

📚 学习资源#

🎉 总结#

赞助支持

目录

首页 `src/pages/index.astro`#

文章页面 `src/pages/posts/[...slug].astro`#