從買網域到寄出第一封信：獨立部落格的三個里程碑

前言

做一個部落格，技術上不難。難的是你到底要不要動手，以及動手之後能不能堅持把每個環節做好。

BridgeCraft 是我從零開始打造的技術部落格，用 Next.js App Router + Supabase 建構，目的很簡單：我想要一個完全屬於自己的寫作空間，不依賴任何平台、不受演算法擺佈。

這篇文章記錄三個讓我特別有感的開發階段：買網域、串接 Resend 做電子報、以及接入富文本編輯器。它們各自代表一個獨立部落格從「能跑」到「能用」再到「好用」的進化。

第一步：買網域——心理門檻比技術門檻高

買網域本身是最簡單的操作，刷卡、填資料、等 DNS 生效，十分鐘的事。但心理上，這是最大的一步。

因為一旦買了網域，就意味著你把這件事從「想想而已」變成了「我真的要做」。bridgecraft.dev 這個名字想了幾天，bridge 是連結、craft 是手藝，合起來就是我想做的事——用技術的手藝，把不同領域連結起來。

.dev 域名強制 HTTPS，對技術部落格來說是加分。買完之後最興奮的瞬間，是在瀏覽器輸入自己的網域，看到頁面真的出來了。那個感覺比任何 localhost:3000 都來得真實。

技術細節不多，但有一點值得提：如果你用 Vercel 部署，DNS 設定基本上跟著他們的文件走就好。Custom domain 設定完成後，SSL 憑證是自動簽發的，完全不用操心。

第二步：串 Resend——讓部落格「能溝通」

一個只能被動等人來看的部落格是不夠的。我希望讀者訂閱後，發布新文章時能主動通知他們。這就需要一套寄信的基礎設施。

我選了 Resend。原因很簡單：API 設計乾淨、Developer Experience 好、免費額度夠用、而且創辦人是前 Vercel 的人，和 Next.js 生態整合非常順。

串接 Resend 的流程大致是：

1. 註冊帳號 → 取得 API Key

1. 驗證寄信域名（在 DNS 加幾筆 TXT/MX 記錄）

1. 寫 Server Action 呼叫 Resend API 寄信

實際上最花時間的不是寫程式，而是等 DNS 記錄生效和處理各家信箱的收信規則。Gmail 和 Outlook 對新域名的信件有時候會丟到垃圾信匣，這需要一段時間讓域名建立信譽。

我目前用 Resend 處理三件事：

• 訂閱歡迎信：有人訂閱電子報時自動寄出

• 新文章通知：發布文章時批次通知所有訂閱者

• 聯絡表單：讀者可以透過網站寄信給我

最近還把信件模板重新設計過，仿照 Ghost 的電子報風格——置中的大標題、作者與日期、封面圖、完整文章內容。讓收到信的讀者不用點進網站，就能直接在信箱裡閱讀全文。

第三步：接富文本編輯器——從「能寫」到「好寫」

BridgeCraft 最初的編輯器就是一個 <textarea>，寫 Markdown。對工程師來說 Markdown 很自然，但這有幾個明顯的問題：

• 插入圖片很痛苦：要先把圖片上傳到某個地方，拿到 URL，再手動寫  語法

• 沒有所見即所得：寫完要存檔、回到前台才知道排版長什麼樣

• 對非技術背景的人不友好：如果之後有其他人想投稿或協作，Markdown 是一個門檻

跟一個做新聞的朋友交流，他直接說：「你這個編輯器也太陽春了吧。」

他說得對。一個好的後台編輯器應該讓人專注在內容上，而不是語法上。

選型：為什麼是 TipTap？

市面上的 Rich Text Editor 不少：Quill、Slate、Lexical、TipTap。我最後選了 TipTap，理由是：

• 基於 ProseMirror：底層扎實，社群成熟

• React 支援好：官方提供 @tiptap/react，和 Next.js 整合無痛

• Extension 架構：功能模組化，需要什麼裝什麼，不會 bundle 一堆用不到的東西

• 輸出 HTML：直接存 HTML 到資料庫，渲染時不需要額外轉換

圖片上傳：打通最後一哩路

光有編輯器還不夠，最關鍵的是圖片上傳。我的做法是：

1. 在 Supabase Storage 建立一個 post-images bucket

1. 寫一個 /api/upload 的 API Route，接收圖片、驗證管理員身份、上傳到 Storage

1. 在 TipTap 編輯器的工具列加一個「圖片」按鈕，點擊後選擇檔案，自動上傳並插入編輯器

限制了 5MB 大小和 JPEG/PNG/GIF/WebP 格式，避免有人傳奇怪的東西上來。

上傳完成後 Supabase Storage 會返回一個公開 URL，TipTap 直接把這個 URL 當作 <img> 的 src 插入內容中。整個過程對使用者來說就是：點按鈕 → 選圖 → 圖片出現在文章裡。非常直覺。

向下相容：舊文章怎麼辦？

一個需要注意的問題是，之前的文章都是 Markdown 格式，新文章是 HTML。我在渲染層做了一個簡單的判斷：如果內容開頭是 HTML 標籤就用 HTML 渲染，否則走原本的 Markdown 渲染流程。這樣舊文章完全不受影響。

結語

這三個功能——網域、寄信、編輯器——看起來都不是什麼大事，但每一個都代表著部落格從「技術 side project」往「真正的產品」邁進一步。

買網域讓它有了身份，Resend 讓它能主動觸及讀者，富文本編輯器讓內容創作的體驗上了一個台階。

如果你也在考慮自己架部落格，我的建議是：不要等到什麼都準備好了才開始，先讓它能跑，然後一步一步把它打磨好。