使用 GoatCounter 與 Zeabur 搭建網站數據統計系統

前言#

在「2024 年了，我的博客有了什麼變化」一文中，我介紹了自己使用 Serverless 平台和一些開源項目搭建的博客系統，也開啟了這個系列教程來記錄搭建和部署過程。

本篇是關於統計系統的解決方案。

統計系統方案#

相比起博客本體和評論系統，我在很長的一段時間其實都沒有在意過統計系統（~~主要當時也沒人看~~），更加沒考慮太多 SEO 或是其他推廣方向上的事，但後來逐漸發現，其實統計下來的數據並不只是一張好看的可以用來發推的圖表，其對於博客的選題、內容都有著很大的參考價值。

其實主流成熟的方案都能夠滿足基本的需求，即使是免費的 Google Analytics 也完全夠用，但在博客發展過程中，我依然因各種原因有過幾次迭代，最終使用了 GoatCounter 這一方案。

splitbee#

我最初使用的是一個免費的工具 splitbee，它提供了免費的基礎統計額度，有著還不錯的界面，並且還支持一些複雜的用戶追蹤，A/B test 等，但印象裡好像只能保留半年的數據，並且每月超過 5000 pv 後就需要升級了，所以後來放棄了。

Cloudflare + Google Search Console#

cloudflare_web_stats

放棄 splitbee 之後，很長一段時間我沒有集成額外的統計應用，而是用的 Cloudflare 自帶的站點統計，但是發現它其實統計的只是網絡總流量，有包括爬蟲在內的非常多的無效數據，並且沒有精確到路徑等細節。

google_search_console

後來了解到了 SEO 這一概念後，又添加了 Google Search Console 這一統計維度，這也是目前覺得對我寫博文最有意義的數據，主要呈現的是用戶在搜索引擎中觸達我博客站點的關鍵詞以及通過搜索點擊進入我博客的頁面路徑。

可以看到，一篇「Warp，iTerm2 還是 Alacritty？我的終端折騰小記」為我帶來了許多訪客，而關於博客搭建、智能合約開發也是大部分從搜索引擎來的自然用戶對我博客的第一印象。

Umami + Supabase + Netlify#

yu_umami_record

但是上述兩者依然只能看到網站整體的數據，想精確到某篇文章在一段時間的表現或者文章發布後的實時訪問數據，依然需要一個統計系統，我在看了 Reorx 的一篇「搭建 umami 收集個人網站統計數據 | Reorx’s Forge」選擇使用了 umami 這一開源、易自部署的統計系統，界面簡潔，功能易用，很方便集成到自己的博客系統中。

使用了一年半，一直倒沒出現什麼問題，只不過可能因為自己用得比較早，在一次大版本更新的時候數據庫 Migration 腳本出現了不兼容的字段更新，其實有點不理解這樣量級的開源項目為什麼會出現這樣的問題，也看到 issue 中有很多其他用戶有同樣的訴求，但最終並沒有給出一個比較好的解決方案。

但其實最大的问题是一個統計系統依賴了兩個平台，部署和維護上都還是有些太重了。當數據庫或是 Netlify 任一出現問題或需要遷移時，會帶來許多額外的成本。於是前段時間在更新博客評論系統的時候，想着乾脆就一起更換為更輕量的 GoatCounter。

GoatCounter + Zeabur#

goatcounter_stats

這個小眾的統計系統是我在看 Reorx 的博客代碼更新的時候偶然發現的，一下子被這種 Retro Internet 的風格所吸引，幾乎沒有任何多餘的按鈕，功能卻很完備，而且使用的是 go 單二進制文件 + sqlite 數據庫單文件的架構，輕量而易於部署，於是打算遷移。

其實我自己的 GoatCounter 是部署在 fly.io 上的，但我在上一篇 Remark42 的文章中已經非常詳細地介紹了 fly 的操作說明，不想有太多重複，剛好最近又在重度使用 Zeabur 這一 Serverless 平台，因此本文將以 Zeabur 為例，方式同樣適用於其他類似平台。

我也在下文的 Zeabur 部署方案之後提供了 fly.io 和在 VPS 上使用 docker-compose 部署的配置文件，供大家參考。

GoatCounter 部署說明#

GoatCounter 本身代碼開源 —— 「GitHub - arp242/goatcounter」，文檔清晰易讀，可以根據自己的實際需求進行配置。GoatCounter + Zeabur 的方案僅牽扯到單個服務，數據庫使用的是 sqlite 掛載於 volume 中，所以部署起來非常簡單。

使用 Zeabur 部署#

Zeabur 對於容器應用的部署是需要 Developer Plan 的，5 美元 / 月，但是像這樣的鏡像服務整體用量和費用都較低，每月的額度足夠部署非常多服務，可以酌情選擇。整體部署流程比起 fly.io 簡單很多，所有操作都可以使用 Web 界面完成，不需要額外安裝命令行工具等。

註冊 zeabur#

zeabur_login

訪問 Zeabur 官網，並點擊右上角，使用 GitHub 賬號授權登錄。

創建新項目#

zeabur_new_project

進入主界面後，點擊右上角 創建項目 按鈕。

zeabur_hk_region

我選擇了香港的 AWS 機房，不同機房的訪問速度、性能和價格會有一些差異，可以根據自己的需求進行選擇。

配置鏡像部署#

zeabur_build

在下一步中選擇 Docker 容器鏡像進行部署。

zeabur_docker_custom_config

由於我們使用的是自己構建的鏡像，官方也沒有上線 GoatCounter 模板，因此我們點擊選擇自定義。

zeabur_prebuilt_edit_toml

這一步可以自己在界面上填寫各種配置項，但可能由於我習慣了 fly.io 的文件配置模式，我選擇左下角的 編輯 TOML 文件，大家也可以直接複製我的配置文件並直接修改。

name = "yu-goatcounter"

[source]
image = "pseudoyu/goatcounter"

[[ports]]
id = "web"
port = 8080
type = "HTTP"

[[volumes]]
id = "goatcounter-data"
dir = "/data"

[env]
PORT = { default = "8080" , expose = true }
GOATCOUNTER_DB = { default = "sqlite3://data/goatcounter.sqlite3" , expose = true }

zeabur_prebuilt_goatcounter_toml

配置好後點擊右下角部署按鈕即可。

部署完成#

yu-goatcounter_project

點擊部署後，等待片刻，會有一個生成的項目默認名稱，可以在左上角的設置中去修改為可讀性較強的名稱，如 yu-goatcounter。

配置自定義域名#

zeabur_create_domain

服務部署完成後，我們需要進行域名綁定才能通過公網訪問網站，Zeabur 提供了免費的二級域名 xx.zeabur.app，也可以綁定自己的域名。

zeabur_custom_domain

其中生成域名可直接使用，無須進行其他配置，如 goatcounter.zeabur.app；而如果使用的是自定義域名，則需要在自己域名管理後台添加 CNAME 記錄，指向格式為 xxx.cname.zeabur-dns.com 的機房地址。

cloudflare_goatcounter_config

例如我的域名托管在 Cloudflare 上，添加的 CNAME 記錄如上圖所示，有去問過官方，說如果選 AWS HK 機房的話可以不使用 Cloudflare 的代理，速度理論上會更快，可以根據自己的需要酌情配置。

此外，如果你選擇的是華為雲機房，則需要域名備案並且額外新增一條 TXT 記錄，可以根據提示進行操作。

zeabur_custom_domain_success

顯示綠色則為配置成功，至此我們的 GoatCounter 服務就部署完成了。

數據備份#

我們在配置時候有這麼一段

[[volumes]]
id = "goatcounter-data"
dir = "/data"

功能是將容器內的 /data 目錄（即我們的 sqlite 數據庫存在的位置）掛載到一個 id 為 goatcounter-data 的存儲卷，如果不掛載存儲卷的話，容器重啟或重新部署數據將會丟失。

關於存儲卷這一點 Zeabur 的界面上沒有很直觀的顯示和管理操作，以至於我總是懷疑自己的配置是否生效。

zeabur_add_goatcounter_backup

研究了半天發現可以先在設置中暫停服務，然後在上面的備份模塊新增一個備份，點擊下載後可以在本地看到我們備份文件，目錄層級如下：

data/
└── goatcounter-data
    └── goatcounter.sqlite3

這樣則能表示我們的數據成功持久化了，希望 Zeabur 能在界面上有更直觀的顯示。

使用 fly.io 部署#

純免費的方案依然可以參照我提到的這篇「從零開始搭建你的免費博客評論系統（Remark42 + fly.io）」，僅在 fly.toml 配置部分不同，我也提供的我所使用的配置文件 —— 「fly.toml」供大家參考。

使用 Docker 與 docker-compose 部署#

有意思的是，因為 goatcounter 的作者很有堅持，覺得這樣單文件的應用容器化反而會增加更多維護成本，所以不提供官方鏡像，不過自己在 vps 或者 serverless 平台部署有個鏡像還是方便一些，所以我使用 Github Actions 做了個構建鏡像和上傳 Docker Hub 的 CI，有需要的可以使用，對應的 Dockerfile 和 Docker Compose 文件也可以參照這個 Commit，或者直接使用 pseudoyu/goatcounter 和 docker-compose.yml 文件即可。

version: '3'

services:
  goatcounter:
    image: pseudoyu/goatcounter
    ports:
      - 8080:8080
    environment:
      - PORT=8080
      - GOATCOUNTER_DB=sqlite3://data/goatcounter.sqlite3
    volumes:
      - ./data:/data
    restart: unless-stopped

GoatCounter 配置說明#

上文我們完成了 GoatCounter 服務的部署，現在就可以通過我們生成 / 自定義的域名訪問到我們的統計系統服務了，如我是通過 https://goatcounter.pseudoyu.com 進行訪問的。

goatcounter_create_user

第一次登錄需要創建一個用戶，填寫郵箱、密碼點擊 Create 即可。

goatcounter_dashboard_success

登錄成功後，當前還沒有數據，會提示一個腳本，後續在我們博客使用的配置中會用到。

博客配置 GoatCounter#

跟著上文我們完成了 GoatCounter 服務的部署和基礎配置，現在則需要在我們的博文中加入統計組件，以我使用的 Hugo 博客為例。

<script data-goatcounter="https://goatcounter.pseudoyu.com/count"
        async src="//goatcounter.pseudoyu.com/count.js"></script>

add_goatcounter_script_in_hugo

將上述代碼加到我 hugo 主題的 head 中即可，如我的 Hugo 主題在 layouts/partials/head.html 這一文件，不同主題或是不同 SSG 框架位置有所不同但大同小異。

有一點要注意的是， goatcounter 會忽略來自 localhost 的請求以避免在本地預覽時造成太多髒數據，因此在本地調試時是看不到數據的，需要部署網頁才能看到訪問數據。

final_display_of_goatcounter

收集了數據後的效果大致如上圖所示，還可以在 GoatCounter 界面中設置一些配置項、新增網頁、查看詳細數據等，包括還可以顯示每個頁面的訪問計數等，可以自己根據文檔進行探索。

總結#

至此我們的博客統計系統就搭建完成了！本文是我的博客搭建部署系列教程之一，博客主題體部分都已經完成了，剩下只是一些例如博客內搜索等細節體驗優化，希望能對大家有所參考。