Skip to content
项目中级2026-10-09·阅读约 1 分钟

禾光知寒 · 个人知识库站点 ​

你正在看的这个网站。从 0 搭一套「Markdown 写内容 + 自定义主题 + 容器化部署」的个人 SRE 知识库,并把它开源。

一、背景 / 目标 ​

AI 工具能快速给出答案,但命令、配置、参数这些东西看过就忘,真到生产环境上手时没法每次从头问。

目标是做一个自己遇到问题能快速搜到、快速回忆处理方法的知识库;同时把可复制的方案分享给同样在路上的运维同学。

二、技术选型 ​

层选型为什么
站点框架VitePress 1.6Markdown 驱动、Vue 3、构建快、默认主题易扩展
图表Mermaid(手动集成)架构图 / 流程图 / 时序图,跟随深浅色
搜索VitePress 本地搜索(MiniSearch)纯前端、无需服务端,Ctrl+K 即用
托管Docker + Nginx纯静态产物,容器化、易迁移
代码托管Gitee(公开,MIT)国内访问快,也会同步 GitHub

三、做了什么 ​

  • 自定义主题:玻璃态(毛玻璃)顶部导航、终端打字机动画 Hero、深浅色一键切换(默认深色、选择被记住)、统一的滚动条与配色 token。
  • 文章元信息条:每篇文章顶部显示分类、难度(初 / 中 / 高)、日期,并按正文长度自动估算阅读时长。
  • Mermaid 集成:没有用会白屏的第三方插件,而是在 Markdown 配置里把 ```mermaid 围栏转成自己写的 <Mermaid> 组件在浏览器端渲染。
  • 内容板块:操作指南、命令速查、排障训练场、面试专区、我的项目,共沉淀 325+ 篇笔记。
  • 单站方案:面经内容并入主站公开访问,废弃了原来「公开 www + 密码私有 q 子站、一份源码构建两次」的方案,减少维护和安全面。

四、踩过的坑 ​

  • 第三方 vitepress-plugin-mermaid 的 withMermaid 在 VitePress 1.6 会白屏 → 改为手动集成(见上)。
  • Mermaid 全量打进首屏 bundle,产生 3000KB+ 的 chunk 体积警告 → 计划改为组件内动态 import() 按需加载。
  • 行内代码里出现 {{ }}(Helm / Docker template 语法)会被 Vue 当插值导致构建失败 → 给这类 <code> 自动加 v-pre。

五、成果 / 复盘 ​

  • 站点稳定上线,内容持续更新;源码开源后可被他人下载、改造成自己的知识库。
  • 复盘:这套「主题 token + 组件 + 纯静态部署」的结构可维护性不错,后续主要补工程化护栏(死链 / 数据校验、监控、SEO 的 sitemap)。

六、相关链接 ​