docsify-文件網站生成工具
阿新 • • 發佈：2020-12-04
docsify 部署流程
- node 環境安裝
#下載node 原始碼包 cd /usr/local/; wget https://nodejs.org/dist/v8.17.0/node-v8.17.0-linux-x64.tar.xz #解壓原始碼包 tar -xf node-v8.17.0-linux-x64.tar.xz #做軟連結接 mv node-v8.17.0-linux-x64 node ln -s /usr/local/node/bin/node /usr/local/bin/ ln -s /usr/local/node/bin/node /usr/bin/ ln -s /usr/local/node/bin/npm /usr/local/bin/
- 安裝並初始化 docsify
npm i docsify-cli -g
#做軟連結
ln -s /usr/local/src/node/bin/docsify /usr/local/bin/
#初始化 docsify ,會自動生成三個檔案，分別為 index.html .nojekyll README.md
index.html 入口檔案
README.md 會做為主頁內容渲染
.nojekyll 用於阻止 GitHub Pages 忽略掉下劃線開頭的檔案
mkdir /root/doc/; cd /root/doc/
docsify init ./docs
- 新建立 git 工程
# 建立git 專案,將 Markdown 文件傳至 git 專案下,例如 k8s.md、 k8shelp.md https://glab.tagtic.cn/testmonetization/doc-dev.git
- 修改後的 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>運維平臺</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="運維平臺文件"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css"> </head> <body> <div id="app"></div> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-go.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-yaml.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-protobuf.min.js"></script> <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-json.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github/index.js"></script> <script> window.$docsify = { name: '運維平臺', repo: 'https://glab.tagtic.cn/testmonetization/doc-dev', homepage: 'README.md', loadSidebar: '_sidebar.md', themeColor: '#3F51B5', auto2top: true, subMaxLevel: 4, topMargin: 20, search: 'auto', plugins: [ EditOnGithubPlugin.create('https://glab.tagtic.cn/testmonetization/doc-dev/blob/master/') ], plantuml: { skin: 'classic', } } </script> <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-plantuml/dist/docsify-plantuml.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script> </body> </html>
- 修改後的 README.md
# cat cat README.md
# 運維平臺
- 新增加_sidebar.md (封面)
# cat _sidebar.md
- 前言
- [k8shelp](k8shelp.md)
- [k8s](k8s.md)
- 目錄結構
# tree
.
└── docs
├── index.html
├── k8shelp.md
├── k8s.md
├── README.md
└── _sidebar.md
- 啟動服務
#將 k8s.md k8shelp.md 拷貝至目錄 /root/doc/docs
cp /root/k8s.md /root/k8shelp.md /root/doc/docs
cd /root/doc
#預設監聽3000埠
docsify serve docs &
- 配置nginx 轉發
# cat monetization.conf
server {
server_name testmonetization.com;
listen 80;
location / {
index index.html;
proxy_pass http://127.0.0.1:3000;
}
}
- 本地繫結host 測試
- 效果圖