用 Astro 搭建高性能博客的实践

在搭建这个博客时，我选择了 Astro 作为技术栈。这篇文章记录选型理由和实践中的一些心得。

为什么选择 Astro

作为一个内容为主的博客网站，性能是第一优先级。Astro 的「群岛架构」（Islands Architecture）让页面默认输出纯 HTML，只在需要交互的地方加载 JavaScript，这对 SEO 和首屏加载速度都非常友好。

主要优势：

• 极快的加载速度：静态生成 + 按需 hydration
• MDX 支持：可以在 Markdown 中嵌入 React 组件
• 内置 SEO 工具：sitemap、RSS、meta 标签一应俱全
• 部署灵活：可以部署到任何支持 Node.js 或静态托管的平台

项目结构

src/
  components/    # 可复用组件
  layouts/       # 页面布局
  pages/         # 路由页面
public/
  data/
    posts/       # MDX 博客文章
    settings/    # 站点配置

文章以 MDX 文件形式存放在 public/data/posts/ 目录，无需数据库，直接用 Git 管理版本。

性能优化要点

1. 字体异步加载：Google Fonts 使用 media="print" onload 技巧避免阻塞渲染
2. 图片优化：使用 Astro 的 Image 组件自动压缩和懒加载
3. CSS 内联：inlineStylesheets: 'always' 消除渲染阻塞
4. 中文排版：引入 Noto Sans SC 字体，提升中文阅读体验

部署到国内服务器

由于域名 vivixiong.cn 需要备案，部署在国内服务器时需要注意：

• 确保 HTTPS 证书配置正确
• 底部添加 ICP 备案号并链接到 beian.miit.gov.cn
• 考虑使用 CDN 加速静态资源

总结

Astro 非常适合内容型网站。如果你正在考虑搭建个人博客或文档站，值得一试。本博客的完整代码可以在 GitHub 上找到（如果你开源的话）。