Docsify个人网站搭建详细教程

目录

• 一、什么是 docsify
• 二、安装 docsify
• 三、多页文档设置
• 四、定制化配置
• • 4.1、侧边栏
  • 4.2、导航栏
  • 4.3、封面
  • 4.4、主题
• 五、部署
• • 5.1、部署到Gitee
  • 5.2、部署到云服务器

---

一、什么是 docsify

docsify是一个有魔法的文档网站生成器，它能够动态生成您的文档网站。与GitBook、Hexo不同，它不生成静态html文件，而是智能地加载和解析您的md文件，并将其显示为网站。要开始使用它，只需创建一个index.html并将其部署在GitHub Page/Gitee Page等第三方站点上即可。

官网：docsify

特点：

• 无需构建静态的html文件
• 轻量
• 拥有智能的全文搜索插件
• 支持多主题
• 支持丰富的API插件
• 支持表情符号
• 兼容 IE11
• 支持服务端的渲染

以前曾经折腾过一段时间 hexo 个人静态博客，总体来说还是比较满意的，hexo 也支持md渲染、一键部署、包括很多三方的插件和丰富的拓展性，唯一的不足可能就是相比 docify 配置比较麻烦，两者最大的区别就是当本地文件变更的时，hexo 需要首先通过hexo -c清空目前生成的静态网页文件，然后再通过hexo -g根据本地变更后的新文件构建出一个 public目录存放网站的静态文件，然后如果需要查看效果的话，还需通过hexo -s启动本地的hexo服务，而 Docsify 并不需要构建静态html文件，并且本地文件变更时网站会进行热部署，自动的变更到本地3000端口实时展示，极大的减轻了我们对于网站的管理，能让我们更加专注的进行文档编写或者知识的分享。

---

二、安装 docsify

安装 docsify 之前，我们需要安装npm包管理器，而安装了node.js就会自动安装npm，对于node.js，直接去Node.js官网选择合适的版本进行下载，然后一键安装即可。

zhongsiru@zhongsirudeAir ~ % npm -v
8.3.2

接着我们来全局安装 docsify-cli，这是一个 docsify 的命令行工具，可以帮助我们在本地进行 docsify 的初始化和网站的预览。

npm i docsify-cli -g

然后我们创建一个文件夹，用来存储 docsify 所有的文件，接着输入以下命令进行初始化

mkdir docsify
docsify init ./docsify

可以看到初始化成功了，我们就可以在刚创建的 Docsify 文件夹中查看到README.md和index.html两个文件，此外还存在一个隐藏文件.nojekyll

zhongsiru@zhongsirudeAir Documents % cd Docsify 
zhongsiru@zhongsirudeAir Docsify % tree
.
├── README.md		# 会做为主页内容渲染
└── index.html	# 入口文件
└── .nojekyll		# 用于阻止 GitHub Pages 忽略掉下划线开头的文件

根据上述提示命令，我们便可启动 docsify 的网站，默认在本地的3000端口

我们访问该网址，便可以看到内容

这里渲染的内容就是上述 Docsify 文件夹中的 README.md，我们如果更改该