专业网站建设公司兴田德润简介地域名网址查询
我这边需要搭建一个运维知识库，将项目的方方面面记录下来，方便新手接手运维。
准备环境
- Nginx 1.19.0
- VuePress 1.x
- Minio RELEASE.2022-02-16T00-35-27Z
- vuepress-theme-vdoing主题
安装VuePress
根据官网步骤即可
# 创建目录
mkdir vuepress-starter && cd vuepress-starter# 初始化
npm init# 安装VuePress
npm install -D vuepress# 创建文档 注意这里可能会有问题，需要把文件格式改成UTF-8
mkdir docs && echo '# Hello VuePress' > docs/README.md# package.json加入脚本
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
上述即可正式启动一个VuePress
我这边用了vuepress-theme-vdoing主题，也需要安装一下
npm install vuepress-theme-vdoing -D
然后在.vuepress/config.js指定主题
module.exports = {theme: 'vdoing'
}
这边的config.js目前是以下配置
module.exports = {title: '知识库',description: '运维人员知识分享',theme: 'vdoing',base:'/knowledge/',themeConfig: {# 导航条nav:[{text:"首页",link:"/"},{text:"第三方平台",link:"/third/"},{text:"数据",link:"/data/"},{text:"小知识",link:"/technology/"}],sidebar: 'structuring'}
}
填充内容
修改首页docs\README.md
---
home: true
# heroImage: /img/web.png
heroText: 运维知识库
tagline: 记运维过程中的各种知识，帮助每一个过来运维的负责人更快的投入到工作。
# actionText: 立刻进入 →
# actionLink: /web/
# bannerBg: auto # auto => 网格纹背景(有bodyBgImg时无背景)，默认 | none => 无 | '大图地址' | background: 自定义背景样式 提示：如发现文本颜色不适应你的背景时可以到palette.styl修改$bannerTextColor变量features: # 可选的- title: 第三方平台details: 非本公司平台操作内容link: /third/imgUrl: /img/ui.png- title: 数据details: 数据等内容link: /data/imgUrl: /img/python.png- title: 小知识details: 技术文档、教程、技巧、总结等文章link: /technology/imgUrl: /img/other.png
完成首页即可，可以在docs文件夹下写文章内容。
部署
打包
vuepress build docs
打包完成生成的静态文件会在.vuepress\dist下面。
即可通过nginx部署，这边我是挂在公司的平台下的
location /knowledge {alias /data/knowledge/dist;index index.html index.htm;try_files $uri $uri/ /data/knowledge/dist/index.html;
}
知识库需要用到图片服务器，所以这里也用到了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的图片服务，需要注意在vuepress中使用存在跨域问题，所以这里需要这样配置。
经过一天的安装配置，正式搭建完成，整个流程比较简单，多看看官网即可解决。之后就是补充内容，完善运维文档。