gatsby vs vuepress vs hexo

静态站点生成器的技术选型对比

gatsby、hexo 和 vuepress 都是用于构建静态网站的流行工具，但它们在架构理念、技术栈和适用场景上有显著差异。gatsby 是基于 React 的现代化静态站点生成器，强调数据层抽象和高性能输出；hexo 是一个轻量级、基于 Node.js 的博客框架，以 Markdown 写作为核心；vuepress 则是由 Vue 团队打造的文档优先的静态站点生成器，深度集成 Vue 生态。三者都支持 Markdown 内容、静态资源处理和 SEO 友好输出，但在扩展能力、开发体验和目标用途上各有侧重。

npm包名称	下载量	Stars	大小	Issues	发布时间	License

gatsby	317,320	55,971	6.99 MB	360	5 个月前	MIT
vuepress	70,879	22,809	14.5 kB	607	2 年前	MIT
hexo	39,599	41,222	678 kB	98	3 个月前	MIT

Gatsby vs Hexo vs VuePress：静态站点生成器深度技术对比

在构建静态网站时，gatsby、hexo 和 vuepress 是三个主流选择，但它们的设计哲学、技术实现和适用边界截然不同。本文从真实工程视角出发，通过代码示例和架构分析，帮助专业开发者做出精准选型。

🧱 核心架构与数据流

gatsby 采用 编译时数据层 + React 渲染 架构。所有内容（Markdown、CMS、API）通过 source 插件统一注入 GraphQL 层，页面组件在构建时查询数据并生成静态 HTML。

// gatsby: 使用 GraphQL 查询 Markdown 数据
import { graphql } from "gatsby";

export const query = graphql`
  query BlogPostQuery($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter { title }
      html
    }
  }
`;

export default function BlogPost({ data }) {
  return <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />;
}

hexo 是 模板引擎驱动的静态生成器，核心流程为：读取 _posts/ 下的 Markdown → 通过 Nunjucks/EJS 等模板渲染 → 输出 HTML。无运行时框架，数据通过全局变量（如 page、site）注入模板。

<!-- hexo: EJS 模板示例 -->
<% page.posts.each(function(post){ %>
  <article>
    <h2><%- post.title %></h2>
    <%- post.content %>
  </article>
<% }) %>

vuepress 基于 Vue 单页应用 + Markdown 编译。每个 Markdown 文件被转换为 Vue 组件，支持在 Markdown 中直接使用 Vue 组件。数据通过 frontmatter 和 Vue 的响应式系统管理。

<!-- vuepress: 在 Markdown 中嵌入 Vue 组件 -->
# 文档标题

<Badge text="beta" type="warning"/>

```js
// .vuepress/components/Badge.vue
<template>
  <span class="badge" :class="type">{{ text }}</span>
</template>
<script>
export default {
  props: ['text', 'type']
}
</script>

📦 内容与数据管理

gatsby 通过 统一 GraphQL 接口 整合多源数据。例如同时拉取本地 Markdown 和远程 CMS：

// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-source-filesystem`, // 本地文件
    {
      resolve: `gatsby-source-contentful`, // Contentful CMS
      options: { /*...*/ }
    }
  ]
};

hexo 仅支持 本地文件系统 作为内容源，依赖 _config.yml 配置元数据。扩展需通过插件修改全局变量：

# _config.yml
author: John Doe
social:
  github: johndoe

vuepress 默认从 文件系统读取 Markdown，但可通过插件扩展数据源。例如使用 @vuepress/plugin-blog 添加分类/标签：

// .vuepress/config.js
module.exports = {
  plugins: [
    ['@vuepress/blog', {
      directories: [{
        id: 'post',
        dirname: '_posts'
      }]
    }]
  ]
};

🎨 主题与定制能力

gatsby 主题通过 React 组件 + Gatsby 插件 实现。可完全控制页面结构、数据查询和样式：

// src/components/layout.js
import Header from "./header";

export default function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
    </div>
  );
}

hexo 主题基于 模板引擎（如 Nunjucks）。修改需编辑 .ejs 或 .pug 文件，逻辑能力有限：

{# themes/landscape/layout.ejs #}
<!DOCTYPE html>
<html>
<head>
  <title>{{ config.title }}</title>
</head>
<body>
  {{ body }}
</body>
</html>

vuepress 主题由 Vue 单文件组件 构成。默认主题提供 Layout.vue 入口，可深度覆盖：

<!-- .vuepress/theme/Layout.vue -->
<template>
  <div class="theme-container">
    <Navbar />
    <Sidebar />
    <Content />
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
export default { components: { Navbar } }
</script>

⚙️ 开发与构建体验

gatsby 提供 热重载开发服务器 和增量构建优化。但大型站点首次构建可能较慢：

# 启动开发服务器
npm run develop

# 构建生产版本
npm run build

hexo 开发体验极简：

# 本地预览
hexo server

# 生成静态文件
hexo generate

vuepress 基于 Vue DevServer，支持 组件热更新 和 Markdown 实时预览：

# 启动开发服务器
vuepress dev

# 构建
vuepress build

🌐 部署与输出

三者均输出纯静态 HTML/CSS/JS，可部署到任何 CDN 或静态托管服务（如 Vercel、Netlify、GitHub Pages）。

gatsby 输出包含 预加载脚本 和 路由分片，支持 PWA。
hexo 输出最简静态文件，无额外运行时。
vuepress 输出 Vue SPA，首屏为静态 HTML，后续交互由 Vue 接管。

🛠️ 扩展性对比

能力	`gatsby`	`hexo`	`vuepress`
多数据源	✅ GraphQL 统一接入	❌ 仅本地文件	⚠️ 需插件扩展
组件化 UI	✅ 完整 React 生态	❌ 模板引擎限制	✅ Vue 组件嵌入
自定义逻辑	✅ Node.js API + 插件系统	⚠️ 通过插件修改全局变量	✅ Vue 生命周期 + Composition API
构建性能	⚠️ 大型站点较慢	✅ 极快	✅ 中等
学习曲线	⚠️ 高（需掌握 GraphQL/React）	✅ 低	⚠️ 中（需 Vue 基础）

💡 选型建议

需要企业级内容站点？ → gatsby：强大的数据管道和 React 生态适合复杂需求。
只想写博客？ → hexo：零配置启动，专注写作本身。
写技术文档？ → vuepress：Markdown 增强 + Vue 组件完美契合 API 文档场景。

注意：截至 2024 年，三者均处于活跃维护状态，无官方弃用声明。但 hexo 社区更新节奏较慢，新特性较少；gatsby 和 vuepress 持续跟进现代 Web 标准（如 Webpack 5、Vite 支持）。

最终，选择应基于 团队技术栈、内容复杂度 和 长期维护成本 —— 而非单纯的功能列表。

gatsby:
选择 gatsby 如果你需要构建高度定制化、内容驱动的营销网站、博客或文档站，并希望利用 GraphQL 统一数据源、React 组件生态以及丰富的插件系统。它适合对性能（如懒加载、预取）有高要求且团队熟悉 React 的项目。但要注意其构建速度在大型站点中可能较慢，且学习曲线较陡。
vuepress:
选择 vuepress 如果你正在编写技术文档、API 手册或需要 Vue 组件嵌入的说明性内容，且团队已使用 Vue 技术栈。它提供开箱即用的主题系统、侧边栏自动生成和 Markdown 增强功能（如代码块高亮、组件嵌入），但定制主题或复杂布局时灵活性不如 Gatsby。
hexo:
选择 hexo 如果你主要目标是快速搭建一个轻量级个人博客，重视写作体验和部署简单性，且不需要复杂的交互逻辑或组件化 UI。它启动快、配置简洁，适合纯 Markdown 内容发布，但扩展性和现代前端工程能力有限，不适合构建复杂应用式站点。

vuepress 是一个为 Vue.js 应用程序设计的静态网站生成器。它旨在为开发者提供一个简单而高效的方式来创建文档和博客。VuePress 的核心是 Vue.js，因此它允许开发者使用 Vue 组件来构建页面，提供了灵活性和可扩展性。除了支持 Markdown 文件，VuePress 还提供了主题和插件的支持，使得自定义和扩展变得更加容易。

尽管 VuePress 提供了强大的功能，但在静态网站生成器领域还有其他一些替代方案。以下是几个备受欢迎的替代品：

gatsby 是一个基于 React 的静态网站生成器，专注于性能和用户体验。Gatsby 通过利用 GraphQL 来处理数据，使得开发者能够从不同的数据源（如 CMS、API 等）中提取数据。它的生态系统丰富，拥有大量的插件和主题，适合构建复杂的静态网站和应用程序。如果你需要一个功能强大且灵活的解决方案，Gatsby 是一个不错的选择。
hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js 构建。Hexo 允许开发者使用 Markdown 来撰写文章，并提供了丰富的主题和插件支持。它特别适合个人博客和小型网站，因其简单易用和快速构建的特性而受到许多开发者的喜爱。如果你想要一个轻量级的博客解决方案，Hexo 是一个很好的选择。

要查看 VuePress 与 Gatsby 和 Hexo 的比较，请访问以下链接：比较 Gatsby vs Hexo vs VuePress。

hexo 是一个快速、简洁且高效的静态博客框架，基于 Node.js 构建。它允许用户通过 Markdown 文件轻松创建和管理博客内容，并提供了丰富的主题和插件生态系统，使得用户可以根据自己的需求进行定制。虽然 Hexo 是一个优秀的选择，但在现代网站构建中，还有其他一些替代方案可供选择。以下是几个常见的替代品：

gatsby 是一个基于 React 的静态网站生成器，旨在帮助开发者构建快速且优化的网页。Gatsby 提供了丰富的插件生态系统，能够与各种数据源集成，如 CMS、API 和数据库。它的强大之处在于其图形化的数据层和出色的性能优化，适合需要复杂数据处理和动态内容的网站。
next 是一个 React 应用程序框架，支持服务器端渲染（SSR）和静态网站生成（SSG）。Next.js 使得开发者能够轻松构建高性能的应用程序，并提供了路由、API 路由和自动代码分割等功能。对于需要动态内容和 SEO 优化的网站，Next.js 是一个非常合适的选择。
nuxt 是一个基于 Vue.js 的框架，提供了类似于 Next.js 的功能，支持服务器端渲染和静态生成。Nuxt.js 使得 Vue 开发者能够快速构建高性能的应用程序，提供了灵活的路由和模块系统，适合需要 Vue.js 生态的项目。
sapper 是一个基于 Svelte 的应用程序框架，旨在提供快速的开发体验和出色的性能。Sapper 支持服务器端渲染和静态生成，适合需要 Svelte 的项目。虽然 Sapper 的社区相对较小，但它的性能和开发体验使其成为一个值得考虑的选项。

要查看 Hexo 与其他框架的比较，请访问：比较 gatsby vs hexo vs next vs nuxt vs sapper。

gatsby

vuepress

hexo