gatsby vs hexo vs vuepress
静态站点生成器的技术选型对比
搜索包...
gatsbyhexovuepress类似的npm包:

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

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

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
gatsby055,9507.05 MB3531 个月前MIT
hexo041,313678 kB1045 个月前MIT
vuepress022,80214.5 kB6063 年前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 接管。

🛠️ 扩展性对比

能力gatsbyhexovuepress
多数据源✅ 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 vs hexo vs vuepress

  • gatsby:

    选择 gatsby 如果你需要构建高度定制化、内容驱动的营销网站、博客或文档站，并希望利用 GraphQL 统一数据源、React 组件生态以及丰富的插件系统。它适合对性能（如懒加载、预取）有高要求且团队熟悉 React 的项目。但要注意其构建速度在大型站点中可能较慢，且学习曲线较陡。

  • hexo:

    选择 hexo 如果你主要目标是快速搭建一个轻量级个人博客，重视写作体验和部署简单性，且不需要复杂的交互逻辑或组件化 UI。它启动快、配置简洁，适合纯 Markdown 内容发布，但扩展性和现代前端工程能力有限，不适合构建复杂应用式站点。

  • vuepress:

    选择 vuepress 如果你正在编写技术文档、API 手册或需要 Vue 组件嵌入的说明性内容，且团队已使用 Vue 技术栈。它提供开箱即用的主题系统、侧边栏自动生成和 Markdown 增强功能（如代码块高亮、组件嵌入），但定制主题或复杂布局时灵活性不如 Gatsby。

与hexo类似的npm包

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。

与vuepress类似的npm包

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。

gatsby的README

Gatsby

Gatsby

The future of web development is here.

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
It combines the control and scalability of dynamically rendered sites with the speed of static-site generation, creating a whole new web of possibilities.

Gatsby is released under the MIT license. Current CircleCI build status. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome!

Quickstart · Tutorial · Plugins · Starters · Showcase · Contribute
Support: Discussions

Gatsby helps professional developers efficiently create maintainable, highly-performant, content-rich websites.

  • Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.

  • Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.

  • Choose your Rendering Options. You can choose alternative rendering options, namely Deferred Static Generation (DSG) and Server-Side Rendering (SSR), in addition to Static Site Generation (SSG) — on a per-page basis. This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.

  • Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no manual tuning required.

  • Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.

  • Host at Scale for Pennies. Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on Gatsby Cloud and other similar services.

  • Use Gatsby's Centralized Data Layer Everywhere. With Gatsby's Valhalla Content Hub you can bring Gatsby's data layer to any project. Making it accessible via a unified GraphQL API for building content sites, eCommerce platforms, and both native and web applications.

Learn how to use Gatsby for your next project.

🚀 Ship your first Gatsby site in 5 Minutes

Click the link below to quickly try the workflow of developing, building, and deploying websites with Gatsby and Gatsby Cloud.

Deploy to Gatsby Cloud

At the end of this process, you'll have

  1. a site working on Gatsby Cloud
  2. a new repository that is linked to that new site
  3. as you push changes to your new repository, Gatsby Cloud will automatically rebuild and redeploy your site!

💻 Get started with Gatsby locally in 5 Minutes

You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:

  1. Initialize a new project.

    npm init gatsby

    Give it the name "My Gatsby Site".

  2. Start the site in develop mode.

    Next, move into your new site’s directory and start it up:

    cd my-gatsby-site/
npm run develop

  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000. Open the my-gatsby-site directory in your code editor of choice and edit src/pages/index.js. Save your changes, and the browser will update in real time!

At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial.

🎓 Learning Gatsby

Full documentation for Gatsby lives on the website.

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples head to our documentation. In particular, check out the “How-to Guides”, “Reference”, and “Conceptual Guides” sections in the sidebar.

We welcome suggestions for improving our docs. See the “how to contribute” documentation for more details.

Start Learning Gatsby: Follow the Tutorial · Read the Docs

🚢 Release Notes

Wondering what we've shipped recently? Check out our release notes for key highlights, performance improvements, new features, and notable bugfixes.

Also, read our documentation on version support to understand our plans for each version of Gatsby.

💼 Migration Guides

Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v5 to your site without starting from scratch!

❗ Code of Conduct

Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜

🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community!

Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

A note on how this repository is organized

This repository is a monorepo managed using Lerna. This means there are multiple packages managed in this codebase, even though we publish them to NPM as separate packages.

📝 License

Licensed under the MIT License.

💜 Thanks

Thanks go out to all our many contributors creating plugins, starters, videos, and blog posts. And a special appreciation for our community members helping with issues and PRs, or answering questions on GitHub Discussions.

A big part of what makes Gatsby great is each and every one of you in the community. Your contributions enrich the Gatsby experience and make it better every day.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.