用 Astro 搭建个人博客：完整流程 | 四喜班

用 Astro 搭建个人博客的流程其实很短，这里把关键步骤记下来。

搭建流程回顾

1. 初始化项目：npm create astro@latest
2. 添加需要的集成（如图片优化、RSS、Sitemap）
3. 定义内容集合：src/content.config.ts
4. 编写文章，列表与详情页自动生成

内容集合示例

import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";
import { rssSchema } from "@astrojs/rss";

const blog = defineCollection({
  loader: glob({ pattern: "**/[^_]*.md", base: "./src/data/blog" }),
  schema: rssSchema,
});

export const collections = { blog };

文章详情页与阅读时长

详情页通过 getCollection + getStaticPaths 生成静态路由，配合 remark 插件还能自动算出阅读时长。

提示：文章写完只需要放到内容目录，列表、详情页和 RSS 都会自动更新。