从零搭建Astro博客的完整指南

为什么选择Astro？ Link to 为什么选择Astro？

Astro是一个现代化的静态站点生成框架，它有着几个让人无法忽视的优势：

• 零JavaScript默认：Astro默认不会向客户端发送任何JavaScript，页面加载速度极快
• 内容优先：内置Markdown/MDX支持，对博客场景天然友好
• 框架无关：可以在同一个项目中混用React、Vue、Svelte等组件
• 岛屿架构：只在需要交互的组件上加载JavaScript，其余保持纯HTML

搭建步骤 Link to 搭建步骤

1. 初始化项目 Link to 1. 初始化项目

1
2

npm create astro@latest my-blog
cd my-blog

选择”博客”模板可以快速获得一个开箱即用的博客项目。

2. 配置内容集合 Link to 2. 配置内容集合

Astro的内容集合（Content Collections）为博客文章提供了类型安全的schema验证：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

export const collections = { blog };

3. 编写文章 Link to 3. 编写文章

在 src/content/blog/ 目录下创建Markdown文件，在frontmatter中填写元数据：

1
2
3
4
5
6
7
8
9

---
title: 我的第一篇博客
description: 开始写作之旅
pubDate: 2026-05-01
categories: ["tech"]
tags: ["Astro", "博客"]
---

文章正文...

4. 部署上线 Link to 4. 部署上线

Astro支持多种部署方式，最简单的是通过适配器部署到Vercel、Netlify等平台：

1

npm run build

构建产物在 dist/ 目录，直接上传即可。

性能优化建议 Link to 性能优化建议

1. 图片优化：使用Astro内置的 <Image /> 组件自动处理图片格式和尺寸
2. 字体优化：使用 font-face 配合 font-display: swap 避免布局偏移
3. 代码分割：利用岛屿架构，只在交互组件上加载JS
4. 预渲染：确保所有博客页面都是静态预渲染的

总结 Link to 总结

Astro是搭建博客的绝佳选择，它将性能、开发体验和内容管理做到了很好的平衡。如果你正在寻找一个快速、现代的博客框架，不妨试试Astro。