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

简单介绍 🥰

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

1.事前准备

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

2.Vercle部署

  1. 首先打开Vercel 创建一个Postgres数据库,打开上方的Storage储存,然后点击下方Postgres数据库,点击Create创建数据库,Accept接受条款,Database Name为你的数据库名称,可以随意设置,我这里就设置这个项目的名称 umamiRegion为你数据库的地区,可以随意选择,我这里选择新加坡的。物理距离比较近一点感觉会快一点吧,然后点击Create创建。
    Vercle部署1
    Vercle部署2
    Vercle部署3

  2. 点击Show secret显示完整密钥,然后点击Copy Snippet复制你的密钥,保存下来格式如下,(注意你当然不要把*号复制出来,复制出来后,只要双引号中的内容)好了数据库设置完毕,我们可以一键部署了。

    1
    postgres://default:************@ep-royal-violet-a1klt79l.ap-southeast-1.aws.neon.tech:5432/verceldb?sslmode=require

    Vercle部署4

  3. 因为这个项目提供了Vercle一键部署,点击自动部署并创建仓库,点击前往 Deploy

  4. Repository Name 设置你项目的名称,我设置为 umami 你可以自定义, Create private Git Repository勾选左下角就是设置为私库不勾选则反之。然后点击Create 创建,环境变量中Name添加DATABASE_URL他已经给你填写好了,然后在Value中填写你上面上面保存的Postgres数据库内容,点击Deploy部署。
    Vercle部署5
    Vercle部署6

  5. 等待部署三分钟左右就好了。
    Vercle部署7

  6. 部署完成
    Vercle部署8

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

  1. 点击Add Domain设置自定义域名,我设置为 umami.001315.xyz 点击ADD添加(如没有域名的小伙伴忽略此步,点击右上角箭头进入到项目页面在点击Visit就可以看到你部署的umami页面了,但是这个域名是vercel分配的域名被墙严重,等下教大家如何加速)
    自定义域名设置1
    自定义域名设置2

  2. 去你的域名解析商添加自定义域名解析,我是托管在cloudflare的,进入你的域名DNS记录点击添加记录类型CNAME名称 设置为你在vercel设置的域名前缀,我是 umami ,使用vercel CDN进行加速目标填写vercel.001315.xyz小黄云关闭。添加完成后,稍等片刻就可以在vercel的自定义域名页面看到两个对勾符号,这表示解析成功。
    DNS设置1
    DNS设置2

  3. 我们测试一下使用vercel分配给我的域名是 umami-black-theta.vercel.appitdog进行测速,基本是全红,没法看。然后我们在看使用vercel CDN进行加速的域名 https://umami.001315.xyz 效果还是不错的。
    测速1
    测速2

  4. 打开 Umami,第一次登录输入默认账号密码

    1
    2
    账号:admin
    密码:umami
  5. 登录后右上角小地球可以切换语言,看不懂自行切换。
    切换语言

  6. 点击左上角 设置 网站 添加网站 输入你自己要设置的网站名称与网站地址。
    添加网站
    添加网站

  7. 点击 跟踪代码 下方 如下格式的就是你的统计代码,添加在你需要的网页中,就可以记录数据了,我们使用之前的博客封面的项目举例说明。并不是所有的后台都有统计代码的添加栏目,那么这时我们就要手动添加了,一般来说,我们可以将代码添加至网页的<body> 标签和 </body> 标签之间,如下图所示,但是很多人看到下面的图,自己操作的时候也不知道添加到哪里,我们可以利用chatGPT工具,把这个项目首页代码index.html的内容发给chatGPT.
    编辑
    统计代码
    添加统计代码

  8. 这下学会怎么使用了统计代码了嘛?把chatGPT给你的代码复制到你项目那个代码替换掉就好了!
    GPT
    GPT

在线体验 点击前往 用户名与密码为:zhourf

Github 点击前往

Vercel CDN 点击前往