docsify – 生成文档网站简单使用教程

javascript/jquery

浏览数:100

2019-1-1

1. docsify介绍

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件,所有转换工作都是在运行时进行。

这将非常实用,如果只是需要快速的搭建一个小型的文档网站,或者不想因为生成的一堆 .html 文件“污染” commit 记录,只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。

docsify特性

无需构建,写完文档直接发布
容易使用并且轻量 (~19kB gzipped)
智能的全文搜索
提供多套主题
丰富的 API
支持 Emoji
兼容 IE10+
支持 SSR

2. 安装docsify-cli命令行工具

docsify-cli 工具,可以方便创建及本地预览文档网站。

docsify需要本地先安装node, 如果没有安装node,可在node官网选择对应操作系统下载安装:https://nodejs.org/zh-cn/

终端输入npm i docsify-cli -g进行全局安装:

npm i docsify-cli -g

/usr/local/bin/docsify -> /usr/local/lib/node_modules/docsify-cli/bin/docsify
> fsevents@1.2.4 install /usr/local/lib/node_modules/docsify-cli/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/docsify-cli/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> docsify@4.8.6 postinstall /usr/local/lib/node_modules/docsify-cli/node_modules/docsify
> opencollective postinstall

                         Thanks for installing docsify 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.

          👉  Donate: https://opencollective.com/docsify/donate

+ docsify-cli@4.3.0
added 456 packages from 206 contributors in 32.827s

clipboard.png

安装结束后使用docsify -v查看是都安装:

docsify -v

docsify-cli version:
  4.3.0

2.1 初始化一个项目

首先需要创建一个项目目录:

mkdir docsify

计入项目目录后,使用docsify init ./来初始化一个项目:

cd docsify

docsify init ./

Initialization succeeded! Please run docsify serve ./
tree -a

.
├── .nojekyll
├── README.md
└── index.html

初始化成功后,docsify目录会生成如下几个文件:

  1. index.html入口文件
  2. README.md会做为主页内容渲染
  3. .nojekyll用于阻止 GitHub Pages 会忽略掉下划线开头的文件

直接编辑 docs/README.md 就能更新网站内容,当然也可以添加其他.md文件。

2.1 启动本地服务

终端输入docsify serve ./来启动服务:

docsify serve ./

Serving /Users/dragon/tmp/docsify now.
Listening at http://localhost:3000

然后浏览器打开http://localhost:3000就能看见效果。

clipboard.png

文档正在编辑中。。。。

参考资料

docsify中文官网:https://docsify.js.org/

原文地址:https://segmentfault.com/a/1190000017576714