Hugo | 使用Umami进行站点浏览量统计
本文作者没有任何代码基础，所有说明性文字主要靠连蒙带猜兼灵光一现，参考时请务必注意，欢迎提出意见和给出建议~
截至今日已经在Vercel上挂了七个项目，万一某天它崩了墙了，我就可以就地取材尝试西北风烹饪菜谱。
故事一律从宇宙大爆炸讲起
说起博客浏览量统计方案，最早是用不蒜子，挂在站点页尾，找了非常可爱的小动物爪印来做访客/浏览量图标，超满意的。结果统计迅速破千，我深觉不靠谱，而且每次自己访问也会实时在页脚计数，对会拿自己博客当笔记库网址收藏库用经常回来看的人来说压力巨大，更何况有时候为了看部署结果还会疯狂刷新……最后就把它撤掉了。
又看到有人用Google Analytics，经过一番艰苦卓绝的搏斗也装上了。GA的问题主要在于数据太多，数据实在太多，每次打开统计界面压力也很大，那我其实习惯过的是一种舒适躺平的生活，为了逃避这种压力唯一的解决方案当然就是不看它。我打开Google Search Console的次数都比打开它要多！（而且GSC好好玩哦）——顺便一提，GSC在死活不读站点地图的情况下已经抓了十七个网页了（抓文章压根不动，但抓分类页特别勤快），忍不住为它鼓鼓掌，加油！
昨天搜其他东西的时候看到一个GA替代方案，就是今天加进站点的Umami，精简，漂亮，支持中文界面，还支持共享站点统计数据，长这个样子：
我看得好心动，今天就在琢磨，不然就去买个服务器？正好最近有闲心折腾东西，买了能干的事儿也挺多的，谁不喜欢花钱呢……
但免费的午餐总是好吃的
但其实Umami是可以通过无服务器（Serverless）的方式部署的。官方文档中提到了利用Vercel进行部署的方式，前提是，需要远程数据库服务器——我本来看到这步就打消了念头，难是不难，但从0开始了解一个东西在晚上十点半总是稍稍令人有些望而却步，而且同时我正躺在床上打bmb——这时候沉目发了个链接过来，说他之前刚巧看到过一篇零成本搭建 Umami 的文章，可以用作参考。
哇！！我从床上一跃而下。
具体流程文章中写得已经很详细了，没有写到的部分可以参考文档，这里只补充一点设置过程中遇到的问题。全部流程分为以下几步：
- 设置Vercel：Fork官方提供的仓库，在Vercel导入这个仓库，设置环境变量
DATABASE_URL和HASH_SALT，点击部署——文档说也可以用官方提供的Deploy按钮直接跳过前面的部分，直接按部署——但我稍稍有点疑虑，还是自己动手了。- 设置Supabase：大部分流程和文章中描述一致，只有几点需要额外注意。首先一定要记住密码，之后的
DATABASE_URL需要用到这个密码（我只有三秒钟记忆，当然是忘了，还好Chrome替我记得），其次没找到文章中描述的“默认的Query-1查询面板”，我是手动新建的。- 默认用户名和密码：根据文档，部署后，默认的登录用户名是admin，密码为umami。
- 引用追踪代码：文章一带而过了这部分，容易被忽略，在网站中加入博客地址后需要点击</>获取追踪代码并加入到站点
Head位置。同时我现学现卖用了{{ if not .Site.IsServer }}让它不统计本地预览数据。
之后……？之后就结束了，自己打开网站刷新两下，再看Umami就已经看到有统计数据。我最近倒腾东西怎么都这么顺利，不然真的去庙里还个愿……
还是一点题外话
在翻相关信息的时候发现GA是支持通过创建IP地址过滤器的方式来排除指定IP地址流量的，具体做法可以参考帮助文档。
另外学会了在Chrome里截取整个网页！只需要按F12然后按Ctrl + Shift + P，输入Capture full size screenshot就可以，其实输个cap就可以，它会自动查找命令。
这个办法也可以用来在浏览器里截出手机端长图（不需要手机截图拼图再发电脑了，耶！），按F12接Ctrl + Shift + M，浏览器会进入移动端浏览界面，顶部Dimensions默认为响应式（Responsive），可以通过下拉菜单选设备（iPhone只支持到X，不知道是不是因为我Chrome有阵子没更新了）或者自己设置尺寸。