運用 AI 打造專屬 Ghost 主題（並告別 Substack）

原文作者： Dann Berg
發布時間： 2025 年 12 月 7 日
連結：Building a custom Ghost theme w/AI (and leaving Substack)

我一直想從 Substack 轉移到 Ghost 已經好幾年了，直到幾個月前我才決定認真執行這件事。經過了比我預期還要多非常多的工作（通常都是這樣，對吧？），全新打造的 The Dann Chronicles 網站終於上線了！

為了慶祝新網站的上線（我對此感到超級興奮），我想帶大家來個網站導覽，並分享一下幕後的製作過程。我為我的 Ghost 網站打造了一個全新的客製化主題（這也是為什麼花了這麼多時間的原因），裡面藏了非常多小彩蛋和有趣的巧思，我不想讓你們錯過。

此外，透過記錄我的思考過程與決策，我也許能幫助到那些想要進行類似專案或相關工作的人。

為什麼選擇 Ghost

我之所以在 Substack 停留這麼久，主要是因為它是免費的。Substack 的獲利模式是從訂閱者的收入中抽取一定比例的費用。由於我經營的是一個完全免費、沒有付費方案的電子報，這意味著 Substack 對我來說是完全免費的。

然而，我並不是這間公司的頭號粉絲，這也促使我想要尋找一個合理的替代方案。我研究了其他競爭對手，但對於像我這樣規模的訂閱者名單，多數的其他選項都需要花費不少錢。

Substack 針對沒有付費方案的電子報所提供的免費服務，其實相當罕見。大多數 Substack 的競爭對手雖然也提供慷慨的免費額度，但在大多數情況下，我的電子報訂閱數早就超過了那個限制。而且，雖然這些服務的月費對於那些透過部落格獲利的創作者來說非常合理，但對於一個自掏腰包經營有趣嗜好／副業的人來說，這價格標籤實在令人咋舌。

唯一的例外是 Kit（前身為 ConvertKit），他們最近推出了支援高達 10,000 名訂閱者的免費方案。在那個公告發布後，我曾考慮過遷移到 Kit，但 1) 網頁設計的限制，以及 2) 必須強制參與他們的「創作者網路（creator network）」，讓我最終排除了這個選項。對於大多數人來說，如果你想要零煩惱地快速建立一個漂亮的電子報，我認為 Kit 可能是最好的選擇。但對我而言，我想要多一點的控制權（以及多一點的煩惱）。

在所有「最佳電子報平台」名單中，始終名列前茅的單一平台就是 Ghost。

Ghost 是一個專為電子報設計的開源內容管理系統 (CMS)。開源意味著你可以選擇在自己的伺服器上免費自託管這項服務，或者你也可以付費使用 Ghost(Pro)，讓 Ghost 來為你代管網站。

自從我開始探索 Substack 的替代方案以來，Ghost 一直是我的首選，但價格總是讓我猶豫不決。我有自託管的經驗，這也代表我非常清楚代管服務 (managed service) 的真正價值。但是 Ghost(Pro) 每個月要花費我 46 美元，而且一旦我跨越下一個訂閱人數門檻，價格就會跳升到 63 美元。這對於一份免費電子報來說，實在很難說服自己買單。

另一方面，我也探索了自託管的選項。租用專屬的虛擬專屬主機 (VPS) 似乎有點大材小用，而且花費幾乎跟 Ghost(Pro) 一樣貴。我考慮過 DigitalOcean Droplet，每個月 5 美元會是個合理得多的價格。但在 Reddit 上爬文後，我發現了 PikaPods。

PikaPods 提供每月大約 2.50 美元的 Ghost 託管服務，而且使用者的回饋非常正面。在衝動之下，我建立了一個帳號並架設好一個 Ghost 實例 (instance)。這只花了我大約兩分鐘。就在那個瞬間，我正式決定切換到 Ghost。那是三個月前的事了。

(原圖：The Dann Chronicles 在 PikaPods 中的 pod 截圖)

接下來的任務是為網站找一個 Ghost 主題。我花了非常多時間瀏覽免費和付費的高階主題，但沒有一個完全符合我的心意。我腦海中對我想要的樣貌有著非常具體的想像，而我在預先做好的主題中找不到那個樣子。

我的主要網站 dannb.org 是一個使用我自己打造的客製化主題的 Hugo 網站。而那是在 AI 程式碼輔助工具出現之前很久的事了。我決定我倒不如自己打造一個客製化的 Ghost 主題，從而精準獲得我想要的東西。

AI 輔助 Ghost 主題開發工作流程

在製作我的客製化主題時，我大量使用了人工智慧。我計畫寫另外一篇文章詳細分享我的流程，但在這裡先快速概述一下我的工作方式：

• 使用 Ghost Starter Theme 作為基礎，並在 Cursor 中開啟它。
• 使用一個 Claude 專案並加上自訂指令，根據我建立的範本進行腦力激盪，並生成詳細的 Github Issues。
• 挑選一個我想要處理的單一 Issue，並指示 Cursor Agent 透過 CLI 抓取該 Issue 的詳細資訊、建立一個新的 Git 分支，然後著手完成各項需求。
• 與 Agent 進行反覆迭代，並在本地端的 Ghost 環境中測試每個功能。
• 一旦一切運作正常，就告訴 Agent 提交 (commit) 變更、推送到 Github 的遠端儲存庫，並開啟一個可以關閉該 Issue 的 Pull Request (PR)。
• 在 Github 上手動審查 Pull Request，如果一切看起來沒問題就進行合併 (merge)。
• 回到 Cursor 告訴 Agent 合併已經完成，並指示它切換到 main 分支並拉取變更。
• 在 Github 的 main 分支上的提交會自動部署到我在 PikaPods 的 Ghost 實例。
• 造訪我的 Ghost PikaPods 實例，對每個功能進行最終測試。

通常，我會批次處理功能腦力激盪和建立 Issue 的工作，產生一長串的 Issues 加入到 Github 儲存庫中。然後，我會切換到 Cursor，一次解決一個 Issue。

以這種方式工作，讓測試、追蹤單一功能以及在需要時進行版本回退變得超級容易。利用 AI 讓我能夠以比非 AI 輔助開發快上 10 到 20 倍的速度工作。這也讓我在網站中內建了大量有趣的功能（我會在本文中與你們分享）。

這是我第二次為網站製作客製化主題（第一次是 dannb.org），但卻是第一次利用 AI 協助開發。這種感覺真的就像擁有了超能力一樣。而確立了這套紮實的單人開發者工作流程，也讓整個過程感覺俐落且井然有序。

首頁 (Homepage)

我之所以想打造客製化 Ghost 主題的其中一個原因，是因為我腦海中對首頁的樣貌有著強烈的畫面。主要來說，我想要一個英雄區塊 (hero section)，接著是我最新一期電子報的完整內容。既然這是一份免費電子報，我希望任何造訪這個網站的人都能看到最新的一期。

英雄區塊 (Hero section)

我知道我的英雄區塊需要兩樣東西：1) 一個強而有力的訂閱行動呼籲 (call-to-action)，以及 2) 一種符合內容語氣的有趣、俏皮氛圍。

我在兩年前設計了 The Dann Chronicles 的圓形 logo，做為自學設計工具 Figma 的一種方式。我舊的 Substack 網站的品牌形象比較圍繞在我的「空洞之眼 (Hollow Eyes)」logo 上，這雖然很有趣，但並不專屬於 The Dann Chronicles，也不太適合新網站。

(原圖：舊版 Hollow Eyes logo 與新版圓形 logo 的並排比較)

我花了相當多的時間在琢磨英雄區塊的文案。我想寫出能精確反映人們「為什麼閱讀」這份電子報的原因，而不是「我為什麼寫」這份電子報。

我草擬了好幾個版本，並與幾位親近的朋友分享以獲取回饋。此外，我也在最新一期的電子報中加入了一份簡短的問卷，來徵求意見並傾聽人們持續訂閱的原因。我利用這些數據反覆修改文案，最終才定案成你們現在看到的這段文字。

(原圖：thedannchronicles.com 的英雄區塊截圖)

但我還需要加入一些趣味性。我從自己的電子報中汲取靈感，加上瀏覽了其他幾個電子報網站，提取出我想要加入英雄區塊的元素。這包含標題中的一個 emoji（與我電子報中標題的風格一致），以及一個延遲出現的底線特效，用來強調標題的某個部分。

接著，我在電子郵件提交表單的後方加入了一個隱約閃爍的燈光效果，藉此吸引注意力。而且，如果你是在桌上型電腦上瀏覽該網站，你可以把滑鼠移到圓形 logo 上，會觸發一個互動式的動畫。

最後，我想吸引大家的注意力，讓他們知道最新一期的內容可以直接在首頁上完整閱讀。我使用了一種手寫字體，並找了一個塗鴉箭頭，在 Figma 中製作成一個 SVG 檔案，加到了英雄區塊的底部。

正是這些微小的細節賦予了這個網站一點個性。

讀者見證 (Testimonials)

我的電子報擁有一小群 ^[1] 但忠實的讀者，其電子郵件開信率遠高於業界平均水準（約 40%）。如我上面提到的，我發送了一份簡短的問卷，想進一步了解人們喜歡我的電子報的原因，並利用這些資訊來驅動新網站的設計與文案。此外，在取得當事人同意的情況下，我也想將這些回饋作為社會認同 (social proof)，來鼓勵其他人註冊。

我發出的問卷包含幾個開放式的問題，例如：「你最喜歡 The Dann Chronicles 的哪一點？」、「如果你要向朋友描述 The Dann Chronicles，你會怎麼說？」以及「The Dann Chronicles 與你閱讀的其他電子報有何不同？」

除了能獲得可用於網站的內容之外，閱讀這些回饋本身就是一種絕對的享受。通常，發送電子報感覺就像把內容釋放到虛無之中。因此，聽到人們的想法以及他們訂閱的原因，真的強化了我對每個月發布文章的熱愛。

話雖如此，這些回覆其實並沒有產生太多可以直接複製貼上的引言。相反地，每一份問卷回覆都充滿了寶貴的資訊，需要經過輕微的文法與結構重組，才能真正作為見證感言來發揮作用。

我又一次使用了 AI 來協助我完成這件事。我提供了 CSV 格式的表單回覆，並解釋了完整的背景脈絡。然後我對每一則見證感言進行反覆修改，在盡可能忠於原始回覆的同時，創造出適合放在網站上的見證陳述。

接著，針對那些我想在網站上使用其經過重組引言的回覆者，我發送了一封後續的電子郵件，感謝他們填寫問卷，並確認他們是否同意讓我使用微調過的引言。

(原圖：網站上讀者見證區塊的截圖)

我使用了一個 Cursor agent 來設計網站上的見證區塊，提供排版和結構上的回饋，直到調整出我喜歡的樣式。我也確保這些見證感言可以在 Ghost 後台的主題設定中進行更新，讓我無須編輯自訂的模版程式碼，就能夠新增／移除／更新引言。

英雄區塊和讀者見證區塊都只會顯示給未訂閱或未登入的使用者看。一旦使用者訂閱並登入網站後，這兩個區塊就會被頁面頂部的一個小型圓形 logo 所取代，緊接著就是最新一期電子報的完整內容。很酷吧。

各種有趣的巧思 (Miscellaneous fun)

我不會把加到網站上的每一個有趣的細節都講一遍（因為實在太多了），但我想特別介紹幾個我最喜歡的。

驚喜彩紙！(Confetti surprise!)

當使用者滑動到頁面的最底部時，他們會看到一個五彩碎紙爆炸的動畫。每次頁面載入只會觸發一次，為網站增添了一點有趣的個性。

我還拿捏不準長期下來這會不會讓人覺得煩人或分心，或者它是否能為網站帶來附加價值。我也許應該在主題設定中為這個特效增加一個切換開關，但目前它是直接寫死 (hardcoded) 在主題程式碼裡的。

拍手 (Claps)

這是我加到網站上比較複雜的功能之一。我非常喜歡我之前的 Substack 網站，在每篇文章上都有一個簡單的愛心回應按鈕，類似於 Medium 文章的拍手按鈕。這並不是 Ghost 內建的功能，但要建立起來也相當簡單。

在 AI 的協助下，我為我的電子報建立了一個無伺服器 (serverless) 的後端，用來支援一個自訂的拍手／鼓掌按鈕系統，由 Cloudflare Workers 和 KV 儲存技術驅動。除非發生什麼嚴重的錯誤，否則這個功能應該會一直保持在免費額度內，一毛錢都不用花。

彙整頁面 (Archive page)

在確定我喜歡的樣式之前，我對 Archive（文章彙整）頁面的設計反覆測試了很久。標準的網格排版看起來不太對勁，所以我改成了單欄設計並增加了寬度。

此外，我不想使用傳統的分頁機制，而是想要一個「載入更多 (Load More)」按鈕，在同一個頁面上載入較舊的文章。

(原圖：當所有文章都載入完成時的提示截圖)

頁尾文字 (Footer text)

我把 dannb.org 的頁尾版權文字複製到了這個新網站上。

(原圖：網站頁尾區塊的截圖)

身為一個沒有小孩、也不是迪士尼狂粉的成年人，我已經好幾十年沒看過迪士尼電影了。儘管如此，這個《獅子王》的致敬梗感覺是個很有趣的彩蛋，我也會繼續在我各種網站上使用它。

結語 (Final thoughts)

在網路上玩耍為我帶來了許多樂趣。我透過發行每月的電子報、偶爾製作 YouTube 影片，以及建立充滿（希望是）令人愉悅的小驚喜的網站來實現這一點。

在開發這個全新客製化 Ghost 主題的過程中，我最大的收穫是：人工智慧大幅提升了我的技能與能力。它對開發時間也產生了反向的指數級影響——過去需要花上幾個星期的工作，現在只要一兩個小時就能搞定。

The Dann Chronicles 電子報是一個熱情驅使的專案，已經穩定運行了五年，而且看不到盡頭。它現在是、未來也永遠會是免費的。如果你喜歡這個新網站，也對內容感興趣，你應該要訂閱。如果不喜歡，那就別訂閱。

我對這個網站的成果感到滿意。如果你喜歡其中的某些元素，歡迎把他們複製到你自己的網站上。讓我們一起在網路上建立更多樂趣吧。

你可以前往 The Dann Chronicles 訂閱我的電子報。

原文連結：Building a custom Ghost theme w/AI (and leaving Substack)