静态博客浏览量和点赞功能的需求与方案

本文全文由 AI 生成。

需求

博客是 Hexo 生成的纯静态站点，托管在 GitHub Pages 上。静态站本身没有后端，想实现两个功能就必须引入一个数据服务：

• 浏览量：每篇文章被看了多少次，显示在文章元信息里；
• 点赞：读者可以给文章点一个赞，可以取消。

约束和期望：

• 尽量不花钱；
• 数据归自己，不寄希望于随时会倒闭/被墙的第三方计数服务；
• 不会被 uBlock Origin 这类拦截插件拦截（常见统计域名几乎都在 EasyPrivacy 名单里）；
• 顺带把评论功能的后端也备好，以后想开就能开。

方案选型

对比了几类方案：

方案	问题
不蒜子	服务端经常性故障，且被拦截器收录
GoatCounter / Umami 云版	好用，但脚本域名同样在拦截名单里，且只有统计没有点赞
Plausible 等隐私友好统计	不被拦，但是付费，且同样没有点赞
手机自建服务器	免费可控，但家宽无公网 IP、设备需要 7×24 在线，稳定性堪忧

最终选择自托管开源评论系统 Artalk：它原生提供页面浏览量（PV）和页面投票（赞/踩）接口，顺带送一整套评论系统；配上免费托管和免费数据库，总成本为零。

整套架构：

GitHub Pages（静态前端）
        │  fetch 调用公开 API
        ▼
Render（Web Service，免费）── 运行 Artalk 官方 Docker 镜像
        │
        ▼
Neon（Serverless PostgreSQL，免费）── 持久化存储
        ▲
UptimeRobot（免费）── 每 5 分钟探活，防止实例休眠

各组件的分工：

• Render：托管 Artalk 后端。免费实例 15 分钟无访问会休眠，由 UptimeRobot 探活保活；
• Neon：Render 免费实例没有持久磁盘，容器重启数据就没了，所以数据存到外部 Postgres；
• UptimeRobot：定时 HTTP 探活，顺带充当宕机监控，服务挂了会发邮件告警。

关键配置

Render

• 镜像 artalk/artalk，区域选离读者近的（如 Singapore）；
• 不写配置文件，全部用 ATK_ 前缀的环境变量配置，要点：

变量	说明
ATK_DB_TYPE / ATK_DB_HOST / ATK_DB_PORT / ATK_DB_NAME / ATK_DB_USER / ATK_DB_PASSWORD / ATK_DB_SSL	对应 Neon 的 Postgres 连接信息
ATK_APP_KEY	随机长字符串，用于登录令牌加密
ATK_TRUSTED_DOMAINS	博客域名，空格分隔多个；后端据此下发 CORS 头

数据通路（前端接入）

Artalk 官方的 Artalk.init 会强制渲染整个评论界面，没法只用点赞，所以前端直接调它的公开 HTTP API（与官方前端同一套接口）：

• POST /api/v2/pages/pv：上报一次浏览，响应里直接带回最新 PV，后端按 page_key（文章路径）自动注册页面；
• GET /api/v2/comments?page_key=…&site_name=…：公开接口，一次拿到页面 ID、赞数和浏览量；
• POST /api/v2/votes/page/{id}/up：投票；同一 IP 重复请求一次为取消，响应带回最新计数。

页面注入一小段原生 JS 完成三件事：上报 PV、渲染“👍 N”按钮（点击投票/取消，状态记在 localStorage）、把浏览量和点赞并排显示在文末。评论区暂不加载，以后需要时把 Artalk.init 加回来即可。

管理后台

Artalk 后台（/sidebar/）里需要做三件事：创建管理员账号、添加与前端配置一致的站点名、把博客域名加入可信域名。访问统计和点赞数据都能在后台看到。

现状与遗留

• 浏览量和点赞已经可用，数据存在自己的数据库里，随时可导出；
• Render 免费实例重新部署时会有 1~2 分钟中断，期间点赞请求会失败；
• 评论功能后端已就绪，前端按需开启；
• 依赖清单：Render（免费 750 小时/月，单服务常驻刚好够）、Neon（免费额度充裕）、UptimeRobot（免费 50 个监控位）。