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

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

Pigsty 之前的網(wǎng)站使用的是 Hugo + Docsy 靜態(tài)生成的，用了快五年了。這個(gè)也是 Kubernetes 和 Etcd 用的框架，Google 出品，老實(shí)說我覺得還是挺不錯(cuò)的。不過我也想學(xué)習(xí)了解一下，現(xiàn)代前端究竟發(fā)展到什么程度了，所以就找了一位前端大佬，以前奇績的校友，風(fēng)變科技的蘭天游蘭老板幫幫忙。

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

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

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

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

老司機(jī)不會(huì)啰嗦，直接 GitHub 一把梭。

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

所以，同樣的一件事兒，讓我去用 LLM 糊一個(gè)現(xiàn)代前端網(wǎng)站，我可能要花一周的時(shí)間，但是如果讓前端大手子用 VibeCoding 去糊，一個(gè)上午就能做到差不多的效果。同理， 我相信在數(shù)據(jù)庫領(lǐng)域上，蘭老板估計(jì)會(huì)面臨跟我一樣的挑戰(zhàn)?！?AI 通過顯著放大了專家的能力，高手用 AI 帶來的杠桿倍率要比新手高的多。

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

總體來說，Claude Code 的使用體驗(yàn)是最好的，特別是最近 20 刀的套餐就能用了，絕對超值?？偟膩碚f，當(dāng)蘭老板不在線的時(shí)候，俺遇到的各種前端疑難雜癥其實(shí)也是可以花幾倍的時(shí)間讓 Claude Code 慢慢折騰出來的。

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

這次搞文檔用的是 Next.js + Fumadocs。Next.js 基本上已經(jīng)成為現(xiàn)在前端的事實(shí)標(biāo)準(zhǔn)了，各種 AI SaaS 基本都是 Next.js 糊的，丟到 Vercel ，或者 Cloudflare 上托管。 Fuma Docs 則是一個(gè)基于 Next.js 的文檔框架，允許你用 MDX 來編寫文檔。MDX 是一種擴(kuò)展 Markdown 語法，好處就是有許多非常不錯(cuò)的 UI 組件可以使用，表現(xiàn)力要比純 Markdown 強(qiáng)太多了。

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

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

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

托管完了之后就是填充內(nèi)容了，這是最花時(shí)間的部分 —— 基本上相當(dāng)于整個(gè)重新寫了一遍英文文檔，花了我整整兩周的時(shí)間。但還是值得的，畢竟作為 PostgreSQL 生態(tài)中最能打的中國開源項(xiàng)目，用中文文檔 + GPT 機(jī)翻的英文文檔實(shí)在是太不像樣了。以后我準(zhǔn)備反過來，優(yōu)先維護(hù)英文文檔作為權(quán)威版本，然后 GPT / Claude 機(jī)翻生成中文以及各國語言的其他版本。

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

剛剛找了個(gè)新域名測試了一下

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

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

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