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 devDocmd
官网,基于Node.js的开源(GitHub,2.2K Star,120 Fork)命令行工具,用于从标准Markdown文件生成轻量级静态文档网站。遵循内容至上理念,强调编写与阅读的高效和简洁体验。
功能
- 原生Markdown支持:兼容标准Markdown与YAML frontmatter
- 多主题与暗色模式:内置语法高亮与多种样式方案
- 轻量与快速:纯静态网站生成,依赖最少JS
- 自定义组件:支持提示框、卡片、步骤等扩展元素
- 内置插件:集成SEO、统计分析、站点地图等功能
- 自由页面:可创建无样式的独立页面,完全控制HTML内容
- 自定义样式与脚本:支持在
frontmatter中直接添加CSS/JS - 简洁CLI命令:提供
init、dev、build等核心命令 - 自由部署:可在GitHub Pages、Netlify、Vercel等任意平台发布
实战
基于npm安装
npminstall-g@mgks/docmdnpminstall--save-dev @mgks/docmd# 项目维度安装docmd init docmd dev docmd build