用 Astro 搭建个人博客：从零到部署

为什么选择 Astro

在众多前端框架中，Astro 以其 内容优先 的设计理念脱颖而出。对于博客这种内容消费型网站，Astro 的优势非常明显：

零 JavaScript 默认：页面默认不发送任何 JS，加载极快
Content Collections：内置的内容管理系统，类型安全
Islands 架构：需要交互时，按需加载组件

技术栈选择

我们的博客使用了以下技术栈：

技术	用途
Astro	框架
Vanilla CSS	样式
TypeScript	类型安全
Vercel	部署

项目结构

src/
├── blog/           # Markdown 文章
├── components/     # 可复用组件
├── layouts/        # 页面布局
├── pages/          # 路由页面
└── styles/         # 全局样式

Content Collections

Astro 的 Content Collections 让管理 Markdown 内容变得非常简单：

const blog = defineCollection({
  loader: glob({ pattern: '**/[^_]*.md', base: './src/blog' }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

类型安全的查询

const posts = await getCollection('blog');
// posts 是完全类型安全的！

部署到 Vercel

部署非常简单：

将代码推送到 GitHub
在 Vercel 中导入项目
自动检测 Astro 框架
一键部署完成

每次 git push 都会自动触发部署，真正实现了「写完即发布」的工作流。

总结

Astro 是搭建个人博客的绝佳选择。它让你专注于内容创作，而不是被框架的复杂性所困扰。如果你也想搭建自己的博客，不妨试试 Astro！