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}}]}