部落格留言系統從 Disqus 換成 Waline｜Vercel + Neon 免費架設與踩雷紀錄
把部落格的留言系統從 Disqus 換成 Waline，用 Vercel 和 Neon 免費架起來。記錄為什麼換、怎麼設定，以及在 Netlify 上卡關的過程。
這次部落格大翻新，順便把用了很久的 Disqus 換掉，改用 Waline。
過程比想像中曲折，中間還在 Netlify 上卡了好一陣子。這篇把選擇的理由、設定步驟和踩到的雷都記下來。
為什麼不用 Disqus 了
- 有廣告：免費版會在留言區塞廣告，而且越來越多。
- 載入慢：會多載入一堆追蹤用的程式。
- 外觀改不了：新的部落格是筆記本風格，Disqus 放進去很突兀。
- 留言資料不在自己手上：都存在 Disqus 的平台裡。
考慮過的選擇
| 方案 | 讀者要登入嗎 | 缺點 |
|---|---|---|
| Disqus 開訪客留言 | 不用 | 廣告、慢、外觀不搭 |
| Giscus | 要 GitHub 帳號 | 我的讀者大多沒有 GitHub |
| Google Form + 試算表 | 不用 | 沒有回覆串、沒有通知、要自己擋垃圾留言 |
| Waline | 不用，填暱稱就好 | 要自己架後端 |
我的讀者很多是搜尋簽證、打工度假資訊進來的，留言門檻越低越好，所以需要 GitHub 帳號的方案先排除。
最後選 Waline，因為：
- 填暱稱就能留言
- 沒有廣告
- 留言存在自己的資料庫，隨時可以匯出
- 回覆、email 通知、垃圾留言過濾、後台審核都內建
- 外觀可以用 CSS 改成跟網站一致
Waline 的架構
Waline 分成三個部分：
- 前端：放在部落格文章頁下方的留言框（
@waline/client） - 後端：處理留言的程式，部署在 Vercel
- 資料庫：存留言的地方，我用 Neon（免費的 PostgreSQL）
Waline 本身是開源免費的，Vercel 和 Neon 的免費方案對個人部落格的留言量也夠用。
設定步驟
1. 在 Neon 建資料庫
到 Neon 建一個專案，服務只需要開 Postgres。
接著打開 SQL Editor，貼上 Waline 官方提供的 PostgreSQL 建表語法（waline.pgsql）執行。完成後會有三張表：wl_comment、wl_counter、wl_users。
2. 把後端部署到 Vercel
用 Waline 官方文件裡的 Deploy 按鈕，它會幫你建一個新的 repo 和 Vercel 專案。
3. 填環境變數
在 Vercel 專案的 Settings → Environment Variables 填入資料庫連線資訊：
PG_HOST=你的主機
PG_DB=資料庫名
PG_USER=使用者
PG_PASSWORD=密碼
PG_PORT=5432
PG_SSL=true這些值從 Neon 的連線字串拆出來：
postgresql://使用者:密碼@主機/資料庫名?sslmode=require填完要到 Deployments 按 Redeploy，環境變數才會生效。
4. 註冊管理員
打開 你的後端網址/ui/register 註冊。第一個註冊的人就是管理員，所以部署完要馬上做。之後在 /ui 可以審核和刪除留言。
5. 接到部落格
安裝前端套件：
npm install @waline/client在文章頁放一個容器，等它快要捲到畫面裡時才載入 Waline，這樣不會拖慢文章本身的載入速度：
import('@waline/client').then(({ init }) => {
init({
el: container,
serverURL: 'https://你的後端.vercel.app',
path: '/zh/blog/nz/buy-car', // 每篇文章用網址路徑當作留言串的 key
lang: 'zh-TW',
meta: ['nick', 'mail'],
requiredMeta: ['nick'], // 只有暱稱必填
})
})外觀是用 Waline 提供的 CSS 變數調整的，把邊框、按鈕顏色換成網站的墨線和紅色，就變成筆記本風格了。
我另外保留了一個退路：如果沒有設定 Waline 的後端網址，文章頁會顯示原本的 Disqus，這樣切換期間留言區不會壞掉。
踩到的雷
雷 1：在 Netlify 上部署，全部都是 Not Found
我的部落格本來就放在 Netlify，所以一開始想把 Waline 後端也放那邊，照著官方的 Netlify 教學做。
結果部署成功，但打開後端網址只有一行 Not Found，連管理頁也一樣。
查了很久才發現原因：Netlify 會把後端程式打包成單一檔案，但 Waline 是在執行的時候才去讀自己的程式檔，打包之後那些檔案不見了，所以它什麼網址都不認得。如果叫 Netlify 不要打包、整包帶上去，路由就正常了，但整包有將近 400MB，超過 Netlify 函式 250MB 的上限，一樣部署不了。
最後直接改用 Vercel，一次就成功。Waline 的後端套件名字就叫 @waline/vercel，那邊才是它主要支援的平台。
結論：Waline 後端直接放 Vercel，不要在 Netlify 上浪費時間。 部落格本身放 Netlify 沒問題，兩邊分開就好。
雷 2：PG_PORT 一定要填
Neon 的連線字串裡沒有寫連接埠，因為 5432 是 PostgreSQL 的預設值。但 Waline 的預設連接埠不是 5432，所以一定要自己加上 PG_PORT=5432。
雷 3：貼環境變數時多了一個換行
後端跑起來了，但留言送不出去，錯誤訊息是：
database "
neondb" does not exist仔細看會發現 neondb 前面多了一個換行。是貼環境變數的時候不小心多帶到的，資料庫名稱變成「換行＋neondb」，當然找不到。把那個值清空重新手打就好了。
雷 4：Neon 的設定指令不用跑
建完 Neon 專案後，它會顯示一串「在你的專案裡設定 Neon」的指令。那是給要在自己程式裡直接連資料庫的人用的。部落格本身不會連資料庫，連資料庫的是 Waline 後端，所以那串指令可以直接跳過。
建議再做的設定
SECURE_DOMAINS：在後端環境變數填自己的網域，避免別的網站拿你的後端去用。COMMENT_AUDIT=true：想要留言先審核再顯示的話可以開。
換完的感想
留言區終於跟整個網站長得一樣了，而且不用登入就能留言。
唯一的代價是後端要自己顧：偶爾要去 Vercel 更新一下版本。但比起每次打開文章都看到廣告，我覺得很值得。
如果你也想換掉 Disqus，希望這篇能幫你少走一點冤枉路～歡迎在下面留言試試看新的留言系統！
