生活随笔
收集整理的這篇文章主要介紹了
Github+docsify打造在线文档网站
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
寫在前面
搭建這個在線文檔的目的是方便自己對學習筆記的查看，比較喜歡 docsify 的主題風格，所以沒有用 Github Pages 直接給的主題，自己根據官方文檔進行了配置，目前已經成功上線。
1 效果圖
可直接訪問：https://xiaojing-c.github.io/Learning-records
2 什么是docsify
docsify 是一個動態(tài)生成文檔網站的工具?？梢院唵?、高效、低成本的搭建一個文檔網站。
中文官方文檔：https://docsify.js.org/#/zh-cn/
3 安裝docsify
首先確保自己已經有 node 和 npm 環(huán)境。
npm i docsify-cli -g
使用 docsify -v 查看是否安裝成功
4 使用docsify創(chuàng)建文檔網站
4.1 新建項目
在github上新建一個項目，并clone到本地，如之前已經有項目則可跳過此步驟。
4.2 初始化項目
進入文件夾
使用 docsify init ./docs 來初始化一個項目
初始化成功后，該文件夾下會生成 docs 文件夾，包含以下三個文件
1、index.html 入口文件
2、README.md 會做為主頁內容渲染
3、.nojekyll 用于阻止 GitHub Pages 會忽略掉下劃線開頭的文件、
4.3 本地啟動項目
docsify serve docs
使用 http://localhost:3000 即可訪問
4.4 定制化
參考官網即可。
這里給出我的 index.html 配置。
包含 封面、側邊欄、導航欄、 搜索框 等設置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>XiaoJ's 學習筆記
</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><div id="app">Loading...
</div><script>window.$docsify = {repo: 'https://github.com/XiaoJing-C/Learning-records.git',name: 'XiaoJ\'s 學習筆記',nameLink: '/Learning-records/#/README',coverpage: true,loadSidebar: true,loadNavbar: true,count:{countable:true,fontsize:'0.9em',color:'rgb(90,90,90)',language:'chinese'},search: 'auto',search: {maxAge: 86400000,paths: '/',placeholder: '搜索',noData: 'No Results',namespace: 'website-1',},}</script><script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script><script src="//unpkg.com/docsify-count/dist/countable.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1.24.1/components/prism-java.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1.24.1/components/prism-python.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script>
</body>
</html>
5 設置Github Pages
在 Settings 中的 GitHub Pages 中選擇 docs 文件夾，點擊保存，即可發(fā)布剛剛的文檔網站。
至此，文檔網站搭建完成！
總結
以上是生活随笔為你收集整理的Github+docsify打造在线文档网站的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
