用 AI 打造個人部落格的暑假實戰記錄

這篇文章想寫好久了，但一直拖到現在才動筆，GitHub的說明文檔估計又要鴿一陣子了吧。

緣起#

升大二的暑假，不知道要做什麼，又因為電子ED不想打遊戲的我，開啟了一個內卷的賽道——在一個月內使用 Claude Code 做 vibe coding，fork 一個現成項目客製出屬於自己的部落格。

在此之前我還只是個前端小白（其實後端更是小小白），雖然經常關注前端的趨勢，但實際上手經驗不多。但在這個暑假，我靠著 AI 成功做出了屬於自己的項目。

站在巨人的肩膀上#

我選擇的基底項目是黃玄的部落格，用 Jekyll 部署在 GitHub Pages 上，不需要自己的伺服器。黃玄是一位非常厲害的前端大佬，現在是 React 開發組的成員。這個部落格項目最初是他在 2015 年開發的，到了 2020 年左右就沒有太多更新了，因此有許多技術棧都比較舊。

不過整體的設計非常漂亮，而且能嵌入 Reveal.js 的簡報，還支援 PWA。只是原版沒有深色模式，LaTeX 的功能也已經失效了，而且原版的一些 CDN 連結比較冷門，載入的時間不是很快。但沒關係，有了 AI 我只要動口不用動手，so just do it！（後面還是踩了許多坑）

開發過程#

在開發的過程中，我用小步快跑的方式添加功能，改壞了就用 Git 回退版本，大致成形後再慢慢縮減規模，移除一些冗余的功能和邏輯。一開始先把 Google Analytics 從 UA 改成 GA4，加上 Mermaid，添加返回頂部的按鈕。

接下來就開始做深色模式，這是最難做的部分，有很多的 CSS 樣式錯誤要處理，網頁的 CSS 是層疊的，只有最上層的規則才會生效，這部份 AI 不能很好的處理。一開始的時候我看樣式怎麼改都不對，就不斷的跟 AI 鬼打牆，後來才打開開發者模式去看每個元素的樣式規則，告訴 AI 一個明確的指令才改成功，這部份花了大概兩週才處理好。後面在添加新功能的時候就沒那麼多問題了，但偶爾還是會出現幻覺，Git 回退後再指出問題通常就解決了。

原本計劃在之後將依賴 jQuery 的代碼完全重寫成原生的 Web API，並引入 HTMX，切換文章時用 Ajax 無縫載入下一篇文章，結合 PWA 應該能實現近乎原生 app 的體驗。但實際操作後發現 tag cloud 插件和語言切換還是依賴 jQuery，所以後來只把 jQuery 的動畫重寫成 vanilla JS 而已。HTMX 也是在做的過程中發現太複雜了，而且原本就有 sw.js 所以速度也沒有提升太多，就放棄了。

原本還想要讓 GitHub Action 在部署網頁的時候遍歷文章內的所有 code，對每種語言使用該語言的 Formatter 轉換來格式化 code 中的空格，讓 Mermaid 和 LaTeX 在 build 的過程中就轉換成 SVG，還想要自建一個 HTMX 留言板，後端用 Cloudflare Workers 和 D1 資料庫，但後來想了想這些功能我基本上用不到而且做起來太複雜，所以也放棄了。

SEO 優化#

整體改的差不多的時候就開始做 SEO 了，一開始部落格網址是 blog.allenspace.dpdns.org，這是一個免費的 DigitalPlat 域名，把網站加入 Google Search Console 後過了一兩個禮拜都沒有被 Google 收錄成功，後來改用 Netcup 註冊的域名才終於被收錄。收錄成功後發現只有首頁有被編入索引，才發現原來需要提交 sitemap.xml 給 Google，原版是沒有 sitemap 的，參考了原版 RSS 的邏輯做了一個 sitemap 提交後，過了幾天就被收錄了。

反思#

最後我想說，大模型依靠大量資料訓練會導致它的能力趨於統計中位數。對於頂尖的 coding 大神來說，維護 AI 產出的中等品質程式碼可能讓效率降低，但對於沒有把 coding 當作本職工作的人來說，AI 能讓自己有做出產品的能力。

開發的過程中我一直在思考要加什麼功能，這個 bug 要怎麼改，提示詞要怎麼寫，在把成果做出來後還是很開心的，雖然是把寫 code 的工作外包了，但我沒有外包思考。

或許我們不用擔心機器變得像人一樣，而是該擔心人變得像機器一樣吧。

技術棧總結：#

• 基底：黃玄的 Jekyll 部落格
• 部署：GitHub Pages
• AI 工具：Claude Code
• 新增功能：深色模式、Mermaid 圖表、giscus留言版、SEO 優化、Sitemap 等