随着 AI 编程工具的日益成熟对于我们个人而言只要拥有一个想法将其变为项目和产品的难度已经大大降低。无论是否有编程经验我们每个人都可以扮演产品经理、全栈开发等角色。最近我正好有一个想法想和大家分享下我从想法到项目的完整经历。项目背景最近公司毫无征兆地裁掉了一部分同事所以我打算重启刷面试题的计划。一方面是为了巩固基础知识另一方面也希望能以面试题为切入点了解和学习一些 AI 相关的知识。基于这个目的我发现单纯看面经很容易忘记也达不到预期的效果。如果通过编码或写文档的方式走一遍效果可能会更好。然而常规的 Markdown 编辑器或在线文档功能有限有的数据保存在本地无法同步有的功能不全有的无法分享还有的不能与他人交流。因此一个可以免费部署到公网、支持多设备共享、便于与他人交流、并且可以个性化定制的项目变得十分必要。这正是我今天要介绍的这个项目的由来。项目信息及效果项目 GitHub 地址https://github.io/xiuji008/xjdoc-interviewGitHub Pages 部署后的 Web 地址https://xiuji008.github.io/xjdoc-interview/项目文档地址https://xiuji008.github.io/xjdoc-interview/#/docs/README首页、文档结构树、顶部栏阅读数、分类、标签、介绍评论提示sequencechart图表项目开发工具开发 AI 工具CodeBuddy CN开发流程第一步创建文件夹创建一个项目目录并使用 CodeBuddy CN 打开。第二步确认方案打开 CodeBuddy CN 对话框我使用的是Craft模式模型选择Deepseek-V4-Flash并输入以下内容基于以下文档先设计方案及技术选型设计完成后找我确认确认完成后在进行开发 ## 项目背景 将面试相关的文档分类整理后放在一个目录中 docs/ ├── java/ │ ├── java基础/ │ │ ├── collection.md │ ├── cli/ │ └── web/ ├── ai/ │ ├── skills/ │ ├── db/ │ └── shared/ ├── README.md ├── CONTRIBUTING.md 现在我想做一个 Node 项目需实现以下功能 1. 按文件目录生成左侧文档结构树 2. 每添加一篇 md 文件通过 GitHub Pages 部署后可在页面查看 3. 每篇文章头部都添加 YAML Front Matter并据此在每篇文章头部渲染出一块区域展示如 title、tags、category、slug 等配置信息 4. Markdown 中包含 mathjax!、mermaid sequenceDiagram、mermaid! 等语法的代码块也需要支持渲染 5. 基于 GitHub 实现评论功能如果可以希望增加阅读数统计。第三步生成代码根据具体情况进行多轮对话调整在对话框中选择技术选型及设计方案确认后会进行代码生成。生成之后根据实际效果进行多轮对话修正。第四步推送到 GitHub进行环境变量等一系列配置第五步调试 GitHub Pages 构建并查看页面第六步让工具总结生成 README至此整个项目完成了从想法到开发再到部署的全流程。项目耗时这个想法萌生于早上通勤的路上。到公司后我便利用工作间隙开始了尝试。整个开发过程完全交给 AI我只需要清晰地描述需求并在它生成代码后进行验证和对话调整。到下午下班时项目已基本成型。晚上回家后我又集中花了约 3 个小时进行细节调优、多轮对话修正以及 GitHub Pages 的部署配置。总计耗时白天零散的“摸鱼时间” 晚上集中的 3 小时。从想法到可公网访问的完整项目上线实际投入的净时间不到一天。项目说明以下将对项目的系统架构、核心功能、使用方法及部署方式做详细说明。面试知识库 面试文档知识库系统支持自动扫描 Markdown 文档、渲染图表/公式/流程图通过 GitHub Pages 一键部署。一、系统架构前端 SPA源码docs/ *.mdscripts/build-manifest.jspublic/docs-manifest.jsonindex.htmlsrc/main.jsxApp.jsxSidebarArticleViewMarkdownRendererChartBlock / MermaidBlock / CodeBlockComments / PageViews技术栈层技术用途构建Vite 5开发服务器 生产构建UI 框架React 18SPA 页面组件路由react-router-dom 6HashRouter 页面切换Markdownreact-markdown 9核心渲染引擎数学公式KaTeX remark-math rehype-katexLaTeX 公式渲染图表Recharts饼图、柱状图、折线图等流程图Mermaid流程图、时序图、状态图文档扫描gray-matter (Node)构建时提取 YAML Front Matter部署GitHub Actions自动构建并部署到 Pages二、全部功能及用法2.1 左侧文档树构建时自动扫描docs/目录生成文档树按目录层级展示。支持展开/折叠和搜索。效果页面加载后左侧显示文件树 java java基础 collection cli web ai skills 机器学习基础 README CONTRIBUTING用法只要在docs/下放.md文件构建时自动收录2.2 YAML Front Matter 卡片每篇.md文件头部用---包裹的元信息渲染为蓝色主题卡片。效果╔═══════════════════════════════════════════╗ ║ Java集合框架详解 ║ ║ 分类: Java/Java基础 2024-01-15 ║ ║ [Java] [集合] [面试] ║ ║ 全面梳理 Java 集合框架核心知识点... ║ ╚═══════════════════════════════════════════╝写法---title:Java集合框架详解tags:[Java,集合,面试]category:Java/Java基础slug:java/java基础/collectionemoji:description:完整的中文描述created:2024-01-15updated:2024-03-20---2.3 数学公式KaTeX支持行内公式和块级公式。效果行内E m c 2 E mc^2Emc2块级∫ − ∞ ∞ e − x 2 d x π \int_{-\infty}^{\infty} e^{-x^2} \, dx \sqrt{\pi}∫−∞∞e−x2dxπ写法行内公式$E mc^2$ 块级公式 $$ \int_{-\infty}^{\infty} e^{-x^2} \, dx \sqrt{\pi} $$也支持 mathjax 代码块mathjax f(x) \sum_{i1}^{n} i^2 2.4 图表Recharts支持pie、bar、line、area、radar五种图表。效果彩色可交互图表鼠标悬停显示数据写法chart { type: pie, title: 技术栈分布, data: [ { name: Java, value: 40 }, { name: Python, value: 25 }, { name: 前端, value: 20 } ] } 各图表类型类型说明关键字段pie饼图/环形图angleField,colorFieldbar柱状图xField,yFieldline折线图xField,yFieldarea面积图xField,yFieldradar雷达图xField,yField2.5 流程图/时序图Mermaid效果添加文档Git PushGitHub Actions部署 Pages写法mermaid graph TD A[添加文档] -- B[Git Push] B -- C[GitHub Actions] C -- D[部署 Pages] 时序图mermaid sequenceDiagram participant A as 客户端 participant B as 服务端 A-B: 请求 B--A: 响应 支持所有 Mermaid 类型类型代码块语言说明流程图mermaidgraph TD / LR / BT时序图sequencesequenceDiagram饼图mermaid内置pie语法类图mermaidclassDiagram甘特图mermaidgantt状态图mermaidstateDiagram2.6 代码块 复制按钮所有代码块自动添加语言标签和复制按钮。效果┌─ java ──────────────────── 复制 ─┐ │ │ │ public class Hello { │ │ public static void main(..) │ │ } │ │ │ └─────────────────────────────────────┘点击复制按钮 → 自动复制到剪贴板按钮变为 ✅ 已复制1.8 秒后恢复。写法java public class Hello { public static void main(String[] args) {} } 不写语言也自动渲染为代码块 纯文本代码块 2.7 GitHub Alert 提示5 种颜色不同的警报提示块。效果[!NOTE]蓝色提示用于补充信息[!TIP]绿色提示用于小技巧[!IMPORTANT]紫色提示用于重要信息[!WARNING]橙色提示用于警告[!CAUTION]红色提示用于谨慎操作写法 [!NOTE] 提示内容写在这里类型颜色适用场景NOTE蓝补充信息TIP绿实用技巧IMPORTANT紫关键信息WARNING橙注意提醒CAUTION红风险警告2.8 表格Pipe Table标准 GFM 表格语法。效果带边框的格式化表格算法类型优点线性回归回归简单决策树分类可视化写法| 算法 | 类型 | 优点 | |------|------|------| | 线性回归 | 回归 | 简单 | | 决策树 | 分类 | 可视化 |2.9 阅读量统计基于 GitHub Gist API 的跨设备阅读量计数器。效果文章头部显示 ️ N每次浏览 1启用步骤① 创建 Gist访问 gist.github.com → 右上角→ New gist文件名counts.json内容{}选Create secret gist创建后 URL 形如https://gist.github.com/xiuji008/abc123复制 Gist ID最后一段abc123② 生成 Token访问 GitHub Settings → Tokens (classic) → Generate new token只勾选gist权限生成后复制 Token③ 填入配置// src/utils/gistCounter.jsconstGIST_ID你的GistIDconstGIST_TOKENghp_xxxx 仅 gist 权限不影响代码仓库⚠️ Token 会打包到前端 JS务必只勾选gist权限定期更换更安全。2.10 评论系统giscus基于 GitHub Discussions 的评论区无需 OAuth App无 token 泄露风险。效果文章底部展示 GitHub 风格的评论区每篇文章独立讨论启用步骤仓库 Settings → Features → 勾选Discussions访问 giscus App → Install → 选本仓库访问 giscus.app 填入xiuji008/xjdoc-interview获取 ID将repoId、categoryId填入// src/components/Comments.jsxconstGISCUS_CONFIG{repo:xiuji008/xjdoc-interview,repoId:R_kgDOSoPcRg,category:Announcements,categoryId:DIC_kwDOSoPcRs4C94wU,}使用data-mappingspecificdata-term{slug}按文章独立分页支持 GitHub Reactions❤️ 等三、项目目录结构xjdoc-interview/ ├── docs/ # 文档源文件 │ ├── java/ │ │ ├── java基础/collection.md │ │ ├── cli/ │ │ └── web/ │ ├── ai/ │ │ ├── skills/ │ │ ├── db/ │ │ └── shared/ │ ├── README.md │ └── CONTRIBUTING.md ├── public/ │ ├── _config.yml # GitHub Pages 配置 │ └── docs-manifest.json # 构建时自动生成的文档清单 ├── scripts/ │ └── build-manifest.js # 扫描 docs/ 生成 manifest ├── src/ │ ├── main.jsx # React 入口 │ ├── App.jsx # 路由 布局 │ ├── App.css # 全局样式 │ ├── components/ │ │ ├── Sidebar.jsx # 左侧文档树 │ │ ├── ArticleView.jsx # 文章详情页 │ │ ├── ArticleHeader.jsx # Front Matter 卡片 │ │ ├── MarkdownRenderer.jsx # 统一渲染管线 │ │ ├── MermaidBlock.jsx # Mermaid 图渲染 │ │ ├── ChartBlock.jsx # Recharts 图表渲染 │ │ ├── CodeBlock (内联) # 代码块 复制按钮 │ │ ├── PageViews.jsx # 阅读量统计 │ │ ├── Comments.jsx # giscus 评论 │ │ └── ErrorBoundary.jsx # 错误边界 │ ├── hooks/ │ │ ├── useDocManifest.js # 加载文档清单 │ │ └── useDocContent.js # 加载 .md 解析 Front Matter │ └── utils/ │ └── gistCounter.js # GitHub Gist 计数器 ├── .github/workflows/deploy.yml # GitHub Actions 自动部署 ├── worker-counter.js # Cloudflare Worker 备用方案 ├── vite.config.js ├── package.json └── index.html四、快速开始# 1. 安装依赖npminstall# 2. 生成文档清单 启动开发服务器npmrun dev# 3. 打开浏览器访问openhttp://localhost:5173# 4. 构建生产版本npmrun build五、部署推送main分支到 GitHub 后.github/workflows/deploy.yml自动执行npm ci— 安装依赖npm run build— 生成 manifest 构建 SPA部署到 GitHub Pages需要在仓库 Settings Pages 中设置 Source 为GitHub Actions。六、添加新文档---title:文档标题tags:[标签1,标签2]category:分类/子分类slug:路径/文件名唯一标识emoji:description:简短描述---将.md文件放入docs/下对应目录 → 提交推送 → 自动部署上线。写在最后需要特别说明的是这个项目只是一个知识载体真正有价值的是其中沉淀的内容。工具帮你降低了表达的门槛但坚持每天更新知识内容、在使用中持续优化项目才是这件事能否走远的关键。AI 不会替代开发者但它正在重新定义“开发者”的门槛。以前一个想法到产品之间隔着厚厚的编程语法、框架选型、环境配置等障碍。而现在AI 像一位 7x24 小时在线的资深搭档帮你把这些“脏活累活”快速落地。重要的不再是你掌握多少语法而是你是否有清晰的逻辑、能否准确地描述需求以及是否愿意把自己的想法付诸实践。希望我的这次分享能给你带来一些启发。如果你也有一个酝酿已久的想法不妨现在就打开一个 AI 工具让它帮你迈出第一步。
