Docusaurus與框架選擇實戰：2025年全棧開發者的深夜探索之旅

簡介

當失眠遇上開發靈感，會碰撞出怎樣的火花？本文記錄了一位全棧開發者在深夜探索 Docusaurus、前端框架選擇、自動化部署以及 AI 輔助開發的真實歷程。從 MDX 與 JSX 的思辨、網頁複製工具的挫折，到 AI 控制桌面應用的嘗試，這段技術冒險不僅展現了現代開發者面臨的選擇困境，也揭示了一個重要的開發哲學：有時候，找到合適的參考比無止境的技術比較更為重要。無論你是資深開發者還是新手，這篇文章都能讓你在技術選擇的迷霧中找到一絲方向。

發布日期：2025年4月13日 | 閱讀時間：8分鐘 | 分類：前端開發、開發者工具、自動化部署

失眠催生的創意

凌晨三點，台北市。

窗外的霓虹燈透過百葉窗的縫隙灑進我的房間，我的雙眼像是被施了咒語般怎麼也閉不上。腦中那串關於網站架構的代碼像是有生命一樣跳躍著，不依不饒地纏著我。

「睡不著就乾脆做點事吧！」

於是我一股腦地爬起來，直接開始了一場毫無準備的 Docusaurus 冒險之旅。

Docusaurus：意外的驚喜

說實話，我一開始只是想確認 Docusaurus 是否支援部落格功能。結果這一查不要緊，我整個人都被吸進這個兔子洞裡了！

安裝過程出奇地順利，我還記得當 npm start 命令執行成功，瀏覽器自動開啟那個簡潔而優雅的預設頁面時，我差點在椅子上跳起來！

「它不僅支援部落格，還支援得相當不錯嘛！」

MDX 的組合讓我眼前一亮——Markdown 的簡潔加上 JSX 的靈活性，這簡直就是寫作者和開發者的完美結合。想象一下，你可以在一篇文章中既能優雅地撰寫內容，又能隨心所欲地嵌入交互組件，這是多麼令人興奮的事情啊！

一場失敗的網頁複製冒險

靈感來了擋也擋不住。我突然想到：「如果我有一個 HTML 的網頁，能不能直接用 MCP 自動化，先放到 GitHub 上，再去 Vercel 或 Netlify 上發佈呢？」

理想很豐滿，現實很骨感。

我本來想做一個吉伊卡哇風格的 HTML 頁面，但懶病犯了（程序員的通病，你懂的），就想著直接複製一個現成的。

於是開始了我的「複製」之旅：

先用 copyStyle：不給力
再試 Figma 的外掛 html.to.design：能輸入但輸不出，等於白忙活
然後是 same.new：結果它乾脆把整個網站都複製了下來，我什麼也沒得到
最後看了 copycoder.ai：看起來跟 same.new 差不多，還要收費，無法測試

望著螢幕上這一連串的失敗嘗試，我只能默默地關掉瀏覽器標籤頁，暫時擱置這個計畫。這就像是你以為自己找到了捷徑，結果發現這條路比原路還要長還要崎嶇。

JSX vs MDX：靈光乍現的思考

失敗並沒有澆滅我的熱情。在瀏覽代碼的過程中，我發現了一件有趣的事情——有些開發者直接把 HTML 代碼放在 JSX 裡面，將文章內容直接嵌入 JSX 中。

「如果 JSX 的所見即所得（WYSIWYG）更容易實現，那麼有沒有可能直接存 JSX，不需要 MDX 呢？」

這個想法在我腦海中閃現，但很快又冒出一個問題：index.jsx 不能直接作為入口，必須有一個 index.html，然後在其中開一個容器，再把 index.jsx 放進去。

「有點複雜...」我叼著筆思索著，「這個問題先放一放，以後慢慢想。」

與 ChatGPT 的機器人之舞

夜色漸深，但我的探索慾望仍未褪去。

「如何用 Claude MCP 去控制 ChatGPT desktop App？」這個問題突然冒了出來。

經過一番搜索，我找到了 syedazharmbnr1/claude-chatgpt-mcp 這個方案。只有一個小問題：它只能在 macOS 上使用。而我，一個 Windows 用戶，頓時感到世界的不公。

在深入研究後，我終於明白這個限制的原因：這個方案依賴於 AppleScript 來控制 ChatGPT App 的視窗和輸入框。而 Windows？抱歉，沒有直接對等的替代品。

我像個不肯認輸的戰士，開始嘗試各種可能的方案：

方案一：AutoHotkey

; 假設 ChatGPT Desktop App 的視窗標題包含 "ChatGPT"
SetTitleMatchMode, 2
WinActivate, ChatGPT  ; 激活 ChatGPT 視窗
WinWaitActive, ChatGPT
Send, {Enter}Hello World!{Enter}  ; 發送 Prompt

輕量級、無需開發環境，聽起來不錯，對吧？但需要手動賦予管理員權限，而且不總是能準確鎖定視窗。

方案二：Python + PyWinAuto

from pywinauto import Application
app = Application(backend="uia").connect(title_re=".*ChatGPT.*")
dlg = app.window()
dlg.type_keys("^a")          # Ctrl+A (全選輸入框)
dlg.type_keys("Hello World") # 輸入文字
dlg.type_keys("{ENTER}")     # 送出

看起來更專業了，但仍然存在不穩定的問題。

方案三：Electron App 的進階控制

import websockets
async def send_prompt():
    async with websockets.connect("ws://localhost:9222/devtools/page/...") as ws:
        await ws.send('Input.value = "Hello World";')

這個理論上會穩定一點，但當我滿懷期待地測試這個方案時，一個殘酷的現實浮現出來：微軟已經封鎖了連接 ChatGPT Desktop App 的路徑。

「所以這就是為什麼只有 macOS 版本的原因...」我嘆了口氣，感受到了開發者之間的鴻溝。

工作方式的小進化

在這一連串的嘗試和失敗中，我發現了一個小小的進步。

以前，我總是讓 Claude MCP 幫我改東改西，但失敗率相當高。今天我換了個方法：讓 VS Code 的 Cline 幫我找到需要修改的地方，然後我自己手動去改。

改動的速度慢了下來，但正確性卻提高了不少。有時候，AI 和人類的合作比完全依賴 AI 更有效率。

框架的選擇焦慮

夜深了，我還在比較 Docusaurus, Next.js, Gatsby, Astro, Remix, SvelteKit, Nuxt.js 的特性，試圖找出「最完美」的解決方案。

突然間，一個念頭閃過我的腦海：

「我為什麼要一直比較各種技術呢？我應該開始尋找我喜歡的博主，了解他們用什麼框架就好了。」

有時候，看別人如何解決問題，比自己無止境地比較更有啟發性。

睡前的領悟

當我終於準備爬上床時，夜已深，但我的心卻前所未有地清醒。

這一晚的探索讓我明白，技術選擇固然重要，但更重要的是找到適合自己的工作方式和表達方式。無論是 Docusaurus、Next.js 還是其他框架，它們都只是工具，真正重要的是用這些工具創造出什麼。

明天，我會開始關注那些我欣賞的博主，學習他們的寫作風格和技術選擇。也許，我很快就能找到屬於自己的道路。

而現在，是時候讓這個疲憊但充實的大腦休息一下了。

寫於深夜的咖啡館，伴隨著窗外的雨聲和鍵盤的敲擊聲。

簡介