为什么选择 Astro 构建静态博客

在搭建 zsdn.top 之前，我对比了几种常见的静态站点方案：Hexo、Hugo、Next.js、Astro。最终选择了 Astro，主要出于以下几点考虑。

零 JavaScript 默认输出

Astro 的 Islands 架构让页面默认不输出任何 JavaScript，只有纯静态 HTML。这对于一个以内容为主的博客来说非常关键：

• 首屏加载极快
• SEO 友好
• 对低性能设备更友好

当确实需要交互时，再按需引入组件，而不是整个页面都被 React/Vue 接管。

原生支持 Markdown 与内容集合

Astro 的内容集合（Content Collections）让文章管理非常规范：

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

每个 .md 文件都有类型校验，构建时如果 frontmatter 写错会立即报错，避免发布到线上才发现问题。

灵活的路由系统

Astro 的文件路由非常直观：

• src/pages/index.astro → /
• src/pages/blog/index.astro → /blog/
• src/pages/blog/[slug].astro → /blog/hello-world/
• src/pages/blog/page/[page].astro → /blog/page/2/

分页、标签页、动态路由都能用静态生成的方式实现，无需后端服务。

部署成本低

由于最终产物是静态 HTML，可以部署到任何支持静态托管的服务：

• 阿里云 ECS + Nginx
• 阿里云 OSS + CDN
• Vercel / Netlify / Cloudflare Pages

对于个人博客来说，选择最熟悉、成本最低的方式即可。

总结

Astro 在「内容优先」和「性能优先」之间找到了很好的平衡点。如果你也想搭建一个以文章为主的个人站点，Astro 是一个非常值得尝试的选择。