Github+docsify打造個人文件

codeing_docs發表於2019-01-04

簡介

在日常開發中 前後端對接時 經常要寫很多文件Api。docsify就是一個強大的文件生成工具 介面清新好 支援語法高亮和Markdown 語法,並且docsify 擴充套件了一些 Markdown 語法可以讓文件更易讀。像vue.js官網(cn.vuejs.org/)就是docsify 其中的一種注意 並且是目前用的的最多的主題

效果圖如下

預覽連結:a870439570.github.io/interview-d…

在這裡插入圖片描述

在這裡插入圖片描述

快速開始

首先先安裝好npm和nodejs,這裡就不做過多介紹了 自信安裝即可 (blog.csdn.net/zimushuang/…

安裝docsify 推薦安裝 docsify-cli 工具,可以方便建立及本地預覽文件網站。

npm i docsify-cli -g
複製程式碼

初始化專案

# 進入指定檔案目錄 如下:F:\ideWork\githubWork\test_docs 
執行    docsify init ./docs
複製程式碼

在這裡插入圖片描述
初始化成功後,可以看到 ./docs 目錄下建立的幾個檔案

index.html 入口檔案
README.md 會做為主頁內容渲染
.nojekyll 用於阻止 GitHub Pages 會忽略掉下劃線開頭的檔案
複製程式碼

在這裡插入圖片描述

本地預覽網站

執行一個本地伺服器通過 docsify serve 可以方便的預覽效果,而且提供 LiveReload 功能,可以讓實時的預覽。預設訪問http://localhost:3000/#/。

docsify serve docs
複製程式碼

一個基本的文件網站就搭建好了,docsify還可以自定義導航欄,自定義側邊欄以及背景圖和一些開發外掛等等 更多配置請參考官方文件 docsify.js.org/#/zh-cn/qui…

下面介紹docsify如何部署到Github 使用免費的站點

和 GitBook 生成的文件一樣,我們可以直接把文件網站部署到 GitHub Pages 或者 VPS 上

GitHub Pages

GitHub Pages 支援從三個地方讀取檔案

  • docs/ 目錄
  • master 分支
  • gh-pages 分支

上傳檔案至Github倉庫 官方推薦直接將文件放在 docs/ 目錄下,在設定頁面開啟 GitHub Pages 功能並選擇 master branch /docs folder 選項。

在這裡插入圖片描述

此時等待幾秒鐘 就可以訪問了 我這裡使用了自定義域名

Github如何配置自定義域名

在根目錄下建立CNAME檔案 並配置你的阿里雲或其它網站購買的域名

在這裡插入圖片描述

設定頁面 Custom domain 更改域名

在這裡插入圖片描述

進入域名平臺 進行解析 新增繼續記錄 ;型別為CNAME

在這裡插入圖片描述

解析後 等待十分鐘既可開啟了

官方文件 docsify.js.org/#/zh-cn/qui…

預覽連結:a870439570.github.io/interview-d…

相關文章