Docsify快速搭建我的博客

日常寫一些文檔或者我的筆記時，Markdown 是個人第一個選擇，由於它用起來真的很方便、簡潔。那麼今天要講的 Docsify 是什麼呢？

Docsify簡介

Docsify 是一個動態生成文檔網站的工具。不一樣於 GitBook、Hexo 的地方是它不會生成將 .md 轉成 .html 文件，全部轉換工做都是在運行時進行。

這將很是實用，若是隻是須要快速的搭建一個小型的文檔網站，或者不想由於生成的一堆 .html 文件「污染」 commit 記錄，只須要建立一個 index.html 就能夠開始寫文檔並且直接部署在 GitHub Pages。

docsify 中文文檔

全局安裝

安裝腳手架工具 docsify-cli，安裝過程當中較慢的能夠切換 npm 源爲 cnpm

$ npm i docsify-cli -g
複製代碼

Github 建立你的 Blog 項目

若是你正在用 Markdown 寫一些 Blog 項目，那麼也能夠用你如今的項目，若是你沒有，那麼建議你在 Github 新建一個屬於你的 Blog 項目，開始咱們接下來的學習

初始化文檔

注意這裏的文件名約定爲 docs 也是官方推薦，請按照規則設置，不然發到 Github 可能會出現一些問題

$ docsify init docs

Initialization succeeded! Please run docsify serve docs
複製代碼

執行完以上命令 docs 文件目錄下會生成如下 3 個文件：

• index.html：入口文件
• README.md：會作爲主頁內容渲染
• .nojekyll：用於阻止 GitHub Pages 會忽略掉下劃線開頭的文件

啓動本地服務預覽

docs 同級目錄下執行如下命令，打開本地服務器，默認地址爲：http://localhost:3000

$ docsify serve docs

Serving /Users/may/Nodejs-Roadmap/docs now.
Listening at http://localhost:3000
複製代碼

這裏我以 Nodejs-Roadmap 項目作爲介紹，如下爲最終的效果，你也能夠點擊 www.nodejs.red/ 在線預覽。

搭建博客

• 設置封面

設置咱們的封面圖，須要兩步，首先在 docs/index.html 文件中將設置 coverpage: true，以後建立 docs/_coverpage.md文件

docs/index.html

<script> window.$docsify = { coverpage: true } </script>
<script src="//unpkg.com/docsify"></script>
複製代碼

docs/_coverpage.md

<img width="180px" style="border-radius: 50%" bor src="https://nodejsred.oss-cn-shanghai.aliyuncs.com/nodejs_roadmap-logo.jpeg?x-oss-process=style/may">

# Node.js技術棧指南

- 本文檔是做者從事 ```Node.js Developer``` 以來的學習歷程，旨在爲你們提供一個較詳細的學習教程，側重點更傾向於 Node.js 服務端所涉及的技術棧，若是本文能爲您獲得幫助，請給予支持！ [![stars](https://badgen.net/github/stars/Q-Angelo/Nodejs-Roadmap?icon=github&color=4ab8a1)](https://github.com/Q-Angelo/Nodejs-Roadmap) [![forks](https://badgen.net/github/forks/Q-Angelo/Nodejs-Roadmap?icon=github&color=4ab8a1)](https://github.com/Q-Angelo/Nodejs-Roadmap) [GitHub](<https://github.com/Q-Angelo/Nodejs-Roadmap>) [開始閱讀](README.md) 複製代碼

• 定製導航欄

官方支持兩種方式，能夠在 HTML 裏設置，可是連接要以 #/ 開頭，另一種經過 Markdown 配置導航，咱們這裏用的也是後者

首先配置 loadNavbar: true，以後建立 docs/_navbar.md文件.

docs/index.html

<script> window.$docsify = { loadNavbar: true } </script>
<script src="//unpkg.com/docsify"></script>
複製代碼

這裏配置並非很複雜，根據縮進生成對應的目錄結構，注意目錄的跳轉連接是當前 (docs) 目錄下的文件

docs/_navbar.md

* Introduction
 * [簡介](README.md)

* JavaScript
 * [基礎](/javascript/base.md)
 * [This](/javascript/this.md)

...
複製代碼

以上示例生成效果，以下所示：

關於 docsify 定製化，能夠看官方文檔講的也很詳細 docsify 中文版，下面開始介紹如何將咱們的 blog 項目經過 Github Pages 進行在線預覽

GithubPages預覽

將咱們搭建的 Blog 託管到 Github，能夠實時訪問，在項目的 Settings 裏開啓 GitHub Pages 功能

選擇 dcos 文件目錄，以下所示：

瀏覽器輸入 q-angelo.github.io/Nodejs-Road… 便可訪問，q-angelo 爲您的用戶名，Nodejs-Roadmap 爲您的項目名稱。

總結

看完本篇文章，若是你尚未用過 Docsify，但願你能親自實踐下，能夠用 Docsify 來創建本身的我的博客，我在寫做《Node.js 技術棧》過程當中，當內容多了以後，對於文檔的在線預覽功能最終也選擇了 Docsify，由於它用起來給個人感受真的很簡潔，方便。

做者：五月君
連接：www.imooc.com/article/287…
來源：慕課網

閱讀推薦

• 我的博客：www.nodejs.red
• 公衆號：Nodejs技術棧