使用vercel部署Umami网站统计服务、可显示近一年的pv、uv数据

周润发2024-09-142024-09-14

简单介绍 🥰

Umami 演示网站用户名与密码为：zhourf可以体验一下看看。
Umami 是一种简单、快速、注重隐私的 Google Analytics 替代品，因为百度统计使用unload导致浏览器报错和一系列性能问题，并且去广告插件之类的对百度统计都有屏蔽，导致无法获取真实的数据，所以决定之下还是选择了自搭建umami。这也是向访客隐私迈出的一大步，也就是说在未来我的博客将不会将访客数据传输给第三方，避免了潜在的隐私风险。

1.事前准备

域名（非必须，你也可以使用免费域名，或使用vercel分配的域名也可以，但分配的这个域名被墙严重，建议设置自定义域名，然后使用我的 vercel CDN 服务进行加速）
GitHub（必须，你需要注册一个GitHub帐号）
Vercel（必须，你需要注册一个vercel帐号）

2.Vercle部署

首先打开Vercel 创建一个Postgres数据库，打开上方的Storage储存，然后点击下方Postgres数据库，点击Create创建数据库,Accept接受条款，Database Name为你的数据库名称，可以随意设置，我这里就设置这个项目的名称 umami，Region为你数据库的地区，可以随意选择，我这里选择新加坡的。物理距离比较近一点感觉会快一点吧，然后点击Create创建。
点击Show secret显示完整密钥，然后点击Copy Snippet复制你的密钥，保存下来格式如下，（注意你当然不要把*号复制出来，复制出来后，只要双引号中的内容）好了数据库设置完毕，我们可以一键部署了。
1
postgres://default:************@ep-royal-violet-a1klt79l.ap-southeast-1.aws.neon.tech:5432/verceldb?sslmode=require
因为这个项目提供了Vercle一键部署,点击自动部署并创建仓库，点击前往 Deploy
Repository Name 设置你项目的名称，我设置为 umami 你可以自定义， Create private Git Repository勾选左下角就是设置为私库不勾选则反之。然后点击Create 创建，环境变量中Name添加DATABASE_URL他已经给你填写好了，然后在Value中填写你上面上面保存的Postgres数据库内容，点击Deploy部署。
等待部署三分钟左右就好了。
部署完成

3.自定义域名设置DNS加速

点击Add Domain设置自定义域名，我设置为 umami.001315.xyz 点击ADD添加（如没有域名的小伙伴忽略此步，点击右上角箭头进入到项目页面在点击Visit就可以看到你部署的umami页面了，但是这个域名是vercel分配的域名被墙严重，等下教大家如何加速）
去你的域名解析商添加自定义域名解析，我是托管在cloudflare的，进入你的域名DNS记录点击添加记录，类型选CNAME，名称 设置为你在vercel设置的域名前缀，我是 umami ，使用vercel CDN进行加速目标填写vercel.001315.xyz小黄云关闭。添加完成后，稍等片刻就可以在vercel的自定义域名页面看到两个对勾符号，这表示解析成功。
我们测试一下使用vercel分配给我的域名是 umami-black-theta.vercel.app 在itdog进行测速，基本是全红，没法看。然后我们在看使用vercel CDN进行加速的域名 https://umami.001315.xyz 效果还是不错的。
打开 Umami，第一次登录输入默认账号密码
1
2
账号：admin
密码：umami
登录后右上角小地球可以切换语言，看不懂自行切换。
点击左上角 设置 网站 添加网站 输入你自己要设置的网站名称与网站地址。
点击 跟踪代码 下方如下格式的就是你的统计代码，添加在你需要的网页中，就可以记录数据了，我们使用之前的博客封面的项目举例说明。并不是所有的后台都有统计代码的添加栏目，那么这时我们就要手动添加了，一般来说，我们可以将代码添加至网页的<body> 标签和 </body> 标签之间，如下图所示，但是很多人看到下面的图,自己操作的时候也不知道添加到哪里，我们可以利用chatGPT工具,把这个项目首页代码index.html的内容发给chatGPT.
这下学会怎么使用了统计代码了嘛？把chatGPT给你的代码复制到你项目那个代码替换掉就好了！