教你如何使用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

注意，每次上傳更新代碼，服務不會自動更新，須要手動更新。