我這邊需要搭建一個(gè)運(yùn)維知識(shí)庫，將項(xiàng)目的方方面面記錄下來，方便新手接手運(yùn)維。

準(zhǔn)備環(huán)境

• Nginx 1.19.0
• VuePress 1.x
• Minio RELEASE.2022-02-16T00-35-27Z
• vuepress-theme-vdoing主題

安裝VuePress

根據(jù)官網(wǎng)步驟即可

# 創(chuàng)建目錄
mkdir vuepress-starter && cd vuepress-starter# 初始化
npm init# 安裝VuePress
npm install -D vuepress# 創(chuàng)建文檔 注意這里可能會(huì)有問題，需要把文件格式改成UTF-8
mkdir docs && echo '# Hello VuePress' > docs/README.md# package.json加入腳本
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

上述即可正式啟動(dòng)一個(gè)VuePress

我這邊用了vuepress-theme-vdoing主題，也需要安裝一下

npm install vuepress-theme-vdoing -D

然后在.vuepress/config.js指定主題

module.exports = {theme: 'vdoing'
}

這邊的config.js目前是以下配置

module.exports = {title: '知識(shí)庫',description: '運(yùn)維人員知識(shí)分享',theme: 'vdoing',base:'/knowledge/',themeConfig: {# 導(dǎo)航條nav:[{text:"首頁",link:"/"},{text:"第三方平臺(tái)",link:"/third/"},{text:"數(shù)據(jù)",link:"/data/"},{text:"小知識(shí)",link:"/technology/"}],sidebar: 'structuring'}
}

填充內(nèi)容

修改首頁docs\README.md

---
home: true
# heroImage: /img/web.png
heroText: 運(yùn)維知識(shí)庫
tagline: 記運(yùn)維過程中的各種知識(shí)，幫助每一個(gè)過來運(yùn)維的負(fù)責(zé)人更快的投入到工作。
# actionText: 立刻進(jìn)入 →
# actionLink: /web/
# bannerBg: auto # auto => 網(wǎng)格紋背景(有bodyBgImg時(shí)無背景)，默認(rèn) | none => 無 | '大圖地址' | background: 自定義背景樣式       提示：如發(fā)現(xiàn)文本顏色不適應(yīng)你的背景時(shí)可以到palette.styl修改$bannerTextColor變量features: # 可選的- title: 第三方平臺(tái)details: 非本公司平臺(tái)操作內(nèi)容link: /third/imgUrl: /img/ui.png- title: 數(shù)據(jù)details: 數(shù)據(jù)等內(nèi)容link: /data/imgUrl: /img/python.png- title: 小知識(shí)details: 技術(shù)文檔、教程、技巧、總結(jié)等文章link: /technology/imgUrl: /img/other.png

完成首頁即可，可以在docs文件夾下寫文章內(nèi)容。

部署

打包

vuepress build docs

打包完成生成的靜態(tài)文件會(huì)在.vuepress\dist下面。

即可通過nginx部署，這邊我是掛在公司的平臺(tái)下的

location  /knowledge {alias /data/knowledge/dist;index  index.html index.htm;try_files $uri $uri/ /data/knowledge/dist/index.html;
}

知識(shí)庫需要用到圖片服務(wù)器，所以這里也用到了minio,minio操作方式特別簡單，這里不多介紹。

location /public-doc/ {proxy_pass http://ip:9000/public-doc/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_send_timeout 60s;proxy_read_timeout 60s;proxy_connect_timeout 60s;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET,PUT,POST,DELETE,OPTIONS';add_header 'Access-Control-Allow-Header' 'Content-Type,*';
}

在這里我是代理了minio的圖片服務(wù)，需要注意在vuepress中使用存在跨域問題，所以這里需要這樣配置。

經(jīng)過一天的安裝配置，正式搭建完成，整個(gè)流程比較簡單，多看看官網(wǎng)即可解決。之后就是補(bǔ)充內(nèi)容，完善運(yùn)維文檔。