從想法到上線：我用AI在一天內“摸”出了一個面試文檔系統

隨著 AI 編程工具的日益成熟，對於我們個人而言，只要擁有一個想法，將其變為項目和產品的難度已經大大降低。無論是否有編程經驗，我們每個人都可以扮演產品經理、全棧開發等角色。最近，我正好有一個想法，想和大家分享下我從想法到項目的完整經歷。

項目背景

最近公司毫無徵兆地裁掉了一部分同事，所以我打算重啟刷面試題的計劃。一方面是為了鞏固基礎知識，另一方面也希望能以面試題為切入點，瞭解和學習一些 AI 相關的知識。

基於這個目的，我發現單純看面經很容易忘記，也達不到預期的效果。如果通過編碼或寫文檔的方式走一遍，效果可能會更好。然而，常規的 Markdown 編輯器或在線文檔功能有限，有的數據保存在本地無法同步，有的功能不全，有的無法分享，還有的不能與他人交流。

因此，一個可以免費部署到公網、支持多設備共享、便於與他人交流、並且可以個性化定製的項目變得十分必要。這正是我今天要介紹的這個項目的由來。

項目信息及效果

項目 GitHub 地址：github.io/xiuji008/xj…
GitHub Pages 部署後的 Web 地址：xiuji008.github.io/xjdoc-inter…
項目文檔地址：xiuji008.github.io/xjdoc-inter…

首頁、文檔結構樹、頂部欄

閱讀數、分類、標籤、介紹

評論

提示

sequence

chart圖表

項目開發工具

開發 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!、```sequence、```mermaid! 等語法的代碼塊，也需要支持渲染；
5. 基於 GitHub 實現評論功能（如果可以，希望增加閱讀數統計）。

第三步：生成代碼，根據具體情況進行多輪對話調整

在對話框中選擇技術選型及設計方案，確認後會進行代碼生成。生成之後，根據實際效果進行多輪對話修正。

第四步：推送到 GitHub，進行環境變量等一系列配置
第五步：調試 GitHub Pages 構建，並查看頁面
第六步：讓工具總結，生成 README

至此，整個項目完成了從想法到開發再到部署的全流程。

項目耗時

這個想法萌生於早上通勤的路上。到公司後，我便利用工作間隙開始了嘗試。整個開發過程完全交給 AI，我只需要清晰地描述需求，並在它生成代碼後進行驗證和對話調整。

到下午下班時，項目已基本成型。晚上回家後，我又集中花了約 3 個小時進行細節調優、多輪對話修正以及 GitHub Pages 的部署配置。

總計耗時：白天零散的“摸魚時間” + 晚上集中的 3 小時。從想法到可公網訪問的完整項目上線，實際投入的淨時間不到一天。

項目說明

以下將對項目的系統架構、核心功能、使用方法及部署方式做詳細說明。

面試知識庫 📖

面試文檔知識庫系統，支持自動掃描 Markdown 文檔、渲染圖表/公式/流程圖，通過 GitHub Pages 一鍵部署。

一、系統架構

graph TD
    subgraph 源碼
        A[docs/ *.md] --> B[scripts/build-manifest.js]
        B --> C[public/docs-manifest.json]
    end
    subgraph 前端 SPA
        D[index.html] --> E[src/main.jsx]
        E --> F[App.jsx]
        F --> G[Sidebar]
        F --> H[ArticleView]
        H --> I[MarkdownRenderer]
        I --> J[ChartBlock / MermaidBlock / CodeBlock]
        H --> K[Comments / PageViews]
    end
    C --> G
    A --> H

技術棧：

層	技術	用途
構建	Vite 5	開發服務器 + 生產構建
UI 框架	React 18	SPA 頁面組件
路由	react-router-dom 6	HashRouter 頁面切換
Markdown	react-markdown 9	核心渲染引擎
數學公式	KaTeX + remark-math + rehype-katex	LaTeX 公式渲染
圖表	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基礎/collection
emoji: 📚
description: 完整的中文描述
created: 2024-01-15
updated: 2024-03-20
---

2.3 數學公式（KaTeX）

支持行內公式和塊級公式。

效果：

行內： $E = mc^2$

塊級：

$\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}$

寫法：

行內公式：$E = mc^2$

塊級公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$

也支持 mathjax 代碼塊：

```mathjax
f(x) = \sum_{i=1}^{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`, `colorField`
`bar`	柱狀圖	`xField`, `yField`
`line`	折線圖	`xField`, `yField`
`area`	面積圖	`xField`, `yField`
`radar`	雷達圖	`xField`, `yField`

2.5 流程圖/時序圖（Mermaid）

效果：

graph TD
    A[添加文檔] --> B[Git Push]
    B --> C[GitHub Actions]
    C --> D[部署 Pages]

寫法：

```mermaid
graph TD
    A[添加文檔] --> B[Git Push]
    B --> C[GitHub Actions]
    C --> D[部署 Pages]
```

時序圖：

```sequence
participant A as 客戶端
participant B as 服務端
A->>B: 請求
B-->>A: 響應
```

支持所有 Mermaid 類型：

類型	代碼塊語言	說明
流程圖	`mermaid`	`graph TD / LR / BT`
時序圖	`sequence`	`sequenceDiagram`
餅圖	`mermaid`	內置 `pie` 語法
類圖	`mermaid`	`classDiagram`
甘特圖	`mermaid`	`gantt`
狀態圖	`mermaid`	`stateDiagram`

2.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.js
const GIST_ID = '你的GistID'
const GIST_TOKEN = 'ghp_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.jsx
const GISCUS_CONFIG = {
  repo: 'xiuji008/xjdoc-interview',
  repoId: 'R_kgDOSoPcRg',
  category: 'Announcements',
  categoryId: 'DIC_kwDOSoPcRs4C94wU',
}

使用 data-mapping="specific" + data-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. 安裝依賴
npm install

# 2. 生成文檔清單 + 啟動開發服務器
npm run dev

# 3. 打開瀏覽器訪問
open http://localhost:5173

# 4. 構建生產版本
npm run 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 工具，讓它幫你邁出第一步。

推薦訂閱源

掘金