2022 年我在准备跳槽面试的时候和大部分人一样干了一件特别没有效率的事看到哪篇文章整理得好就收藏公众号、掘金、CSDN 轮着刷收藏夹里堆了二三十个 Markdown 文件、十几个网页链接还有好几个史上最全八股合集。结果真正坐到书桌前复习的时候我根本没翻开过几次。原因很简单——别人的笔记是别人的知识结构我拿过来只能背背完就忘忘了又想背越背越焦虑。后来我换了个思路与其到处收集别人的「面试八股文」不如自己用 VuePress 建一个专属的知识手册把面试复习变成自己写、自己查、自己维护的过程。这个决定让我在接下来一个月里把 Java、数据库、计算机网络、操作系统这些高频考点全部过了一遍而且每一条都记得比死记硬背牢固得多。这篇文章就把我当时从零搭建这套手册的完整过程写出来包括为什么选 VuePress、目录怎么设计、八股文内容怎么写、怎么部署成手机能访问的在线站点。无论你是准备 Java 面试、前端面试、测试岗位还是嵌入式、C 语言岗位这套方法都可以直接照搬只换目录和内容就行。1. 为什么是 VuePress一本「能搜索、能部署、能维护」的本地手册在我决定用 VuePress 之前其实试过好几套工具。Notion、语雀、Typora 文件夹、GitHub 仓库里的 Markdown各有各的好但都差在一个地方——没有一个能同时满足本地编辑、快速检索、在线部署、长期维护四个要求。1.1 市面上笔记工具的「致命伤」如果你也和我一样是程序员大概率经历过这些场景用 Notion / 语雀排版确实好看但打开速度慢而且内容全在别人服务器上。想写代码块得折腾半天想自定义侧边栏或者目录结构基本不可能。用本地 Markdown 文件最灵活但没有检索系统。面试前想查HashMap 扩容过程得在几十个文件里用编辑器全局搜索体验很割裂。用 CSDN / 掘金发文写出来是给别人看的不适合当作个人复习手册。而且平台排版和编辑器各有各的限制代码高亮、目录锚点都不可控。我需要的不是好看的在线文档而是一个可以像查 API 文档一样查面试知识的东西。点开侧边栏左边是分类右边是内容顶部有搜索框输入关键词一秒定位知识点。这就是 VuePress 的强项。1.2 VuePress 与其他方案的核心差异VuePress 是 Vue 官方出的静态站点生成器核心原理很简单你写 Markdown它通过 Vue 组件和 Webpack 把 Markdown 编译成一套静态 HTML 站点。听起来和 Hugo、Hexo 差不多但它有几个对面试手册场景特别友好的特点特点对面试手册的价值Markdown 原生支持直接写 .md 文件不需要学习额外语法Git 友好内置搜索插件本地全文搜索不依赖外部服务隐私且快默认主题自带侧边栏/导航栏天然适合文档型内容面试手册就是一种私人文档构建产物是纯静态文件可以扔到 GitHub Pages / Netlify / 任意静态服务器支持自定义 Vue 组件后期想加随机出题错题标记等功能可扩展性极强对比之下Hexo 更偏博客场景默认结构是按日期归档文章不适合按知识点分类检索。Hugo 虽然分类能力强但默认主题对文档目录的支持不如 VuePress 顺手而且 VuePress 的插件生态在中文社区里非常活跃很多坑别人已经踩过了。1.3 这套方案真正解决什么问题我后来复盘时才想明白VuePress 方案最大的价值不是技术选型正确而是改变了复习的底层逻辑。传统背八股文的路径是看到问题 → 背答案 → 遗忘 → 再看一遍 → 还是忘。这是一种被动输入。VuePress 手册的路径是遇到问题 → 自己整理成笔记 → 写入手册 → 随时检索复习 → 面试前翻目录快速过一遍。这是一种主动构建。你每写一条笔记就是在用自己的话重新解释一遍知识点这个过程本身就是最有效的复习。所以这篇文章虽然标题叫用 VuePress 创造面试八股文手册但实际上教的不是怎么搭网站而是怎么用一套可沉淀、可检索、可迭代的体系来管理你的面试复习。工具只是载体目录结构、内容写法、复习节奏才是核心。2. 初始化一个 VuePress 项目从空目录到本地预览我不建议一上来就去折腾主题、插件、自定义组件。先把最基础的页面跑起来后面所有配置都是在这个基础上叠加。2.1 准备工作Node 环境和包管理器VuePress 是一个 Node.js 应用所以第一步是确认本地有 Node 环境。我当时用的是 Node 14 LTS配合 npm。node -v npm -v如果你还没装 Node直接去官网下载 LTS 版本一路下一步就行。这里有一个小坑不要追求太新的 Node 版本。我身边有朋友直接在电脑上装了最新的 Node 20然后跑某些老项目时各种依赖报错。面试手册这种场景不需要追新稳定压倒一切。npm 在国内下载慢是另一个老问题。如果你发现npm install卡半天可以换成国内镜像源npm config set registry https://registry.npmmirror.com这个操作只改下载源不影响其他任何功能。我自己实测下来装 VuePress 的速度能快好几倍。2.2 创建项目目录与安装 VuePress以我当时的习惯会在工作目录下建一个单独的文件夹比如interview-handbook里面放项目文件。面试手册本身放docs目录下这是 VuePress 的默认文档目录也是约定俗成的用法。mkdir interview-handbook cd interview-handbook npm init -y npm install -D vuepress1.9.10这里我特意锁定了1.9.10版本因为 2022 年那会儿 VuePress 2.x 还处于 beta 阶段插件生态不完善我用 1.x 最省心。如果你现在装直接用npm install -D vuepressnext装 2.x 最新版也可以核心配置思路完全一致只是个别字段写法略有差异。安装完成后在package.json里加上两个常用脚本{ scripts: { docs:dev: vuepress dev docs, docs:build: vuepress build docs } }然后创建文档入口文件mkdir docs echo # 我的面试手册 docs/README.md2.3 启动本地开发服务接着执行npm run docs:dev正常情况下终端会输出一个本地地址比如http://localhost:8080浏览器打开就能看到刚写的我的面试手册几个字。这一步如果报错八成是 Node 版本和 VuePress 版本不兼容。我当时的经验是报错信息里出现digital envelope routines::unsupported说明 Node 版本太高需要降级到 Node 16 以下或者设置环境变量NODE_OPTIONS--openssl-legacy-provider。这个本地开发服务有个非常舒服的点支持热更新。你改完 Markdown 保存浏览器页面自动刷新不需要手动重启。对照着面试题去写笔记时左侧编辑窗口、右侧浏览器预览体验很顺滑。2.4 最容易忽略的目录规范VuePress 的项目结构有一个约定所有文档放在docs目录下docs/.vuepress是配置目录里面放config.js或config.ts作为站点配置。interview-handbook/ ├─ docs/ │ ├─ .vuepress/ │ │ └─ config.js │ ├─ README.md │ └─ ...其余 Markdown 文件 ├─ package.json └─ node_modules/.vuepress目录下还可以放public文件夹用来存放图片、favicon 等静态资源。这个目录结构我建议一上来就遵守不然后期配置导航栏、侧边栏时会非常混乱。到这里一个最基础的 VuePress 项目就搭好了。已经能写 Markdown能本地预览但离好用的面试手册还差很远——下一章是重点目录结构怎么设计才符合面试复习的实际需求。3. 面试八股文的目录架构照着这个结构去建文件夹很多人用 VuePress 记笔记最大的问题不是不会用工具而是不会组织内容。写完一堆 Markdown 文件后侧边栏乱成一团想找一个知识点得点好几层菜单慢慢就不想维护了。我自己的经验是目录结构不是按我学过的技术栈来分而是按面试中实际会考察的维度来分。这样有几个明显好处复习时可以按一个维度集中突破面试官问什么你能立刻回忆起对应分类下的相关知识不会漏掉冷门考点。3.1 目录设计原则从面试场景反推想象你坐在面试官对面他问的问题大概逃不出这几类基础功底类编程语言本身的机制比如 Java 的 JVM、HashMap、并发C 语言的指针、内存管理前端的闭包、事件循环、浏览器渲染。计算机通识类计算机网络、操作系统、数据结构与算法这是很多公司考察的重点。技术栈应用类你用过的框架和中间件比如 Spring Boot、MySQL、Redis、消息队列。工程实践类项目经历、设计模式、系统设计、性能优化、线上故障排查。软技能与 HR 类自我介绍、项目难点、职业规划、离职原因、薪资期望。我当时的目录就是按这五类来拆的每个一级目录下再按具体主题拆二级目录。docs/ ├─ README.md ├─ base/ │ ├─ README.md │ ├─ network/ │ │ ├─ TCP三次握手.md │ │ ├─ HTTPS握手过程.md │ │ └─ ... │ ├─ os/ │ │ ├─ 进程与线程的区别.md │ │ └─ 死锁的条件与预防.md │ └─ algorithm/ │ ├─ 排序算法复杂度对比.md │ └─ 常见动态规划思路.md ├─ language/ │ ├─ README.md │ ├─ java/ │ │ ├─ HashMap底层原理.md │ │ ├─ JVM内存区域.md │ │ ├─ 线程池核心参数.md │ │ └─ ... │ ├─ frontend/ │ │ ├─ 闭包与作用域链.md │ │ └─ 浏览器渲染过程.md │ └─ c/ │ ├─ 指针与数组的关系.md │ └─ 内存分配方式.md ├─ framework/ │ ├─ spring/ │ ├─ mysql/ │ ├─ redis/ │ └─ mq/ ├─ project/ │ ├─ 项目难点素材库.md │ ├─ 系统设计题.md │ └─ 场景题.md └─ interview/ ├─ 自我介绍模板.md ├─ 常见的HR问题.md └─ 反问环节准备.md3.2 一套可直接照抄的分类方案上面这个目录看起来文件很多但实际建起来非常快。每个一级目录里放一个README.md作用是给这个分类写一个总览写清楚这个分类覆盖哪些面试题、复习优先级是怎么样。我通常会在 README 里写三块内容高频题清单、重点难点标记、复习状态。比如base/network/README.md可以写成# 计算机网络面试题 ## 高频考点 - [ ] TCP 三次握手和四次挥手 - [ ] HTTP/1.0、HTTP/1.1、HTTP/2 的区别 - [ ] HTTPS 握手过程 - [ ] TCP 拥塞控制 ## 薄弱环节 - 流量控制和拥塞控制的区别每次都被问到每次答不全不要小看这个 README它其实就是你的复习计划表。很多人复习面试时在一堆文档里迷失方向就是因为没有一个看板去记录进度。用 VuePress 做手册顺手就把这个功能也实现了。3.3 边复习边沉淀增量写作的目录节奏我推荐不要一次性把所有文件都建好再开始写。那样容易陷入完美主义陷阱光想目录就想了三天实际一个字没写。正确节奏是先只建一级目录保证基本框架。遇到一个知识点就在对应目录下新建一个 Markdown 文件。如果某个知识点涉及多个分类就在主分类里写详细内容在其他分类里写一句话链接跳转过去。每周花 10 分钟整理一次把写过的知识点做一下重命名、归类和补充。面试手册的目录永远不是一次定死的它是跟着你的复习进度一起成长的。这也是选择 VuePress 这种 Markdown 驱动站点的好处——目录调整就是文件移动Git 里都能留下记录改错了也能回滚。4. 默认主题的定制导航、侧边栏、搜索和阅读体验VuePress 默认主题已经自带了一套完整的文档风格顶部导航栏、左侧侧边栏、右侧正文、移动端兼容。你不用写一行 CSS只要在config.js里做配置就能把这些能力组织起来。4.1 导航栏与侧边栏别让读者点三下才能看到内容先看我最开始的docs/.vuepress/config.jsmodule.exports { title: 我的面试手册, description: 面试八股文与项目经验沉淀, themeConfig: { nav: [ { text: 首页, link: / }, { text: 计算机基础, link: /base/ }, { text: 编程语言, link: /language/ }, { text: 框架与中间件, link: /framework/ }, { text: 项目与场景, link: /project/ }, { text: HR 面, link: /interview/ } ], sidebar: { /base/: [ { title: 计算机网络, collapsable: false, children: [ [network/TCP三次握手, TCP 三次握手], [network/HTTPS握手过程, HTTPS 握手过程] ] }, { title: 操作系统, collapsable: false, children: [ [os/进程与线程的区别, 进程与线程] ] } ], /language/: [ { title: Java, collapsable: false, children: [ [java/HashMap底层原理, HashMap 底层原理], [java/JVM内存区域, JVM 内存区域] ] } ] } } }这里面有两个关键配置一个是nav控制顶部导航栏一个是sidebar控制左侧侧边栏。sidebar里的children数组有两种写法一种是直接给文件路径[network/TCP三次握手, TCP 三次握手]前面是 Markdown 文件的路径省略.md后缀后面是侧边栏显示的名字。你也可以直接写network/TCP三次握手这样侧边栏显示的名字就是文件名本身。我建议用带显示名的写法因为面试题文件名一般写得比较正式侧边栏里想显示的可以更口语化。4.2 本地全文搜索最容易被低估的功能面试手册写了几百个文件后没有搜索就是一场灾难。VuePress 1.x 默认是没有搜索功能的需要装一个插件npm install -D vuepress/plugin-search然后在config.js中启用plugins: [ [ vuepress/plugin-search, { searchMaxSuggestions: 10 } ] ]装完这个插件后顶部导航栏会自动出现一个搜索框输入关键词就能全文检索。我实测下来中文搜索基本可用速度很快。这里有个插件的坑要提醒vuepress/plugin-search是本地离线的搜索插件它把所有文档内容打包成一个索引文件在浏览器里直接搜索。如果你的手册越来越大几千个文件之后这个索引文件会变得很大首次加载会变慢。但面试手册这种几百个 Markdown 文件的规模完全不用担心。如果你是 VuePress 2.x搜索插件的用法类似但包名变成了vuepress/plugin-search2.x 官方插件库或者vuepress/plugin-docsearch基于 Algolia 的在线搜索需要申请 DocSearch 服务。本地用就选plugin-search即可。4.3 阅读体验的细节调优代码高亮、标题锚点和 Home 页面试八股文里最重要的一类内容是代码示例。VuePress 内置了 Prism 代码高亮默认支持主流语言。只要在 Markdown 里用带语言标识的代码块public class HashMapDemo { public static void main(String[] args) { MapString, String map new HashMap(); map.put(key, value); } }它就会自动按 Java 语法高亮显示。除了代码高亮还有一个小配置特别适合面试手册标题锚点。VuePress 默认会给 Markdown 的标题自动生成锚点鼠标悬停在标题旁边会出现链接图标。这样你在写追问的时候可以在文档里直接链接到另一个相关的知识点形成知识网络。首页docs/README.md也可以好好利用。VuePress 默认主题的首页布局支持heroText、tagline、actions等配置--- home: true heroText: 我的面试八股文手册 tagline: 持续更新中每日复习一遍 actions: - text: 开始复习 link: /base/ type: primary ---这个首页能让你打开手册的时候一眼看到入口而不是从一个干巴巴的列表开始。虽然自己用不需要太花哨但一个明确的开始复习按钮确实能降低每天打开时的心理门槛。5. 八股文内容的写法不是抄题而是造「速查卡」工具搭好了目录建好了最难的部分来了八股文内容到底怎么往里写直接复制粘贴网上的面试题答案是我见过最无效的做法。因为复制粘贴的内容你不会去理解后面复习的时候你看着这段文字完全想不起来它的上下文记忆效果非常差。我建议的写法是把每篇笔记当成一张速查卡遵循一个固定结构问题 → 回答 → 追问 → 记忆锚点。5.1 问-答-追问三件套以 Java 面试几乎必问的HashMap为例。传统笔记可能是整段网上抄来的HashMap 底层原理几百上千字背起来很痛苦。我的写法则是一个问题一个答案一个答案接一个追问## HashMap 底层原理 ### 问题HashMap 的底层数据结构是什么 JDK 1.8 之后是数组 链表 红黑树。数组的下标由 key 的 hash 值取模得到如果多个 key 映射到同一个下标会用链表保存冲突元素。 当链表长度超过阈值默认 8且数组长度大于等于 64 时链表会转成 红黑树降低查询时间复杂度从 O(n) 降到 O(log n)。 ### 追问 1为什么链表长度大于 8 才转红黑树 这是时间与空间的权衡。红黑树节点占用的空间大约是链表节点的两倍 只有在链表足够长、冲突足够多时用树化换取更快的查询速度才划算。 在随机 hashCode 下链表长度达到 8 的概率已经非常低约千万分之六 所以 8 这个阈值是通过泊松分布算出来的一个经验值。 ### 追问 2HashMap 的扩容过程是怎么样的 默认初始容量 16负载因子 0.75也就是说元素个数超过 16 * 0.75 12 时触发扩容。扩容时容量翻倍每个元素需要重新计算在新数组中的位置 这个动作叫 rehash。JDK 1.8 对 rehash 做了优化元素要么留在原位置 要么移动到“原位置 旧容量”的新位置。 ### 记忆锚点 - 数组定位 O(1)链表 O(n)红黑树 O(log n) - 8 是泊松分布算出来的经验阈值 - 加载因子 0.75是空间利用率和查询速度的折中这种问-答-追问的结构其实就是模拟面试官层层深入的提问方式。你写的是面试对话稿而不是教程。复习的时候先看问题自己在脑子里回答一遍再看答案。发现答不上来就把这条知识点标红第二天再来一遍。5.2 写自己看得懂的话这是我想强调的一点面试手册是给你自己看的不是写给读者看的。所以语言风格完全可以用你自己的话。记住一条规则如果你不能用自己的话把知识点讲明白说明你还没真正理解它。我整理八股文时碰到一个完全不懂的概念会先去看资料然后合上资料用自己的手机备忘录把核心逻辑写一遍再整理到手册里。比如TCP 三次握手网上有各种版本的答案但我的笔记里写的是## TCP 三次握手 ### 问题为什么 TCP 建立连接需要三次握手 第一次握手客户端发送 SYN表示“我想和你建立连接”。 第二次握手服务端回复 SYN ACK表示“我收到了我也准备好了”。 第三次握手客户端发送 ACK表示“我收到了你的确认我们开始传数据吧”。 核心原因是TCP 是双工通信双方需要确认彼此的发送和接收能力都正常。 两次握手无法确认客户端的接收能力是否正常所以必须是三次。这种写法比背标准术语更容易记忆因为它是跟着逻辑走的。5.3 用代码、表格、流程图素材作为辅助记忆载体面试八股文不全是纯文字很多知识点配合代码示例更容易记住。比如 JVM 调优、MySQL 索引失效、Redis 缓存穿透这些问题写笔记时把关键代码片段放进去面试时现场复述代码比自己硬编语言要稳得多。表格也很适合做对比记忆。我笔记里经常用表格HTTP/1.0 与 HTTP/1.1 的区别、抽象类与接口的区别、进程与线程的区别。这类对比性知识点用表格整理比用段落清晰得多。这里还推荐一个小技巧给高频题目标记优先级。我通常会在文件名的开头加[高频]或[冷门]标记比如[高频]HashMap底层原理.md。这样在文件列表和侧边栏里一眼就能看出哪些题要优先复习。虽然 VuePress 侧边栏显示名可以自定义但我发现文件名里带标记在编辑器里看文件列表时也很有用。6. 部署上线让面试手册在手机上随时可查手册写到一定程度只有本地文件就不够了。在地铁上、午休时想刷两道题或者在电脑不在身边的时候想临时查一个知识点就需要一个能通过手机浏览器访问的在线版本。VuePress 的构建产物是纯静态文件部署方式非常多。我当时选的是GitHub Pages GitHub Actions的方案推代码自动构建、自动发布全程不用手动scp文件。6.1 构建命令与仓库准备本地先执行构建命令确认能生成dist目录npm run docs:build构建产物的默认输出目录是docs/.vuepress/dist。如果能正常生成说明项目本身没有致命问题可以进入下一步。如果要用 GitHub Pages 部署还需要注意一个配置如果项目部署在https://用户名.github.io/仓库名/这种子路径下config.js里必须设置base为仓库名。比如仓库名叫interview-handbook就要加module.exports { base: /interview-handbook/, // ...其他配置 }这个base配置非常关键很多人部署完打开页面发现样式全丢了就是忘了设置base。如果你没有自己的域名也不想用子路径只想用https://用户名.github.io/这种形式那base可以保持默认的/。6.2 GitHub Actions 自动部署配置在 GitHub 仓库根目录创建.github/workflows/deploy.ymlname: deploy on: push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkoutv2 - name: Setup Node uses: actions/setup-nodev2 with: node-version: 16 - name: Install and Build run: | npm ci npm run docs:build - name: Deploy uses: peaceiris/actions-gh-pagesv3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./docs/.vuepress/dist每次你把 Markdown 内容推送到main分支GitHub Actions 就会自动执行构建并把生成的静态文件部署到gh-pages分支。之后通过https://用户名.github.io/interview-handbook/就能访问。这里有个配置小技巧如果你不想让docs和.vuepress这些源文件污染 GitHub Pages 的发布分支在上面的配置里已经天然做到了——源文件在main分支发布文件在gh-pages分支互不干扰。6.3 部署后的多端同步与复习节奏部署完成之后我最大的感受是面试手册终于从我的电脑变成了我的知识库。手机收藏夹里存着链接早上通勤打开看两篇午休摸鱼的时候看两篇晚上回家在电脑上继续补充新内容推代码后手机刷新就能看到最新版本。Git 本身带来的另一个好处是复习记录有迹可循。每次把笔记推送到 GitHub都会有 commit 记录。我后来翻 commit 历史能清楚看到自己哪段时间在复习哪个方向的题、写了多少篇笔记、改了多少次内容。这种数据反馈在长期坚持时有非常强的激励作用。如果不想用 GitHub Actions也可以直接把docs/.vuepress/dist目录拖到 Netlify 或 Vercel 上它们的免费套餐对个人项目足够用。部署方式可以换核心没变本地写 Markdown构建出静态站点哪里都能放。最后分享一个我实际用下来的习惯这套手册从 2022 年搭好之后我陆续用了很久。后来虽然面试结束了但它变成了我的技术笔记库新学的东西、踩过的坑我都会顺手往对应的分类里塞一笔。它的价值早就超出了面试八股文本身成了一个长期积累的知识资产。如果让我选一个最值得坚持的习惯那一定是每次面试结束不管面上没面上都立刻把被问到的问题补进手册。那些临场没答上来的题就是最宝贵的复习素材。我把它们单独放在一个interview/realtime.md文件里标注日期和结果后面再复盘时特别有针对性。如果你想把这套方案做得更深入还可以继续探索给手册加一个每日一题的随机出题组件或者用 VuePress 的评论插件给每个知识点加上复习标记甚至结合 GitHub Actions 定时提醒自己复习。工具是死的复习方法是活的。希望这篇文章能让你从背别人的八股变成写自己的八股。