如何使用docsify搭建本身的github文檔？

時間 2021-02-18

標籤 css html vue java node git github chrome shell npm 欄目 Git 简体版

原文原文鏈接

安裝前提

確認電腦已經安裝好 node 和 npm 環境。若是尚未裝好，那須要執行下面的步驟：
1.進入官網：https://nodejs.org/zh-cn/ ，下載長期支持版。
css

2.安裝就直接下一步就能夠了，默認會把環境變量添加進去。
html

3.直到finish，打開cmd命令行，查看環境變量以及版本。（此時大家看到的應該仍是隻把node.js的根目錄添加到環境變量path）
vue

4.運行命令修改npm的文件夾前綴和緩存目錄,配置鏡像站。java

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm config set registry=http://registry.npm.taobao.org

而後使用npm config list就能夠看到本身的配置：
node

還須要增長一個環境變量，是node的modules的環境變量(個人nodejs在D盤根目錄下，大家的要本身根據實際狀況)：git

D:\nodejs\node_global\node_modules

5.而後若是使用npm安裝了東西，可是找不到該命令，則還須要在Path中，把咱們node的全局文件夾添加進去環境變量中。github

D:\nodejs\node_global

這樣咱們就能夠愉快的安裝東西了。chrome

docsify走起

官網：
https://docsify.js.org/#/shell

廢話我就很少說了，直接安裝docsify-cli :npm

npm i docsify-cli -g

而後咱們創建一個測試文件夾叫note，命令行進入這個文件夾：

cd note
docsify init ./docs

就成功了！！！看到它叫你執行命令,本地啓動一下：

docsify serve ./docs

這樣就能夠在本地http://localhost:3000打開了，神奇~（修改內容後保存就能夠，不須要從新啓動）

美化一下

說實在話，挺醜的，那就美化一下：
先加一個封面，須要在`index.html中，把下面的屬性設置爲true

coverpage: true

而後新建一個文件_coverpage.md:

# Mybatis摸索之路


> 這是我本身的筆記啊啊啊啊

[CSDN](https://blog.csdn.net/Aphysia)
[滾動鼠標](#introduction)

而後它就變成這樣了：

咱們還須要一個側邊欄，再將側邊欄屬性打開：

loadSidebar: true

而後新建一個側邊欄的文件_sidebar.md:

- Note

  - [第一章節](第一章節.md)
  - [第二章節](第二章節.md)
  - [第三章節](第三章節.md)

而後就變成這樣了：

其中中間那部分使用的是README.md的內容，其餘的index.html的內容以下(本身根據須要設置，若是有更高級的需求，建議去官網查文檔！！！)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>docsify-demo</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/vue.css">
</head>

<body>
  <div id="app"></div>
  <!-- docsify-edit-on-github -->
  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
  <!--Java代碼高亮-->
  <script src="//unpkg.com/prismjs/components/prism-java.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>
  <!-- 圖片縮放 -->
  <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
  <!-- 字數統計 -->
  <script src="//unpkg.com/docsify-count/dist/countable.js"></script> 
  <script>
    window.$docsify = {
      name: 'docsify-demo',
      repo: 'https://github.com/Damaer/Mybatis-Learning',
      maxLevel: 5,//最大支持渲染的標題層級
      subMaxLevel: 3,
      homepage: 'README.md',
      coverpage: true,
      loadSidebar: true,
      auto2top: true,//切換頁面後是否自動跳轉到頁面頂部
       //全文搜索
       search: {
        maxAge: 86400000, // 過時時間，單位毫秒，默認一天
        paths: 'auto',
        placeholder: '搜索',
        noData: '找不到結果',
        // 搜索標題的最大程級, 1 - 6
        depth: 3,
      }
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>

</html>

如何部署到github

下面講講如何部署，首先咱們須要有一個遠程的倉庫，我默認你有了，使用命令初始化文件夾，關聯遠程倉庫

git init
git remote add origin "本身在三方代碼託管平臺上所建立倉庫對應的地址"

push代碼到遠程倉庫就能夠了，git的操做就不仔細講了，或者本身把遠程的倉庫先clone下來，再用docsify建立文檔，而後提交，也是ok的。

提交上去以後，咱們須要作一個操做，在settings下有一個GitHub Pages,選擇構建分支和文件目錄便可。我使用的是master，根目錄的docs文件夾。而後你就能夠看到已經發布成功了，直接訪問網址就能夠。

PS：項目是個人其餘項目地址，可是流程是一致的。

坑點

我打不開網址！！！是由於電信會屏蔽一些網站，也就是被qiang了，懂的都懂，若是要訪問的話，能夠修改DNS，或者搞一把梯_子。

【做者簡介】：
秦懷，公衆號【秦懷雜貨店】做者，技術之路不在一時，山高水長，縱使緩慢，馳而不息。這個世界但願一切都很快，更快，可是我但願本身能走好每一步，寫好每一篇文章，期待和大家一塊兒交流。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。