教你如何使用docsify快速部署优美的在线文档

目录

• 效果演示
• 快速开始
• 个性化定制
• 部署

效果演示

推荐一个很是牛的文档网站生成器：docsify

我经过这个工具，成功将码云上的我的学习笔记发布到GiteePages上，有兴趣的小伙伴能够戳一戳：https://tqbx.gitee.io/javablog/

话很少说，直接上图，文档效果以下：

主页README.md

文章详情页

咋样，默认风格绿色小清新，给个人体验很是nice。除此以外，它还提供许多很是强大的可定制的内容，最主要的是，你只须要敲几行命令就能够快速启动了！

若是你也想拥有一个这样的文档网站，能够查看官方网站：https://docsify.js.org/#/zh-cn/quickstart，讲解十分详细，固然，本文也会作必定的记录。ok，让咱们开始吧。

快速开始

为了演示，咱们事先新建一个目录docsify用来存放待会要下载的内容。

进入docsify目录，打开命令行全局安装 docsify-cli 工具，能够方便地建立及在本地预览生成的文档。

$ npm i docsify-cli -g # 前提要安装好npm环境

初始化项目，咱们直接在当前目录下初始化。

$ docsify init

初始化成功后，咱们能够看到docsify目录下多出三个文件：

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

运行以下命令启动本地服务器，实时预览文档效果。

$ docsify serve # 默认启动当前目录，docsify serve docs表示启动当前目录下的docs目录

ok，接着访问：localhost:3000/，成功出现如下内容。

个性化定制

固然了，运行成功以后，你不免会千方百计去作一些适合本身的定制，好比代码高亮，连接，搜索，字数统计等等功能，你能够按照官网的文档，逐一添加本身喜欢的插件，在刚刚生成的index.html中定制。

我稍微作一下演示，抛砖引玉。

好比，假设我想让个人网站名显示，而且右上角标注github图标：

<script>
    window.$docsify = {
      name: '天乔巴夏',
      repo: 'https://github.com/TQBX'
    }
  </script>

若是你想要统计字数并显示，你能够添加以下插件：

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

并进行以下设置：

window.$docsify = {
  count:{
    countable:true,
    fontsize:'0.9em',
    color:'rgb(90,90,90)',
    language:'chinese'
  }
}

更多插件：https://docsify.js.org/#/zh-cn/plugins

若是你想更换主题，你能够更改css引入：

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css">

部署

部署的方式不少，这里使用Gitee的GiteePages，没啥的，就是国内访问的速度更快一点。

咱们建立仓库并上传文件，点击服务，选择GiteePages

强制使用HTTPS，选择部署目录，默认为整个仓库。

接着访问生成的url便可： https://tqbx.gitee.io/test-docsify

注意，每次上传更新代码，服务不会自动更新，须要手动更新。