如何零成本给博客集成 umami 数据统计分析功能

2022年8月14日 · 553 字 · 2 分钟 · Hugo Ladder 教程 Analytics Umami

创建数据库

数据库用的是 supabase 提供的有限额的 postgres 数据库，创建一个 supabase 账号，新建一个项目，输入 Datebase password 即可创建数据库服务。

WWmfTm

创建可能会话费几分钟时间，创建完成后只需要拿到 DATABASE_URL 即可。

hvpSuQ

托管 umami

托管 umami 服务用的是 vercel。创建好数据库实例之后，可以通过 Vercel 一键部署 umami 服务了。访问 umami 官方文档 的 Running on Vercel 模块，有操作说明与一键部署脚本。

首先我们登录 GitHub 账号， fork umami (https://github.com/umami-software/umami) 项目。

登录 vercel ，创建一个的账号，建议使用 GitHub 账号注册登录，在 new project 中选择 import 你刚刚 fork 的项目。

之后填写环境变量，这里我们需要填写两个环境变量

  • DATABASE_URL：在创建数据库中拿到的 DATABASE_URL
  • TRACKER_SCRIPT_NAME： 这里默认的 tracker_script_name 可能会导致部分 AdBlock 拦截请求，损失一部分的访问数据，所以这里我填的是 hugo-ladder。

最后在 Build 阶段， build command 记得填写 yarn build && yarn update-db，这样的话会自动 migrate 数据库的表。无需自己手动导入。

rtIZCn

当然如果你想自己导入的话，也可以直接从这里 https://github.com/umami-software/umami/blob/master/sql/schema.postgresql.sql 获取需要的表。

配置 umami

在 vercel 部署完成 umami 后会得到一个 <deploy-id>.vercel.app ，我们访问它，默认的账号密码是 admin 和 umami。

完成基础帐号配置后，点击侧边栏网站 Tab，点击添加网站。填写网站基本信息，可以勾选 enable share URL，这样任何人都可以访问这个数据看板。

我们拿到对应的 data-website-id 和 src ，填入主题配置中的 params.analytics.umami.website_id 和 params.analytics.umami.url 即可。

YLRdbm

最终，我们可以得到本站数据统计看板的功能🎉🎉🎉