不用打包、无需构建!docsify 帮你一键搞定文档网站

246 阅读2分钟

docsify 是一个轻量级文档生成工具,无需构建,支持 Markdown 文件自动渲染,支持插件扩展和多种部署方式,本文将带你快速上手,并完成一个文档网站的搭建!

Github 地址:github.com/docsifyjs/d…

docsify 是什么?

image.png

如果你正在为项目写文档,但又不想折腾复杂的构建流程,也不想维护一堆静态 HTML 文件,那你一定要试试 docsify。

docsify 是一个基于 JavaScript 的开源文档生成工具,它最大的特点就是“无构建”:你只需要写 Markdown 文件,它就能自动把这些内容渲染成一个美观、交互友好的文档网站。

为什么选择 docsify

相比传统的文档生成工具,docsify 最大的优势就是:

  • 无需构建:写完 Markdown 直接部署,完全零配置;
  • 响应式设计:PC、手机访问都能自动适配;
  • 支持插件:支持搜索、目录自动生成、代码高亮等功能;
  • 自动渲染:无需刷新页面,文档内容自动加载;
  • 部署简单:只要一个 HTML 文件 + Markdown,就能上线。

特别适合那些想快速发布项目文档、产品说明书、学习笔记的网站!

安装 Docsify

只需三步即可基于 docsify 快速搭建出来文档系统!

  1. 全局安装 docsify-cli 命令行工具
npm i docsify-cli -g
  1. 初始化文档目录及结构,运行完成后将在当前目录的 docs 中,生成 index.html、README.md、.nojekyll 这三个文件,在 README.md 中撰写文档即可
docsify init ./docs
  1. 启动 docsify 服务,预览文档效果,运行以下命令后,打开浏览器访问 http://127.0.0.1:3000 即可对 README.md 中撰写的内容进行预览。另外,如果有多个文档,可以在 docs 目录中直接编写对应的MD文件,例如在与 README.md 同目录的位置有一个 guide.md 的文件,则可以通过 http://127.0.0.1:3000/#/guide 进行访问
docsify serve ./docs

image.png

四、如何部署?

docsify 没有后端依赖,部署非常灵活,常见方式包括:

  • ✅ GitHub Pages
  • ✅ Vercel / Netlify 一键托管
  • ✅ 阿里云 / 腾讯云等静态空间
  • ✅ 放进你已有的项目中,嵌入作为帮助中心页

只要能访问 HTML 文件的地方,就能部署!