我這邊需要搭建一個(gè)運(yùn)維知識(shí)庫(kù)，將項(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í)庫(kù)',
  description: '運(yùn)維人員知識(shí)分享',
  theme: 'vdoing',
  base:'/knowledge/',
  themeConfig: {
    # 導(dǎo)航條
    nav:[
       {text:"首頁(yè)",link:"/"},
       {text:"第三方平臺(tái)",link:"/third/"},
       {text:"數(shù)據(jù)",link:"/data/"},
       {text:"小知識(shí)",link:"/technology/"}
    ],
    sidebar: 'structuring'
 }
}

填充內(nèi)容

修改首頁(yè)docs\README.md

---
home: true
# heroImage: /img/web.png
heroText: 運(yùn)維知識(shí)庫(kù)
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

完成首頁(yè)即可，可以在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í)庫(kù)需要用到圖片服務(wù)器，所以這里也用到了minio,minio操作方式特別簡(jiǎn)單，這里不多介紹。

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è)流程比較簡(jiǎn)單，多看看官網(wǎng)即可解決。之后就是補(bǔ)充內(nèi)容，完善運(yùn)維文檔。文章來源地址http://www.zghlxwxcb.cn/news/detail-675184.html

到了這里，關(guān)于基于VuePress搭建知識(shí)庫(kù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！