數據庫老司機勇闖現代前端大觀園

老馮已經很久沒有折騰過前端了，上一次密集和前端打交道已經是十年前了，還是 JQuery 的古典前端時代。這次在一位前端大師，Claude Code，Cursor 以及 GPT 的幫助下，重新用 Next.js 把整個 Pigsty 的網站糊了一遍，跑步進入現代化。

干這件事的契機是兩周前在去杭州出差的路上，。筆記本里8T數據都有備份，唯獨丟失了上個月 Vibe Coding 糊出來的 Pigsty 新網站首頁源代碼。我想這東西丟了也就丟了吧，正好我也正好想整個重構一遍。

Pigsty 之前的網站使用的是 Hugo + Docsy 靜態生成的，用了快五年了。這個也是 Kubernetes 和 Etcd 用的框架，Google 出品，老實說我覺得還是挺不錯的。不過我也想學習了解一下，現代前端究竟發展到什么程度了，所以就找了一位前端大佬，以前奇績的校友，風變科技的蘭天游蘭老板幫幫忙。

蘭老板以前用 Pigsty 自建 Supabase 的時候找過我，所以我這也算是互通有無 —— 我幫你搞搞數據庫，你幫我搞搞前端。具體糊代碼這件事現在各種 code agent 干的都不賴，什么東西比較稀缺呢？—— 技術品味。有前端大手子帶路的好處就是，我就根本不用浪費時間去琢磨什么前端技術選型，直接挑業界前沿成熟最佳實踐就行了。

最后在蘭老板的強烈推薦下，我選擇了 FumaDocs 這個文檔框架（基于 Next.js），托管在 Vercel 上，使用 PostHog 替代 Google Analtics 做分析。全程一分錢沒花，但是事兒辦的還是相當漂亮的。

這里我認為關鍵的因素是有老司機引路，蘭老板花了一個上午，手把手幫我搞定了整個前端 HelloWorld 流程。然后其他的東西我就用 Claude Code 去糊，自己慢慢填充內容就好了。遇到實在難搞的問題，就再找蘭老板求助一下 ——

比如說，去哪里找炫酷的前端控件，怎么導入 MDX 文檔，Vercel Build OOM 了怎么解決，PostHog 監控如何接入。有時候老司機一句話，就能省掉我和 Claude 來會掰扯半小時的時間。

老司機不會啰嗦，直接 GitHub 一把梭。

所以呢，在這里前端現代化之旅中，我又有了一個深刻感受與體驗 —— Claude Code 這種代碼 Agent 確實很強力，只要你能清楚表達自己的問題與需求，它就可以相當好的完成你交代的工作。但真正的問題在于，領域新手根本不知道正確的問題應該是什么，而真正的問題，可能需要在來來回回的溝通交流中才會被認知到。而這對于領域內的老司機來說就完全不是個事兒。

所以，同樣的一件事兒，讓我去用 LLM 糊一個現代前端網站，我可能要花一周的時間，但是如果讓前端大手子用 VibeCoding 去糊，一個上午就能做到差不多的效果。同理， 我相信在數據庫領域上，蘭老板估計會面臨跟我一樣的挑戰。—— AI 通過顯著放大了專家的能力，高手用 AI 帶來的杠桿倍率要比新手高的多。

這個過程中，我基本上也順便把市面上的主要 code agent IDE 都試過了一遍。最后我把 200 刀的 ChatGPT Pro 給退訂了，留了個 20 刀每月的 Plus，一個 20 刀的 Cursor 用來做 Tab 補全，一個 20 刀的 Claude Code 用來日常干活兒。

總體來說，Claude Code 的使用體驗是最好的，特別是最近 20 刀的套餐就能用了，絕對超值。總的來說，當蘭老板不在線的時候，俺遇到的各種前端疑難雜癥其實也是可以花幾倍的時間讓 Claude Code 慢慢折騰出來的。

順帶一提，最近 Code Agent 爆火的核心原因，其實老馮兩個月前就說過了 —— 整個浪潮都是 Claude Code 帶起來的《 》，所以不要猶豫，趕緊試試吧。

這次搞文檔用的是 Next.js + Fumadocs。Next.js 基本上已經成為現在前端的事實標準了，各種 AI SaaS 基本都是 Next.js 糊的，丟到 Vercel ，或者 Cloudflare 上托管。 Fuma Docs 則是一個基于 Next.js 的文檔框架，允許你用 MDX 來編寫文檔。MDX 是一種擴展 Markdown 語法，好處就是有許多非常不錯的 UI 組件可以使用，表現力要比純 Markdown 強太多了。

有趣的是 FumaDocs 是一個個人開源開發者用愛發電搞的，但質量相當之高。有不少知名的軟件 / SaaS / 開源項目都是用的這個文檔框架。從整體視覺表現上，我覺得它比之前我用的 Google 出品的 Docsy 要好得多 —— 在 Fumadocs 的文檔里我能感受到作者對這個框架的用心。在大多數開發者都是 Pay to Work 的世界里，對自己作品的熱愛，才是真正的天才與核心競爭力。

用 Next.js 糊網站其實沒啥好說的，后面我準備專門寫幾個教程聊一下技術細節，所以今天就不聊這些干巴巴的東西了。本來我用慣了簡簡單單的靜態網頁生成，對于這種還要托管的框架是心存顧慮的 —— 我會不會被 Vercel 給鎖定了？雖然 ，但我也不想被菩薩給套牢了。

好在蘭老板解答了我的疑惑，像 Next.js 這種框架可以很方便的在本地托管。一個 Node.js 的 Docker 鏡像就解決了。而且也可以服務端渲染靜態頁面，對 SEO 非常友好。Vercel 的話免費 Plan 其實還是蠻慷慨的，我試了一下訪問速度很快，而且在中國的訪問速度似乎比 Cloudflare 還快不少（ https://pgsty.com[1] ）

托管完了之后就是填充內容了，這是最花時間的部分 —— 基本上相當于整個重新寫了一遍英文文檔，花了我整整兩周的時間。但還是值得的，畢竟作為 PostgreSQL 生態中最能打的中國開源項目，用中文文檔 + GPT 機翻的英文文檔實在是太不像樣了。以后我準備反過來，優先維護英文文檔作為權威版本，然后 GPT / Claude 機翻生成中文以及各國語言的其他版本。

最后，我還了解到了現在前端創業者都是怎么做 APM 的，本來我準備繼續用 Google Analytics ，不過蘭老板推薦了一個開源項目/云服務 —— PostHog 。讓我感覺非常不錯，而且這個項目也是使用 PostgreSQL 作為主要數據存儲的 —— 從這個名字也大概能猜出來。我先試了一把免費的云服務，感覺體驗還是相當不錯的。最主要是這個是開源的，可以進行私有化本地部署，我準備等文檔的事情整完了就去在 Pigsty 里搞一個 PostHog 的自建托管模板。

剛剛找了個新域名測試了一下

總的來說，我覺得這次網站翻新的過程是一次很有趣的體驗。我作為一個還算熟悉古典前端HTML/CSS/JS的現代前端門外漢，在前端大手子和 LLM 的幫助下，糊出了一個還算不錯，符合現代前端最佳實踐的網站。

接下來我準備把這個網站接入到 Supabase 和某個 AI 大模型里，提供認證與文檔問答的功能。然后把這次學到的東西全都沉淀成軟件，集成到 Pigsty 里，做成傻瓜式的一鍵自托管建站方案 ——

現在已經有了一鍵拉起的 Supabase，Postgres，Nginx，Docker 了，只要糊個 Docker Compose 模板和 GitHub 模版，任何人都可以輕松在世界各地拉起一套這樣功能完備，質量上乘，美觀的文檔與網站，還自帶本地的 DataDog 與 Google Analytics ，豈不美哉？