專業(yè)網(wǎng)站建設(shè)公司興田德潤簡介百度上做優(yōu)化一年多少錢
我這邊需要搭建一個(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)維文檔。