如何部署 Umami 网站统计工具

这篇文章在去年的6月份写过一篇,但是后面觉得不是很好用就没有用了,可以看看之前的文章跟着之前的文章部署也能成功。写这篇文章就是重新部署重新使用,个人博客其实不需要哪些复杂的东西,谷歌分析相对来说是更复杂的,如果你做的是电商站用谷歌分析是很有用的。个人博客用 Umami 就足够了。

Umami是什么?

Umami 是一个简单、易用自托管的开源网站访问流量统计分析工具。 Umami 不会使用 Cookie ,不跟踪用户,且所有收集的数据都会匿名化处理,符合 GDPR 政策,资源占用很低,虽然功能简单,但分析的数据内容很丰富,基本的来源国家,来源域名,使用的浏览器、系统、设备,访问的网页这些都有。

Umami如何部署?

这里部署需要用到三个工具 VercelSupabaseUmami最主要的就是项目本身,这个项目有多种部署方式,今天的这种方式是不需要花钱买服务器的,用的都是免费的。如果你还没有账号的话,先注册好GitHub、Vercel、Supabase 的账号再进行下面的操作。

1、在 Supabase 建立数据库

supabase pricing.png

在官网选择免费方案,然后提示登录,用 GitHub 账户登录即可,之后,来到 ”Create a new organization“页面,按照要求填写就可以。Name 你可以填写本项目的名称,Type of organization按照默认的选择,Pricing Plan 默认。

Create a new organization.png

来到“Create a new project”页面,Name按照自己的需求填写,Database Password可以自己设置也可以点击使用下方工具 Generate a password 生成,并且复制下来保存。设置完成点击 Create new project 。

Create a new project.png

等待一会,数据库就创建好了。创建好之后,点击项目管理,然后点击数据库,找到 Connection string 中的URL栏目,复制内容,将 [YOUR-PASSWORD] 换成你刚才生成的密码,记得将括号去掉,直接填写密码, 就生成了一个新的链接。

Connection string.png

在这个平台的操作就完成了。

2、在 Vercel 部署 Umami

首先来到 Umami 的 GitHub 项目页点击 Fork,之后按照步骤操作即可,然后来到 Vercel ,点击右上角 Add New Project,你就会看到你导入的 Umami 项目。

Import Git Repository.png

点击Import,然后就是配置环境变量。

Environment Variables 1.png

在这里只配置添加 DATABASE_URL 。这一步是在 Supabase 复制的 URL,记得替换自己的 Password。最后点击 Deploy。之后等待几分钟就可以了

之前环境变量还需要填写HASH_SALT,现在已经是不需要了,填写了的话很可能会部署成功,部署不成功的话重新部署把HASH_SALT删掉即可。之后就成功了。

Congratulations.png

3、使用 Vercel 自带的 Storage 数据库

umami-postgres.png

点击 Storage 创建数据库,按照步骤操作即可。这一步相对来说比较简单。

4、使用 Umami

你可以直接使用 vercel 给的域名,但是在国内访问大概率会出现问题,因为 Vercel 提供的域名在大陆无法访问。我绑定的是我的二级域名在你的域名服务商解析一下你想要绑定的二级域名,vercel会给出DNS。

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

添加网站之后就需要将给到的跟踪代码添加到你的网站上去。我用的是 GeneratePress 主题,这个主题我还没用熟,就将这个问题给到ChatGPT,很快就给出了答案。

创建一个新的钩子

在 “元素类型” 中选择 “钩子”。

在 “挂钩名称” 下拉菜单中选择 wp_head(如果你想在 <head> 部分插入脚本)或 wp_footer(如果你想在 <footer> 部分插入脚本)。
在内容框中粘贴以下代码:

<script defer src="https://aaaa.yesreho.com/script.js" data-website-id="13a531ea-573c-4e0a-b030-7bca38871662"></script>

页面底部的 “显示规则” 中设置为 “全站”(或者根据需要选择特定页面)。
发布这个元素

以上就是部署的过程。

发表评论