Github+docsify零成本輕鬆打造在線文檔網站

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"一、docsify使用背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個好的開源軟件必須要有一個完善的文檔才容易被推廣，那麼我們在如何簡單、高效、低成本的搭建一個文檔網站呢？今天我們使用Github+docsify來零成本輕鬆打造一個在線文檔系統！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同於 GitBook、Hexo 的地方是它不會生成靜態的 "},{"type":"codeinline","content":[{"type":"text","text":".html"}]},{"type":"text","text":" 文件，所有轉換工作都是在運行時。只需要創建一個 "},{"type":"codeinline","content":[{"type":"text","text":"index.html"}]},{"type":"text","text":" 就可以開始編寫文檔並直接"},{"type":"link","attrs":{"href":"https://docsify.js.org/#/zh-cn/deploy","title":""},"content":[{"type":"text","text":"部署在 GitHub Pages"}]},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vue的官方文檔也是使用docsify搭建的：https://cn.vuejs.org"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ed/eda49a4fb3fa6eb81bb2a1f9a48854dd.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主目錄："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0f/0f694c421a91279d4d04e35e4624b8eb.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"二、安裝docsify"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1、安裝node和npm"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這就不詳細說了，網上一搜一大堆。這邊給個鏈接。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.cnblogs.com/xilifeng/p/5538711.html","title":""},"content":[{"type":"text","text":"https://www.cnblogs.com/xilifeng/p/5538711.html"}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2、全局安裝docsify"}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"npm i docsify-cli -g"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注：mac中需要使用root權限，需要加上sudo。"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/57/5791902b4648999a125445f49224270e.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"三、使用docsify創建文檔網站"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1、在github中新建一個項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個項目用來存放我們的文檔內容，後面通過github來發布我們的文檔網站。關於github上如何創建項目，如何clone到本地，這裏就不詳細說了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將項目clone到本地:"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"git clone https://github.com/shelimingming/MJ_mall_doc.git"}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2、初始化項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"進入clone的項目中執行："}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"docsify init ./docs"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/6b/6bfce77dbeb9a9620511e6b0b34e8b93.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"會自動生成以下幾個文件："}]},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":"index.html 入口文件\nREADME.md 會做爲主頁內容渲染\n.nojekyll 用於阻止 GitHub Pages 會忽略掉下劃線開頭的文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3、本地啓動項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"docsify serve docs"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/57/57a5b40aabe7496ec6b547ca1c7d92c8.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本地訪問http://localhost:3000即可看到文檔："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/78/78bb6aee948ef538be079e9961a6534c.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"四、通過github發佈文檔"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1、將生成的代碼提交到github中"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"git add ./\ngit commit -m \"初始化頁面\"\ngit push"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2、設置GitHub Pages"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在Settings中的GitHub Pages中選擇docs文件夾，點擊保存，即可發佈剛剛的文檔網站。通過https://shelimingming.github.io/MJ"},{"type":"text","marks":[{"type":"italic"}],"text":"mall"},{"type":"text","text":"doc/地址即可訪問！"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e8/e849a52e03202d589f9e9af6a46ab4bc.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7c/7c10e3c4028d0f4a9f7f24d673563d5e.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至此，我們就零成本在公網上搭建了一個自己的文檔網站了！！"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3b/3b12b2ac71a08749f1dd3356624317b3.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"五、docsify詳細使用"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"1、設置封面"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"docsify可以很容易的給文檔網站加上一個好看的封面。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在生成的index.html中增加："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後在文檔根目錄創建 "},{"type":"codeinline","content":[{"type":"text","text":"_coverpage.md"}]},{"type":"text","text":" 文件："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"markdown"},"content":[{"type":"text","text":"\n\n# MJ_Mall\n\n> 使用當前最主流Java技術棧，前後端分離的商城系統\n\n* 前端框架：vue-cli、vue-router、vuex、axios\n* 後端框架：Springboot、springcloud alibaba、mybaits\n* 中間件：Mysql、RabbitMQ、Redis、Mongodb、Elasticsearch\n\n[GitHub](https://github.com/shelimingming/MJ_Mall.git)\n[Get Started](#quick-start)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這樣就可以創建出一個顏色隨機的好看的封面了！"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f8/f8bd343b0f9ed64eea27772a89dbdf76.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"2、多頁文檔側邊欄"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在生成的index.html中增加："}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後在文檔根目錄創建"},{"type":"codeinline","content":[{"type":"text","text":"_navbar.md"}]},{"type":"text","text":"文件："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"markdown"},"content":[{"type":"text","text":"* [項目介紹](zh-cn/項目介紹.md)\n* **設計文檔**\n * [接口文檔](zh-cn/設計文檔/接口文檔.md)\n * [數據庫設計](zh-cn/設計文檔/數據庫設計.md)\n* **技術博客**\n * [Github+docsify零成本輕鬆打造在線文檔網站](zh-cn/技術博客/Github+docsify零成本輕鬆打造在線文檔.md)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"項目目錄："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/85/852af09f62a083e29a665dc9ea6be435.png","alt":null,"title":"","style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看效果："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5d/5de95c9527dd4e82dd5ecb03ad7a2287.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"3、設置導航欄"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"非常簡單，在index.html中增加："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":"

\n EN\n 中文\n

\n

"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看效果："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/78/78bfa4c3b4c42b33cae53473e0135013.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"4、右上角github鏈接"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在index.html中增加"}]},{"type":"codeblock","attrs":{"lang":"html"},"content":[{"type":"text","text":""}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果圖："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b6/b6ba4a96f1e3efb756f5c458d7f04e92.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"5、其他插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"docsify還提供了大量插件，例如：全文搜索、emoji、外鏈腳本等等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"詳情見官網："},{"type":"link","attrs":{"href":"https://docsify.js.org/#/zh-cn/plugins","title":""},"content":[{"type":"text","text":"https://docsify.js.org/#/zh-cn/plugins"}]}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"六、總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用Github+docsify可以很輕鬆的搭建在線文檔網站，快來試試吧！！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站："},{"type":"link","attrs":{"href":"https://docsify.js.org/#/","title":""},"content":[{"type":"text","text":"https://docsify.js.org/#/"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後，想了解或參與從零搭建一個全棧的電商網站的同學，可以關注一下公衆號："},{"type":"text","marks":[{"type":"strong"}],"text":"Java全棧封神"},{"type":"text","text":"，該公衆號會使用目前主流Java開發技術：Springboot、springcloud alibaba等，前端技術：Vue全家桶、Element、axios等，還包括微信小程序端。有興趣的同學可以加微信一起提交MR，共同進步。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方網站："},{"type":"link","attrs":{"href":"https://shelimingming.github.io/MJ_mall_doc/#/","title":""},"content":[{"type":"text","text":"https://shelimingming.github.io/MJ_mall_doc/#/"}]}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/72/721543601c0e2ec404fc5bf5737534e9.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}