為 Astro 打造專屬留言板：使用 Artalk 與 Ubuntu VPS 實戰指南

為 Astro 打造專屬留言板：使用 Artalk 與 Ubuntu VPS 實戰指南

作為一名開發者，擁有 100% 數據掌控權的留言系統是件浪漫的事。本文將分享如何透過 Artalk (Go 語言撰寫的輕量級留言系統)，結合 Docker、Nginx 與 Astro，在自建的 Ubuntu VPS 上搭建一個專業且支援深色模式的留言板。

為什麼選擇 Artalk？

輕量高效：Go 語言開發，記憶體佔用極低。
功能完備：內建管理後台、支援 Markdown、社交登入與多種推送通知。
數據隱私：所有資料存放在自己的伺服器，無第三方追蹤。

第一階段：VPS 後端部署 (Docker)

我們使用 Docker 快速啟動 Artalk 服務。請注意，Artalk 容器內部預設監聽 23366 埠。

1. 建立設定檔目錄

mkdir ~/artalk && cd ~/artalk

2. 啟動 Artalk 容器

將外部 8080 埠映射至容器內的 23366，並掛載 data 目錄以持久化儲存留言資料。

docker run -d \
  --name artalk \
  -p 8080:23366 \
  -v $(pwd)/data:/data \
  --restart always \
  artalk/artalk-go

第二階段：Nginx 反向代理與 SSL 憑證

為了讓留言板支援 HTTPS 並使用專屬子網域（如 artalk.airandom.com），我們使用 Nginx 進行反向代理。

1. 安裝環境

sudo apt update -y
sudo apt install nginx certbot python3-certbot-nginx -y

2. 設定 Nginx 虛擬主機

建立設定檔：sudo nano /etc/nginx/sites-available/artalk

server {
    listen 80;
    server_name artalk.airandom.com;

    client_max_body_size 10m; # 若支援圖片上傳，建議加大

    location / {
        proxy_pass http://127.0.0.1:8080;

        # 傳遞真實客戶端資訊
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 支援 WebSocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

啟用設定並重啟服務：

sudo ln -sf /etc/nginx/sites-available/artalk /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

3. 自動化 SSL 部署

使用 Certbot 獲取 Let’s Encrypt 免費憑證：

sudo certbot --nginx -d artalk.airandom.com

第三階段：後台初始化與安全設定

1. 建立管理員帳號

進入容器內部執行管理員建立命令：

docker exec -it artalk artalk admin

按照提示輸入 Email 與密碼。完成後即可造訪 https://artalk.airandom.com 登入管理後台。

2. 設定信任網域 (Trusted Domains)

為了防止惡意盜刷，請在後台「站點設定」中加入以下允許的網域：

第四階段：Astro 前端整合

1. 建立 Artalk 元件

在專案中新增 src/components/Artalk.astro。此元件已針對 View Transitions 進行優化，確保換頁時留言板能正確重新初始化。

[詳細代碼請參考你的 Artalk.astro 草稿…]

2. 引用元件

修改文章的動態路由頁面（例如 src/pages/[collection]/[…slug].astro）：

---
import Artalk from '@/components/Artalk.astro';
// ... 其他邏輯
---
<Layout>
  <article>
    <h1>{entry.data.title}</h1>
    <Content />
  </article>

  <Artalk />
</Layout>

程式碼差異如下圖

結語

現在，部落格已經擁有了一個極速且專業的留言系統。透過 VPS 自建後端，不僅省去了第三方服務的費用，更掌握了資料的完整控制權。