基于VuePress搭建知识库

我这边需要搭建一个运维知识库，将项目的方方面面记录下来，方便新手接手运维。

准备环境

• 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中使用存在跨域问题，所以这里需要这样配置。

经过一天的安装配置，正式搭建完成，整个流程比较简单，多看看官网即可解决。之后就是补充内容，完善运维文档。