静态文档网站:Docsify、GitBook、Docmd

静态文档网站:Docsify、GitBook、Docmd

Docsify

官网,开源(GitHub,31.4K Star,5.8K Fork)文档网站生成器,不会生成静态HTML文件。通过轻量级JS引擎,在运行时直接动态加载并解析Markdown文件。

设计理念:

  • 无需静态构建:只需把Markdown文件往服务器上一放,用户访问时浏览器会自动渲染;
  • 极简配置:通过全局变量window.$docsify即可完成几乎所有功能的配置,门槛极低;
  • 多主题支持:官方提供多款清新脱俗的主题,也支持自定义CSS,轻松打造个性化界面;
  • 插件生态强大:核心极其轻量,插件系统如:全文搜索、代码高亮、图片缩放、Emoji渲染、目录折叠,都能通过引入一行脚本轻松实现;
  • 响应式设计:原生支持移动端,文档在手机和平板上依然拥有极佳的阅读体验。

实战

npmi docsify-cli-gdocsify init ./docs docsify serve ./docs

./docs目录下会生成三个核心文件:

  • index.html:入口文件,包含配置信息
  • README.md:默认的主页内容
  • .nojekyll:用于防止GitHub Pages忽略以底杠开头的目录

浏览器访问http://localhost:3000,就能看到漂亮的文档界面。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我的技术手册</title><linkrel="stylesheet"href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"></head><body><divid="app">加载中...</div><script>window.$docsify={name:'My Docs',// 项目名称repo:'https://github.com/docsifyjs/docsify',// 右上角挂件地址loadSidebar:true,// 开启侧边栏定制subMaxLevel:3,// 目录显示到三级标题search:{placeholder:'搜索',// 搜索框占位符noData:'找不到结果',depth:6}}</script><scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script><scriptsrc="//cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script></body></html>

解读:通过简单的JS对象配置侧边栏和搜索功能。当你需要增加新的文档章节时,只需修改_sidebar.md文件并新建Markdown即可,完全不需要重新运行任何构建命令。

对比

  • GitBook:GitBook曾经是行业标准,但由于其商业化转型和CLI停止维护,使用体验逐渐下滑。比GitBook更轻、更自由,且完全开源免费;
  • 与VuePress/VitePress对比:VuePress在构建SEO友好的静态页面方面更胜一筹(因为它会预渲染HTML),但它的配置相对复杂,且每次修改都需要npm run build。如果你是做一个内部项目手册或对SEO要求不是极高,Docsify的“即时渲染”优势将节省大量时间。
  • 资源消耗:Docsify只有一个文件,不仅托管方便,对服务器的存储压力也几乎为零。

GitBook

官网,开源(GitHub,29K Star,4.1K Fork)现代化的文档平台,支持团队协作,可以在上面写产品文档、内部知识分享、接口文档等。官方文档,中文文档。

GitHub双向集成:在GitBook上创建的文档可同步到GitHub仓库,每次对文档的修改都会生成一个提交,GitBook会自动推送到GitHub;反之,往GitHub提交的内容也会自动同步到GitBook。

实战

至少有两种使用方式:

  • 官方SaaS平台
  • 本地部署

打开SaaS平台,使用GitHub授权登录:

有5种开始方式:文档模板、导入文档、从头开始、OpenAPI、Git同步。

以导入为例,支持本地文件,如markdown

导入md文件仅133KB,看起来导入成功,刷新后,啥也没有?(别慌,数据都在,看下文)

创建工作空间(space)

空间是由一个个块(block)组成,可对任一块进行评论:

空间支持的导出操作

点击空间的预览(preview),变成文档站点(doc site)

文档站点支持的操作

在文档站点内,点击右上角的编辑(Edit),添加页(Page)

页支持多种类型

还是导入本地文件来得最快,这次换个小文档,1个12KB的md文件,十几秒左右导入。

记得点击右上角的Merge,发起合并:

否则文档的更改不生效。

点击页面右上角的变更请求(Change requests)

可看到之前的导入动作

再看看页面右上角按钮

出现【更新(Update)】按钮是因为这个变更请求是更早发起的,但一直未合并。(不熟悉GitBook操作流程和路径,重试,导入文档,已合并更晚的请求提交)。

此时直接点击合并(Merge),会再次提醒

官方推荐更新(Update),而不是强制合并(可能会发生冲突),但这不就导致已合并的文档发生丢失吗??别慌

点击右侧的对比操作区

点击被删除的页,点击右侧的更多,选择【Restore deleted page】,两个Page都得到保留

终于来到GitHub集成,点击右上角

当前支持GitHub和GitLab

选择仓库

此处需要提前到GitHub新增仓库,新打开的跳转标签页只有读权限(在跨平台集成场景下,也很正常,GitHub给GitBook开放读取权限)。

这个地方又踩了坑:先在GitBook创建3个Page,然后选择同步一个空的GitHub仓库,选择同步后,GitHub空仓库把GitBook给覆盖,GitBook页面都没了。。。

这啥啊

别慌!!!在GitHub里,有版本控制概念,可以时空穿梭,GitBook是不是也可以?

点击已同步(Synced)图标

点击配置同步

来到页面,选择下次同步(Next sync)按钮


点击保存。

点击图标

查看版本历史:

如上图,这就是此前说的变更请求合并顺序(3->1->2)。

点击版本记录,更多按钮

有5个操作,2个是版本相关:选为基础版本(Select as base version)、回滚到此修订(Revert to this revision);另外3个预览和复制。

点击删除动作版本的前一个版本,点击更多按钮,回滚到此修订。

GitBook页面正常:

注意看这里的页顺序。

再看看GitHub,有一次自动提交:

几个观察:

  • 提交者是机器人:gitbook-bot
  • GitHub之前的README.md是空白的,自动把Page1也就是PG.md替换掉README.md
  • 自动生成SUMMARY.md,即目录列表

概述(overview):可借助于AI生成

库(library)类型有5种

AI增强体现在各个方面,除了上面的概述生成。

在页顶部,除了搜索框,有个Ask按钮:

默认打开GitBook Assistant,这也是AI集成最最常见的形式:

底层使用的模型暂未可知。

对页发起提问(Ask),还有其他生态集成形式,如打开ChatGPT或类似网页端应用,阅读此页面(需要应用支持联网能力),进而发起提问。

Agent:

基于源码本地部署

gitclone https://github.com/gitbookIO/gitbook.git buninstallbun dev

Docmd

官网,基于Node.js的开源(GitHub,2.2K Star,120 Fork)命令行工具,用于从标准Markdown文件生成轻量级静态文档网站。遵循内容至上理念,强调编写与阅读的高效和简洁体验。

功能

  • 原生Markdown支持:兼容标准Markdown与YAML frontmatter
  • 多主题与暗色模式:内置语法高亮与多种样式方案
  • 轻量与快速:纯静态网站生成,依赖最少JS
  • 自定义组件:支持提示框、卡片、步骤等扩展元素
  • 内置插件:集成SEO、统计分析、站点地图等功能
  • 自由页面:可创建无样式的独立页面,完全控制HTML内容
  • 自定义样式与脚本:支持在frontmatter中直接添加CSS/JS
  • 简洁CLI命令:提供initdevbuild等核心命令
  • 自由部署:可在GitHub Pages、Netlify、Vercel等任意平台发布

实战

基于npm安装

npminstall-g@mgks/docmdnpminstall--save-dev @mgks/docmd# 项目维度安装docmd init docmd dev docmd build