📚 Astro 博客文档撰写指南 - 从零开始！

大家好呀！这里是梦紙～ ✨

今天来给大家分享一下如何用 Astro 写博客！这是我自己摸索出来的经验，希望能帮到大家～

📝 一、准备工作

1. 什么是 Astro？

Astro 是一个现代化的静态网站生成器，特别适合用来写博客！它的优点是：

• 生成的网站速度超快
• 支持 Markdown/MDX 写文章
• 可以用 React/Vue/Svelte 组件
• 主题很多，上手简单

2. 环境准备

你需要安装：

• Node.js（版本 >= 18.0.0）
• 一个代码编辑器（推荐 VS Code）

✍️ 二、开始写文章

1. 找到文章文件夹

所有的文章都放在这里：

1
src/content/blog/

2. 创建新文章

在 src/content/blog/ 文件夹里新建一个 .mdx 或 .md 文件，比如：

• 我的第一篇文章.mdx
• 2026-02-20-hello.mdx
• anime-review.mdx

3. 文章开头（Frontmatter）

每篇文章开头都要写这些信息，用 --- 包围：

1
---
2
title: '文章标题'
3
description: '文章描述'
4
pubDate: 2026-02-20
5
categories: ['分类']
6
tags: ['标签1', '标签2']
7
excerpt: '文章摘要'
8
cover: '/images/封面.jpg'  # 可选
9
---

字段说明：

• title：文章标题
• description：文章简短描述
• pubDate：发布日期
• categories：分类
• tags：标签
• excerpt：文章摘要（显示在首页）
• cover：封面图（可选）

🎨 三、Markdown 语法

常用语法

1
# 一级标题
2
## 二级标题
3
### 三级标题
4

5
**粗体文字**
6
*斜体文字*
7
~~删除线~~
8

9
- 无序列表
10
- 无序列表
11

12
1. 有序列表
13
2. 有序列表
14

15
> 引用文字
16

17
[链接文字](https://链接地址)
18

19
![图片描述](/images/图片.jpg)
20

21
`单行代码`

代码块 可以写多行

🖼️ 四、添加图片

1. 图片存放位置

把图片放到：

1
public/images/

2. 引用图片

在文章里这样写：

1
![图片描述](/images/文件名.jpg)

举例：

1
![博丽灵梦](/images/reimu.png)

🏷️ 五、标签和分类

标签（Tags）

标签是文章的关键词，一篇文章可以有多个：

1
tags: ['动漫', '游戏', '感想']

分类（Categories）

分类比标签更宽泛，用来分组：

1
categories: ['生活', '分享']

🚀 六、预览和部署

1. 本地预览

在终端运行：

1
npm run dev

然后打开浏览器访问：http://localhost:4321

2. 构建部署

1
npm run build

构建完成后，把 dist/ 文件夹上传到服务器就可以了！

💡 七、小技巧

1. 文章置顶：把 pubDate 设成未来的日期（比如 2099-12-31）
2. 草稿文章：不想发布的文章可以暂时放在别的文件夹
3. 封面图：用 cover 字段给文章加封面

🎉 结语

以上就是梦紙整理的 Astro 博客撰写教程啦！希望对大家有帮助～

如果有什么问题，欢迎在评论区留言哦！我们下次再见～ ✨🎐