One

主题

One2024-12-252025-08-18其它静态站点文档
4149
16.7m
0

文章发布较早，内容可能过时，阅读注意甄别。

静态站点文档 ​

静态站点文档 ​

image-20240814124638230

目录 ​

[toc]

最重要一点 ​

  • 原作者要能持续迭代版本才行，不然二开的项目就废了。

Docusaurus ​

官网：https://docusaurus.io/zh-CN

Docusaurus 是 FaceBook 开源的，用 React 实现。如果熟悉 React 技术栈的，可以用 Docusaurus 搭建博客，方便自己的一些个性化定制。

最终的文档结构是这样

Hexo ​

介绍：快速、简洁且高效的博客框架

star数：36.1k

官网：https://hexo.io

开源地址：https://github.com/hexojs/hexo

😜

官网：https://hexo.io/zh-cn/index.html

和 Hugo 很类似，一共四个字母，俩字母都一样。Hexo 是用 NodeJS 写的，丰富的主题同样支持个人博客、文档、产品官网、落地页这些。

Hugo ​

介绍：用Go写的一个静态网站生成器，号称”==世界上最快的网页生成器==“。

star数：65k

官网：https://gohugo.io/

在线文档：https://gohugo.io/getting-started/quick-start/

开源地址：https://github.com/gohugoio/hugo

😜

官网：https://gohugo.io/

Hugo 是一个快速、现代且高度可配置的静态网站生成器。它是使用 Go 语言开发的，并以简单易用、高效构建和渲染静态网页而闻名。Hugo 的设计目标是提供一个简洁、高性能的工具，以便开发人员可以轻松创建和管理各种类型的静态网站。

Hugo 官网提供了几百种主题样式可供选择。https://themes.gohugo.io，到上面选一个你喜欢的风格。

Astro ​

官网：https://astro.build/

Astro 是这两年迅速发展的一款 CMS 框架，可以用来搭建博客、作品集、文档、落地页、SaaS、营销、电子商务等等。

Astro 相对于很多其他的静态框架更加复杂一点，它有一套自己的模板，类似于 Vue 和 React ，还有自己的约定路由等规则。而且它是与框架无关的，更像一个高级的、功能丰富的脚手架，你可以在它上面集成 Vue、React 进行定制开发。所以，你可以把它当作一个开发框架，类似于 Next.js 那样。

当然，如果你只想用它已有的功能和模板，也完全能够搭建个人博客、官网这些，一点问题没有。而且，官方有丰富的模板可供选择，什么文档类的、博客类的、产品介绍类的，应有仅有。

模板地址：https://astro.build/themes

如果不定制开发的话，上手比较简单，照着官网教程安装一下 NodeJS，找一个模板配置一下就可以了。

🍊

下面这几个基本上就是专门的文档、博客类，上方简单导航，左侧目录导航。

VuePress ​

介绍：VuePress 在一众生成器之中算是一个”后起之秀“，起初由尤雨溪牵头开发。等发展到一定程度之后，将会取代 Hexo 成为 Vue.js 官方文档的生成器。它基于 Vue，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。

star数：21.2k

官网：https://vuepress.vuejs.org/zh/

开源地址：https://github.com/vuejs/vuepress

😜

官网：https://v2.vuepress.vuejs.org/zh/

VuePress 大概是下面这几个中最有名气也是用的最多的了，由名字就能看出来，它是 Vue 开发的，官方定位是 Vue 驱动的静态网站生成器。

应该没有一个开发者没见过类似于下面这样的网站吧。能够流行起来的一大原因可能就是它的这个样式看上去很舒服，比较适合国人的审美。

上手简单，几乎不需要懂前端知识，照着文档来就行了，除非你要进行定制开发。

VitePress❤️ ​

VitePress 和 VuePress 有啥区别呢，看了官网介绍才知道，这俩都是 Vue 团队开发的，只不过 VuePress 比较早，而且是基于 Webpack 的，而 VitePress 是 VuePress 的兄弟版，基于 Vue 和 更快的 Vite。而且官方之后会侧重 VitePress。

看一下它的样式，和 VuePress 差不多，也是一贯的 Vue 风格。

VitePress 与 Docusaurus 有很多相似之处 - 两者都重点关注以内容为中心的网站，并提供开箱即用的定制文档功能。然而，VitePress 由 Vue 提供支持，而 Docusaurus 由 React 提供支持。如果你想要一个基于 Vue 的解决方案，VitePress 将是一个不错的选择。

Nextra ​

官网：https://nextra.site/

Nextra 是基于 Next.js 的静态文档和博客框架，Next.js 是 React 官方首推的 React 脚手架项目。

docsify ​

介绍：Docsify 同样基于 Vue，偏向于文档，动态生成网页，最大的特点是它只有一个 index.html，在你打开网页的时候才开始生成。Docsify 还兼容 IE 11。缺点是对 SEO 并不太友好。

star数：22.6k

官网：https://docsify.js.org/

开源地址：https://github.com/docsifyjs/docsify

😜

官网：https://docsify.js.org/#/zh-cn/

这个框架更简洁了，什么多余的东西都没有，就是左侧导航，右侧内容，连上方导航条都没有。使用起来更是超级简单，应该是这几种里面最简单的了。

有时候本来也不需要那么多花里胡哨的东西，对于单纯某一知识库来说，已经足够了。

Docsify 可以轻松创建文档网站，但不是静态网站生成器，也不利于 SEO。

  • 无构建过程，直接运行

https://mp.weixin.qq.com/s/waFd7p1bLeliQdF6CQQrLQ

image-20250720180254589

GitBook ​

gitbook把重点逐渐从开源工具转向商业产品

GitBook 的设计清爽，诸多开源项目都在使用。 但随着它把重点逐渐从开源工具转向商业产品，它不再符合开源项目文档网站的需要。 结果就是，许多项目转用了其他产品。 你也许在这里听说过 Redux 转投 Docusaurus 怀抱的事情。

目前，GitBook 只对开源和非营利团队免费。 Docusaurus 则对所有人免费。

Jekyll ​

介绍：Jekyll 使用 Ruby 开发，它足够简单，能够让你专注于内容。它有将近四百种主题和两百多个插件，光这两项就足以证明它的优秀。

star数：46k

官网：https://jekyllrb.com/

开源地址：https://github.com/jekyll/jekyll

😜

Jekyll 是最成熟的静态站点生成器之一，并且一直是一个很好用的工具 - 事实上，在 Docusaurus 之前，Facebook 的大多数开源网站都是基于 Jekyll 构建的！上手非常简单。我们希望为开发者带来与使用 Jekyll 构建静态站点类似的体验。

与静态生成的 HTML 和使用 <script /> 标签添加的交互性相比，Docusaurus 网站是 React 应用。使用现代 JavaScript 生态系统工具，我们希望在文档网站的性能、资源构建管道和优化以及易于设置方面制定新标准。

MkDocs ​

介绍：MkDocs 使用 Python 开发，更偏向于文档生成。用户不是特别多，只有十几个主题。

star数：15.8k

官网：http://www.mkdocs.org/

开源地址：https://github.com/mkdocs/mkdocs

😜

MkDocs 是一个流行的 Python 静态站点生成器，其价值主张与 Docusaurus 类似。

如果你不需要单页应用并且不打算利用 React，那么这是一个不错的选择。

适用于 MkDocs 的 Material 是一个漂亮的主题。

Gatsby ​

介绍：Gatsby 作为 GitHub 上面 #static-site-generator 话题最多 Star 数量的项目，基于 React。它超越了静态网站，更强大。可以从任何地方加载数据。

star数：54.1k

官网：https://www.gatsbyjs.org/

开源地址：https://github.com/gatsbyjs/gatsby

😜

Gatsby 包含大量功能，拥有丰富的插件生态系统，并且能够完成 Docusaurus 所做的一切。当然，这是以更高的学习曲线为代价的。Gatsby 在很多方面都做得很好，适合构建多种类型的网站。另一方面，Docusaurus 试图把一件事做得超级好 - 成为编写和发布内容的最佳工具。

GraphQL 也是 Gatsby 的核心，尽管你不一定需要 GraphQL 来构建 Gatsby 站点。在大多数情况下，构建静态网站时，你不需要 GraphQL 提供的灵活性。

Docusaurus v2+ 的许多方面都受到了 Gatsby 最好的东西的启发，它是一个很好的选择。

Docz 是一个用于构建文档网站的 Gatsby 主题。目前它的特性不如 Docusaurus。

Next.js ​

Next.js 是另一个非常流行的混合 React 框架。它可以帮助你构建一个良好的文档网站，但它对文档用例并不有态度，并且需要做更多的工作来实现 Docusaurus 提供的开箱即用的功能。

Nextra 是一个基于 Next.js 构建的有态度的静态站点生成器。目前它的特性不如 Docusaurus。

gridsome ​

介绍：一个免费、开源、基于 vue.js 技术栈的静态网站生成器。

star数：8.4k

官网：https://gridsome.org/

开源地址：https://github.com/gridsome/gridsome

dumi ​

介绍：为组件研发而生的静态站点框架

star数：2.7k

官网：https://d.umijs.org/

开源地址：https://github.com/umijs/dumi

ProComponents是基于dumi进行二次开发的，开源复制其主题进行参考，https://procomponents.ant.design/

ShowDoc ​

官网

https://www.showdoc.com.cn/help/1385767280275683

范例

2024年7月4日发现

https://doc.xiaoz.top/web/#/10/37

BookStack(图书方式) ​

BookStack 是一个开源的文档管理系统，非常适合用来创建和组织文档。

通过 Docker，我们可以轻松地将 BookStack 部署到本地或服务器上。

本文将详细介绍如何使用 Docker 搭建 BookStack。

OneNav书籍方式

2024年3月16日收藏

https://doc.xiaoz.org/books/onenav/page/a1d0c

image-20240316070534102

https://doc.xiaoz.org/

image-20240316070614218

汇总 ​

比较

vuepress、vitepress、docusaurus中哪个更适合作为文档知识库，请输出一个表格来比较两者的区别，并给出建议

VuePress、VitePress 和 Docusaurus 都是非常强大的静态站点生成器，特别适合用于构建文档网站。以下是一个比较表格，列出了这三者的一些关键区别：

特性/功能VuePressVitePressDocusaurus
开发语言Vue.js 2Vue.js 3 + ViteReact
渲染引擎WebpackViteWebpack
启动时间相对较慢快速中等
构建速度中等快速中等
默认主题简洁，适合文档简洁，适合文档功能丰富，适合文档和博客
主题系统支持自定义主题支持自定义主题支持自定义主题
生态系统插件生态丰富插件生态逐渐增长插件生态丰富
插件系统提供多种官方插件和社区插件插件生态尚在发展中提供多种官方插件和社区插件
文档结构基于文件系统基于文件系统基于文件系统
导航支持侧边栏和导航栏支持侧边栏和导航栏支持侧边栏和导航栏
多语言支持内置支持内置支持内置支持
SEO原生支持基本SEO优化原生支持基本SEO优化原生支持基本SEO优化
部署方式静态部署，支持GitHub Pages等静态部署，支持GitHub Pages等静态部署，支持GitHub Pages等
定制化难度中等，需要了解Vue.js中等，需要了解Vue.js中等，需要了解React
热更新支持支持，但启动较慢支持，启动快速支持，启动速度中等
文档搜索支持支持支持
静态文件热更新不支持支持支持
代码高亮默认使用 Prism默认使用 Prism默认使用 Prism
易用性中等，需要熟悉Vue.js高，需要熟悉Vue.js 3 和 Vite中等，需要熟悉React
版本管理支持插件支持插件内置支持
默认首页提供首页简介提供首页简介提供首页简介，带有更多组件和功能
社区活跃度活跃逐渐增长非常活跃
文档和教程丰富，中文支持好丰富，中文支持好丰富，英文为主
迁移成本从VuePress迁移到VitePress相对容易从VuePress迁移到VitePress相对容易从其他平台迁移相对较高
特色功能支持Markdown增强支持Markdown增强支持MDX（Markdown + JSX），博客功能强大
适用场景适合已经有Vue.js 2的项目，或简单文档站点适合新项目，关注性能和启动速度的用户适合复杂文档和博客网站，或已有React项目

建议

  1. VuePress：

    • 优点：适合已经熟悉Vue.js 2的开发者，插件生态丰富。
    • 缺点：启动时间相对较慢，未来可能会被VitePress取代。
    • 适用场景：现有Vue.js 2项目的文档或需要快速构建的简单文档站点。

  2. VitePress：

    • 优点：基于Vue.js 3和Vite，启动速度快，性能好。
    • 缺点：插件生态还在发展中，相比VuePress功能少一些。
    • 适用场景：需要高性能、快速启动的文档站点，或者新的Vue.js 3项目。

  3. Docusaurus：

    • 优点：功能丰富，社区活跃，适合构建复杂的文档和博客网站。
    • 缺点：需要了解React，启动时间相对较慢。
    • 适用场景：需要构建功能复杂、定制化需求高的文档和博客网站，或者已有React项目的文档。

总结

  • 如果你已经熟悉 Vue.js 2，并且需要快速构建一个文档站点，VuePress 是一个不错的选择。
  • 如果你更关注性能和启动速度，并且愿意使用 Vue.js 3，VitePress 是一个很好的选择。
  • 如果你需要一个功能丰富、社区活跃的文档和博客解决方案，并且熟悉 React，那么选择 Docusaurus 是比较明智的。

以上是几个比较简单好用的 CMS 框架。到底用哪一个还要综合考虑，比如：

  • 公司官网、落地页之类的就要考虑 Astro、Hugo、Hexo 这种带有丰富模板的，而知识、文档类的就随意了；

  • 根据自己的需求，如果有定制化需求，那就要看你熟悉的领域了，比如你擅长 React，那就要用支持 React 的，比如 Docusaurus、Nextra 或者 Astro，如果你熟悉 Vue，那就用 VitePress 或 VuePress；

结束。

最近更新