基于VuePress搭建知识库

news/2024/7/10 2:27:30 标签: 运维, vue

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

准备环境

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

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