全棧開發探險記：MDX、雲端部署與AI輔助工作流程的實戰體驗

全棧開發探險記：MDX、雲端部署與AI輔助工作流程的實戰體驗
Ian Chou
Ian Chou•

簡介： 本文記錄了我探索全棧開發的一天歷程，涵蓋MDX技術、各大部署平台比較、域名管理策略，以及如何利用Claude MCP等AI工具打造高效開發流程。從技術選型到實戰測試，分享了一位開發者如何結合AI助手與Git版本控制，勇敢嘗試新技術的真實體驗。無論你是前端開發者還是全棧愛好者，這篇探險日記都能給你帶來實用的工作流程啟發。

FullstackMDXCloud DeploymentAI Workflow

晨曦中的技術探索

清晨，我首先研究了 Preact —— 這個 React 的輕量級替代品。雖然它體積小、速度快，但在我的探索路線上，它似乎只是一個小小的景點，而非必游之地。

接著，我深入研究了幾個熱門的部署平台：

  • Vercel：NextJS 的親爹，部署體驗一流
  • Netlify：老牌靜態網站托管服務
  • Cloudflare Pages：網絡巨頭的靜態站點服務
  • GitHub Pages：代碼庫自帶的簡易部署工具

這些平台就像不同風格的車站，每一個都能將我的代碼運送到互聯網的高速公路上。

MDX 的奇特景觀

探索 MDX 相關資源時，我發現了一個有趣的現象：大陸很多 MDX 文章竟然沒有放在 MDX 平台上！那些華麗的 React 功能框只是截圖，沒有實際功能。這就像去動物園看到的是動物照片而非真實動物，真是奇葩！

也許是因為我才開始尋找 MDX 相關博文，參考資料並不多。感覺自己像在尋找一座傳說中的城市，地圖上標記不清，只能靠直覺前行。

域名與雲服務的組合拳

在域名管理方面，我有了一個明智的決定：在 Porkbun 購買域名，然後放到 Cloudflare 管理。這種組合就像把鑰匙（域名）交給最可靠的管家（Cloudflare）保管，既經濟又靈活。

AI 助手與工作流程的誕生

不知不覺中，一個高效的工作流程形成了：

  1. 遇到問題，先諮詢 ChatGPT 和 Claude 了解問題本質
  2. 然後到 Claude MCP 讓它直接修改代碼
  3. 依靠 Git 版本控制，大膽讓 AI 調整，出問題就回滾

這就像有了一隊 AI 工程師團隊，各司其職：顧問、執行者和安全網。

實戰測試：MDX 部署挑戰

我進行了一個測試：將 Lee Robinson 的 MDX 文件（Understanding AI）單獨提取，請 Claude MCP 幫我部署到 GitHub 再提交到 Vercel。Claude 像個盡職的助手，為我添加所需文件和依賴。

然而，當它試圖在 GitHub 上創建倉庫時，遇到了安全限制的高牆。我修改了 mcp-cli-exec 配置，讓它能夠呼叫 Git 命令。檢查 mcp-cli-exec 的文件後，我發現可以在配置中指定使用哪個 shell。許多基於 Node.js 的 CLI 工具在呼叫 child_process.spawn 時都允許傳入一個 shell 選項。

我將配置修改如下：

"mcp-cli-exec": {
  "command": "npx",
  "args": ["-y", "mcp-cli-exec"],
  "options": {
    "shell": "\"C:\\Program Files\\Git\\git-cmd.exe\" --cd-to-home"
  }
}

這樣設置後，執行時就會使用指定的 git-cmd.exe 並傳入 --cd-to-home 參數，讓 Claude MCP 可以操作 git 指令而不需要密碼。

但即使有了這些配置，它仍無法自動建立倉庫。我不得不手動幫它建立倉庫，只是加個倉庫名，其他都不動。Claude 成功地幫我把資料搬進 GitHub 裡面，但之後又卡住了 —— 它無法在 Vercel 裡創建項目，應該也是安全控管的關係。

最終，我不得不手動創建 GitHub 倉庫和 Vercel 項目，雖然沒能實現完全自動化，但這次實驗讓我理解了集成的複雜性和可能性。

Lee Robinson 的站點：轉機

隨後，我轉向測試 Lee Robinson 的網站程式。NextJS 15 的框架非常先進，我在 GitHub 上 fork 了他的程式並下載到本地。由於他可能使用 Mac 系統和 Bun 執行程式，我使用 npm 跑不起來。

經過 Claude 幾次精準調整後，程式終於可以運行了！這解決了我一直以來的困擾 —— MDX 的預覽問題。之前使用 VS Code 的 MDX 預覽不夠理想，但現在有了 Lee 的工具，編輯完即可看到結果，就像魔法一樣方便！

框架探索之旅

NextJS 部分，我已經掌握得比較清楚。Nuxt.js 的研究顯示，Vue 3.5 對文檔顯示的重視不足，動態交互尚不成熟，對 MDX 的支持相對較弱。

SvelteKit 有 mdsvex 來組合 Markdown 和 Svelte 組件，但相關資料稀少，範例不多，學習曲線陡峭。

至於 Qwik 和 Qwik City，雖然號稱速度驚人，但相關視頻多是兩年前的，彷彿是一股已經冷卻的熱潮。

明日展望

明天我將踏入新的領域：研究 n8n 的 Docker 安裝以及雲端的 MCP。就像一位跨越不同大陸的探險家，每天都有新的發現等待著我！

今天的探索之旅讓我意識到，全棧開發就像攀登技術的珠穆朗瑪峰，每前進一步都能看到不同的風景。雖然路途艱辛，但有 AI 助手和開源社區的支持，這段旅程變得既充實又有趣。明天，新的挑戰等待著我，而我已經準備好繼續前行！

Thanks for reading!

Found this article helpful? Share it with others or explore more content.

More Articles
Published April 13, 2025•7 min read•4 tags