前言
在開始之前，請先確保你已經滿足以下兩個條件：
-
自己的電腦上安裝了
Node.js，如果還沒有安裝，可以參照我的另一篇教程Node.js的安裝（多圖版）； -
擁有自己的
Github/Gitee賬號；
快速安裝並開始
安裝
首先使用如下命令在自己的電腦上安裝 docsify-cli 工具，方便後續的創建和預覽自己的文檔網站；
npm i docsify-cli -g
項目初始化
在自己的電腦上創建一個項目文件夾，比如我的是 Docsify，然後進入該文件夾並打開命令行工具，通過如下命令來初始化項目；
docsify init ./
項目目錄結構
經過初始化後，可以發現項目文件夾的目錄結構如下，主要有三個文件，其功能如下：
.
.nojekyll
index.html
README.md
-
index.html: 入口文件，也叫配置文件，相關配置均在其中； -
README.md: 作爲主頁內容渲染； -
.nojekyll: 防止Github Pages忽略下劃線開頭的文件；
本地預覽
當我們編輯好文檔後，想要在本地預覽時，可通過如下命令運行本地服務器，然後在瀏覽器中訪問 http://localhost:3000 進行實時預覽（其中 3000 端口是 docsify 默認訪問端口）；
docsify serve ./
項目配置
配置文件 index.html
該文件中主要配置了文檔網站的名字以及開啓一些配置選項，比如我修改後的配置如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>村雨遙</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
</head>
<body>
<div id="app"></div>
<!-- docsify-edit-on-github -->
<script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
<script>
window.$docsify = {
name: '村雨遙',
repo: 'https://gitub.com/cunyu1943/cunyu1943',
maxLevel: 5,//最大支持渲染的標題層級
subMaxLevel: 3,
homepage: 'README.md',
coverpage: true, // 封面
loadSidebar: true, // 側邊欄
autoHeader: true,
notFoundPage: true, // 找不到頁面時
auto2top: true,//切換頁面後是否自動跳轉到頁面頂部
//全文搜索
search: {
//maxAge: 86400000, // 過期時間，單位毫秒，默認一天
paths: 'auto',
placeholder: '搜索',
noData: '未找到結果',
// 搜索標題的最大程級, 1 - 6
depth: 3,
},
plugins: [
EditOnGithubPlugin.create('https://githee.com/cunyu1943/cunyu1943/')
],
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<!--Java代碼高亮-->
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>
<script src="//unpkg.com/prismjs/components/prism-python.js"></script>
<!--全文搜索,直接用官方提供的無法生效-->
<script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script>
<!-- 複製到剪貼板 -->
<script src="//unpkg.com/docsify-copy-code"></script>
<!-- emoji -->
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
<!-- 圖片縮放 -->
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
<!-- 字數統計 -->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
</html>
側邊欄
上述配置中側邊欄已經打開，即 loadSidebar: true，此時新建一個 _sidebar.md 文件，在其中加入你所要顯示的內容；
封面
上述配置中封面已經打開，即 coverpage: true，此時新建一個 _coverpage.md 文件，在其中加入你所要顯示的內容，比如我的封面；
主頁內容
即 README.md 的內容，比如我的最終結果顯示如下；
更多
如果還需要了解更多詳情，可以訪問官網教程；
部署
進行上述操作之後，我們就可以將其部署到 GitHub Pages，然後供別人訪問了是不是很激動，部署詳情如下：
新建倉庫
即和平常創建的步驟一樣，但是要注意打開 Github Pages 功能；
提交項目
將本地的項目提交到遠程；
預覽
在瀏覽器中訪問創建倉庫時的給的網址即可在線預覽我們的網站了，比如我的是：https://cunyu1943.github.io/cunyu1943，默認會顯示封面頁；
總結
經過上述的配置之後，我們就成功利用 docsify 成功搭建自己的文檔類型網站了。