Hexo + Umami + Vercel + Supabase + 搭建网站分析系统

发表于 更新于 分类于 阅读次数：

Umami 是一个开源的、以隐私为中心的 Google Analytics 替代方案。Umami 提供强大的网络分析解决方案，不会侵犯用户隐私。此外，当自行托管 Umami 时，可以完全控制自己的数据。

Umami 基于 Node.js 开发，支持 Mysql 和 Postgresql 数据库，除服务器外，它甚至可以部署在 Serverless 中。自部署的好处在于某些商业服务滥用用户数据，当数据保存在自己手中时可以确保不会分享给第三方

官方文档介绍了多种部署方式，包括使用自己服务器，或者第三方平台，例如 Netlify、Heroku、Railway 等等，不过这些第三方平台一般都不提供数据库服务，所以我选择使用 Supabse 提供的免费数据库服务，以及 Vercel 的部署。

一、准备条件

在使用前，先注册并登录好 GitHub、Vercel、Supabase 三个平台，并在 GitHub 平台 Fork Umami 的项目仓库。

GitHub：https://github.com/umami-software/umami
Vercel：https://vercel.com/
Supabase：https://supabase.com/

二、在Supabase建立数据库

在官网选择 Free 方案，进入 Create a new project 页面，按要求填写相关内容。Name 填写任意项目名，Database Password 可以使用下方工具 Generate a password 生成，并保存到记事本备用。

等待数据库建立，需要几分钟的时间。

建立之后，点击左下方的 Project Settings，选择 Database，找到 Connection string 中的URL一栏，复制内容，并将[YOUR-PASSWORD]替换为上一步生成的密码，稍后会用到。

Supabase 平台的操作就结束了。

三、在 Vercel 部署 Umami

登录 Vercel 之后，点击右上角 Add New Project，并导入事先Fork的项目仓库。

在 Configure Project 中需要设置两个环境变量（Environment Variables）。

分别添加 DATABASE_URL 和 HASH_SALT。

DATABASE_URL: 是上一步在 Subabase 复制的 URL，记得替换自己的 Password；
HASH_SALT: 需要自己随意生成一长串字符串。

特别提醒：需要在数据连接信息后面加上 ?pgbouncer=true，例如：

1
postgresql://postgres:密码@db.随机字符.supabase.co:5432/postgres?pgbouncer=true

最后点击 Deploy，等待两分钟。

四、自定义域名

由于 Vercel 提供的域名在大陆无法访问，所以如果是想大陆流畅访问，建议绑定一个自己的域名。

1、在自有域名的 DNS 服务中添加一条记录，选择 CNAME 类型转发，记录值填写为：cname.vercel-dns.com

2、然后在 Vercel 中找到 umami 项目，点击 Settings 标签卡，跳转页面后点击左侧的Domains菜单项，输入你自己定义的域名点击 Add 按钮即可。

五、使用 Umami

按照上述步骤，Umami 已经部署成功了，通过绑定的域名进入网站，默认用户名和密码分别是 admin 和 umami ，进入后台可以修改密码、设置语言，然后就可以添加网站了。

1、完成基础帐号配置后，点击侧边栏网站 Tab，点击添加网站。

2、填写网站基本信息

3、网站创建完成，点击编辑按钮进入如下页面，获取 umami 脚本,

4、在Hexo中使用该信息
如果主题没有适配 umami 的话，可以使用 hexo injector 直接注入，hexo 版本需要大于 5

  • 在博客项目根目录，创建scripts文件夹
  • 在scripts文件夹下，创建injector.js文件
1
2
3
// your-website-id： 上面的umami脚本中获取的
// your-umami-url： 上面umami脚本中获取的
hexo.extend.injector.register('head_end', '<script async defer data-website-id="<your-website-id>" src="<your-umami-url>"></script>');

然后重新部署hexo就可以了

六、使用 最终效果

七、FAQ

1、 在Vercel上进行部署的时候，报了如下错误，怎么解决

1
2
3
4
5
6
7
8
9
$ node scripts/check-db.js
✓ DATABASE_URL is defined.
✗ Unable to connect to the database.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "check-db" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

A: 通过在 数据连接信息后面加上 ?pgbouncer=true解决的，如上文

七、参考

1、使用 Vercel + Supabase 零成本部署 Umami
2、使用 vercel+supabase 免费部署 umami
3、从零开始搭建一个免费的个人博客数据统计系统：umami + Vercel + Heroku
4、自建 UMAMI | 一个开源网站分析工具
5、使用 Umar 统计个人网站访问数据