跳到主要内容

静态站点文档

静态站点文档

Hexo

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

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

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

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

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

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

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

VitePress

VitePress 和 VuePress 有啥区别呢,看了官网介绍才知道,这俩都是 Vue 团队开发的,只不过 VuePress 比较早,而且是基于 Webpack 的,而 VitePress 是 VuePress 的兄弟版,基于 Vue 和 更快的 Vite。而且官方之后会侧重 VitePress。看一下它的样式,和 VuePress 差不多,也是一贯的 Vue 风格。

Docusaurus

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

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

最终的文档结构是这样

Nextra

官网:https://nextra.site/

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

docsify

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

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

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

最后

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

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

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