Astro 系列（十二）：框架对比（下）——静态站点方向

astrohugoeleventygatsbyzolassgcomparison

Astro 入门与实战 系列导航

  1. （一）Astro 是什么，解决什么问题
  2. （二）项目结构与开发约定
  3. （三）Island 架构——为什么默认零 JavaScript
  4. （四）内容驱动还是应用驱动——Astro 的边界
  5. （五）SSR 还是 SSG，怎么选
  6. （六）集成生态——从官方到社区
  7. （七）能用 Astro 做什么——扩展玩法全景
  8. （八）View Transitions——让 MPA 拥有 SPA 体验
  9. （九）Middleware、API 端点与认证
  10. （十）第三方服务拼装——评论、搜索、分析
  11. （十一）框架对比（上）——全栈方向
  12. （十二）框架对比（下）——静态站点方向 ← 当前
# 静态站点框架对比 ## Hugo ### Go 实现，超快构建 ### 模板语法限制 ### 主题生态 ### 适用场景 ## 11ty ### JS 驱动，极度灵活 ### 插件系统 ### 模板语言自由 ### 学习门槛 ## Gatsby ### React + GraphQL ### 插件生态庞大 ### 构建越来越慢 ### 云平台加持 ## Zola ### Rust 实现 ### 单二进制 ### Tera 模板 ### 社区较小 ## Astro 的差异化 ### Islands 是降维打击 ### 渐进式交互 ### 框架混用 ### SSG + SSR 混合

静态站点的六个世代

静态站点生成器经历了六个世代：

  1. Jekyll（2008）：开创了 Markdown → 静态 HTML 的范式
  2. Hugo（2013）：Go 语言实现，构建速度的突破
  3. Gatsby（2015）：React + GraphQL，静态站 SPA 化
  4. 11ty（2018）：JavaScript 的灵活性回归
  5. Zola（2018）：Rust 的单二进制哲学
  6. Astro（2021）：岛屿架构，重新定义了什么可以"静态"

每个世代都在某种维度上突破了前一代的限制。

Hugo：速度的标杆

Hugo 是构建速度的代名词。一个 5000 篇文章的站点，构建时间以毫秒计。

核心优势：

  • Go 编译为原生二进制，单文件部署
  • 构建速度在所有 SSG 中断层领先
  • 内置大量功能（分类、多语言、站点地图）无需插件
  • 主题市场成熟

核心劣势：

  • Go 模板语法学习曲线陡峭，表达力有限
  • 无法方便地引入交互组件（需要额外的 JS 构建流程）
  • 主题定制通常需要学习 Hugo 特有的管道语法
  • 生态绑定 Go，前端开发者迁移成本高

什么场景选 Hugo：超大内容量的站点（数千页+）、构建速度是首要指标、不需要复杂交互。

11ty：灵活性的极致

11ty（Eleventy）是 Zach Leatherman 创建的一个"回到基础"的 SSG。不强制任何框架、模板语言、或目录结构。

核心优势：

  • 极致的灵活性——可以混合使用 Nunjucks、Liquid、Handlebars、JavaScript 模板
  • 插件系统简洁好用
  • 零客户端 JS 的核心理念
  • 社区友好，文档出色
  • 与 WebC（Web Components 的服务端渲染）的整合

核心劣势：

  • 没有内置的交互组件方案（不像 Astro 的岛屿架构）
  • 需要自己搭建前端构建流程（Webpack/Vite/esbuild）
  • 学习"如何组织 11ty 项目"本身就是一门学问
  • 大站点的构建速度不如 Hugo

什么场景选 11ty：追求极致灵活性、喜欢自己控制构建流程、团队熟悉 JavaScript。

Gatsby：曾经的王者

Gatsby 在 2019-2021 年是 React SSG 的绝对主流，但它正在被时代抛弃。

核心优势：

  • React 生态完整
  • 插件生态庞大（数据源插件、图片处理插件等）
  • Gatsby Cloud 提供专有构建加速
  • GraphQL 数据层统一数据来源

核心劣势：

  • 构建时间随内容量指数增长——1000 篇文章可能需要 10+ 分钟
  • GraphQL 数据层对简单站点来说过度抽象
  • 配置复杂，插件版本冲突常见
  • React Server Components 的出现让 Gatsby 的水合模式显得过时

Gatsby 仍然是 React SSG 的一个选项，但社区注意力和维护者精力正在向 Next.js 和 Astro 转移。新项目慎选。

什么场景选 Gatsby：已有 Gatsby 项目需要维护、团队深度绑定 Gatsby 生态。

Zola：Rust 信徒的选择

Zola 是 Rust 编写的 SSG，理念与 Hugo 相近——单二进制、无依赖、快速构建。

核心优势：

  • 单二进制文件，安装即用
  • Tera 模板引擎，语法接近 Jinja2/Django，比 Hugo 模板更直观
  • 构建速度快
  • Sass 编译内置
  • 适合 Rust 生态用户

核心劣势：

  • 社区远小于 Hugo 和 11ty
  • 主题和插件数量有限
  • 模板生态不如 JavaScript 系丰富
  • 没有交互组件的解决方案

什么场景选 Zola：Rust 爱好者、喜欢单二进制工具、站点不复杂也不需要交互。

Astro 的差异化：不是"又一个 SSG"

Astro 与这些传统 SSG 的区别不只是"更快"或"更灵活"——它重新定义了"静态"的含义：

传统 SSG 的静态：纯 HTML，无交互。需要交互就得引入完全独立的 JavaScript 方案。 Astro 的静态：默认静态 HTML，在需要的地方渐进增强为交互组件。

这让 Astro 可以覆盖"纯静态不够用，但全 SPA 太重"的灰色地带。在它之前的 SSG，这个地带要么放弃、要么妥协。

Astro 独有的能力：

  • 零 JS 默认 + 按需水合——传统 SSG 做不到
  • 一项目多框架——Hugo/11ty/Zola 做不到
  • SSG + SSR 混合模式——传统 SSG 做不到
  • View Transitions 的 SPA 体验——传统 SSG 做不到

这些能力构成了 Astro 的核心竞争力——它不是"更好的 SSG"，而是"下一代的 SSG"。

选型总结

维度 Hugo 11ty Astro
构建速度 ★★★★★ ★★★ ★★★★
灵活性 ★★ ★★★★★ ★★★★
交互能力 ★ ★★ ★★★★★
学习曲线 ★★ ★★★★ ★★★★
生态规模 ★★★ ★★★ ★★★★
中文社区 ★★ ★ ★★★

没有全满分的框架，只有最适合你场景的框架。

延伸阅读

实操清单

  • 用 Hugo 或 11ty 搭建同一个简单博客，对比开发体验
  • 关注 Astro vs Gatsby 的 npm 下载趋势（npmtrends.com）
  • 如果有旧项目在 Gatsby 上，评估迁移到 Astro 的成本
  • 阅读 Astro 官方的框架对比页面

created by:codex on deepseek v4 pro