短短的网站来源统计信息随手记。

前言

其实早就知道可以看访客来源统计，但因为我写博客很懒（真的很懒），没什么博文可统计，再加上我根本没有摸过 SQL，所以一直没搞，直到最近装修同人博客，加上看到朋友分析自己博客的访客来源，我觉得有意思，于是下定决心搞了。

因为有朋友在用 umami，我就也想搞个 umami，于是开始对着朋友的 博文 里提到的 教程 抄，但是到了找 schema 这一步网页就找不到了，很失落，看起来这次也只能独立行走了，就记一下流程。

如果有不想看折腾的流程可以用右边的 TOC 目录直奔最后的教程。

【提醒！】朋友告诉我 Vercel 自带的数据库现在 integrate 了 Neon 以后有 Postgres 的结构了，后面的教程步骤可以都不用看！自己用 Vercel 的数据库功能之后填写一些环境变量就可以跑了！下面的博文还留下是出于……娱乐价值。祝大家看的开心！

磕磕绊绊，绊绊磕磕

万能的，搜索引擎

在必应上搜索“Hugo Umami 统计”，搜到了 豆逗子 的 这篇文章。文章很简洁的样子，一半看得懂一半看不懂，于是我多看了几遍以后就开抄（毕竟我有的是多余的勇气）。

捋袖子

“多看了几遍”这段时间我：大概理解了处理这个东西最简单的是直接在 umami 官网 Login | Umami Cloud 注册后把网站 tracking code 加到头文件里面就可以搞定，但是 umami 自己的云端数据库免费版本的只保留少数的数据而且只能加 3 个网站，有限制。于是这篇文章在做的就是找其他的更好的方案。而其他的方案其实是拆分了 umami 的流程为两部分，一部分是找地方放数据，用来放 umami 统计结果，另一个部分是在跑 umami 自己的网站界面和逻辑，然后接一起。这篇文章对比的是用什么方案来进行数据和程序的云端部分比较好。

看了一下前面的表格直接跳到了推荐的 Vercel+TiDB Cloud 的部分，然后执行操作。

动手！

搜索 TiDB Cloud，注册，所有的初始化都跳过，来到了我的第一个默认的初始 cluster 界面，然后，对着这个界面拔尖四顾心茫然。

卡在了“和 Railway 的操作没什么区别，不再赘述”的部分。 你看这就是找技术派教程作者的文章的不好了，我真的会看不懂。 因为 Railway 的部分说是要在 Railway 里面开两个 Project，一个 Posetgres 数据库，一个 umami，umami 在 deploy 的时候需要添加环境变量 DATABASE = ${{Postgres.DATABASE_URL}}，我对这个 ${{Postgres.DATABASE_URL}} 有许多疑问，因为显然按照前文的意思这个地方我应该填一个数据库的 url，但是这是啥 URL，我该在哪找呢？

还有就是我其实不太知道 TiDB 给我的这个默认的 serverless 数据库到底是什么，是 SQL 还是 Postgres？（SQL 和 Postgres 是啥？是语言吗？←对数据库一无所知的人发出疑问.jpg）

于是我就开始翻文章里给的文档 Integrate TiDB Cloud with Vercel | TiDB Docs，过了一遍还是不对，我甚至不知道这个 url 的变量该长啥样，这时候就有一点点 panic 了，但思来想去也不知道该干嘛，感觉我一定有地方做错了，于是我决定先放下这个去看用 vercel 跑 umami 的部分。

我刨！

文章里给的链接失效了，这里可以看新的链接 Running on Vercel – Docs - Umami。理论上点击文章页面中间的黑色的 deploy 按钮就可以了，结果发现 deploy 的时候还是需要我给环境变量 DATABASE_URL。看文档里，这个 URL 是安装 Umami 的时候会给的，于是我点开 Installation – Docs - Umami 继续看 Configuration 文档。

刨到石头！

此刻的我有一点淡淡的崩溃，因为我觉得这是一个鸡生蛋蛋生鸡的死循环，我没有 configure Umami 我就没有 URL，我没有 URL 我的 vercel 里的 umami 就跑不起来，那我怎么办，我一头创死自己吗？ （小姐姐别激动） 还是我去下个 docker 下个 yarn（好麻烦，想走了）。

刨到！传说装备！碎片 1！

但所幸我在文档里找到了！DATABASE_URL 的格式！

1DATABASE_URL=postgresql://username:mypassword@localhost:5432/mydb
2
3DATABASE_URL=mysql://username:mypassword@localhost:3306/mydb

好的，我至少知道这个东西长什么样了！

刨到！传说装备！碎片 2！

这个 installation 文档里面还写，Umami 支持 MySQL 和 PostgresSQL，我虽然没在 TiDB 的界面里看到 PostgresSQL 但是我！看到了侧边栏的 SQL Editor！继续回去看 umami 的 Running on Vercel 文档，发现了第 4 条说 You should use POSTGRES_PRISMA_URL for umami, Postgres 我知道大概是什么数据库语言或者结构，url 是链接，那么中间的大概是某种链接形式！于是我的大脑捕捉关键词：Prisma。

鬼鬼祟祟，瞎拼瞎凑

回去戳戳 TiDB 的页面，点击了左上绿色按钮的 Connect to Your App （连接你的应用？）上面的白色不知道在干嘛，不看，下面灰色部分的白框，PASSWORD 后面是空的，想输入东西没输进去，可是，可能是我傻了，但是旁边有个 configure password，我知道！生成的意思！因为朋友的博客和少数派似乎都提到了一个叫作密码的东西我不管怎么样先复制到本地 txt 记下来。

然后看着灰色区域最上面的 Connect With 后面的 General 很不顺眼，于是我下拉，看到一些熟悉的名字，比如 Wordpress 比如 VSCode……MySQL CLI 给的看起来是命令行不对，但是也没看到 Postgres，伤心，但我看到了，Prisma！

点击 Prisma，下面的框体内容变了！直接给了我一串符合上面 DATABASE_URL 格式的东西！部分内容打码，但我认出了 <USERNAME> 的部分是前面 General 状态下下面灰色框体里的参数，是一串不知名的大小写字母后面跟了 .root

1mysql://<USERNAME>:<PASSWORD>@gateway01.eu-central-1.prod.aws.tidbcloud.com:4000/test?sslaccept=strict

噫！好！我中了！

把这个字符串里面的 <USERNAME> 用 General 状态下的那一串大小写字母加上 .root 的字符串替换掉，<PASSWORD> 用刚刚粘到 TXT 里面的字段替代，刚好和前面的格式要求吻合。于是我，把这段东西复制到 Vercel 创建过程中的需要的 DATABASE_URL 的环境变量里。

Deploy 成功！好耶！

善后，填坑

之后在 vercel 的 umami 这个 project 的首页点进网址，来到跑起来的 umami 网页。第一次登录默认用户名 admin 密码 umami，登录后就可以看到——这里一片空白，勇士！是时候来建设我们的新家了！

不过第一步还是在家旁边竖起篱笆，点击右上角人物小图标，点击 Profile，点击 Change password，把默认密码改掉。

网站是空白的，在 header 里点 Websites（还是 Settings 里面的 Websites 侧边栏？几小时之前做的已经忘了）。点击蓝色的 Add websites 按钮，Name 输入你想管你的博客在这里叫啥，Domain 就输入博客的域名就行了。好了！已经把名字录入点名册。

接下来点击 Header 里的 Settings，左边选到 Websites，找到你刚才录进去的名字，点击 Edit 编辑，可以发现新的条目里有 Details、Tracking code、Share URL、Data4 个栏目，点击 Tracking code（追踪代码？），把这一行代码复制到你的 hugo 的头文件里（一般主题的头文件在 layouts/partials/head.html）。跑跑。看看 umami 的界面。一般就已经统计上了。

目前这个样子似乎是会统计上本地的服务器试运行的时候的数据，包一下。

1{{ if not hugo.IsServer }}
2<script defer src="<这里你直接粘贴tracking code就行>" data-website-id="<id似乎已经不用找了多方便啊>"></script>
3{{ end }}

教程（去废话版）

那么我精简一下流程，如果想要你的 Hugo 博客装 Umami，并且使用 TiDB Cloud 和 Vercel 来托管（Vercel 是因为不想在本地搞，TiDB 是有 5G 的免费存储空间，你需要做的是）

1. 数据库搞起来：
   1. 注册 TiDB Cloud，获得第一个数据库；
   2. 在数据库的 Overview 界面点击 Connect to your app，点击 Configure Password，记下系统给你生成的密码，这个密码之后都不会显示第二遍，丢了就全完了，一定要粘贴到哪里记下来；
   3. 点击界面的 Connect With 后面的 General，下拉找到 Prisma，点击，复制出来的以 mysql:// 开头的这一段链接到本地；
   4. 把链接里的 <PASSWORD> 替换成你刚刚记下来的密码；存下字符串；
2. 让 Umami 在 Vercel 上跑起来：
   1. 注册 Vercel 账号，登录；
   2. 前往 Umami的用Vercel跑程序教程，点击页面中间的黑色 Deploy 按钮；
   3. 输入项目名称，这个东西也会变成你的 Github 和 Vercel 的项目名我相信搞 hugo 的人应该至少有个 Github 我就不讲注册 Github 这种废话了，点击 Create，创建仓库；
   4. 过一会儿页面会要你添加环境变量，你会发现变量名是固定的 DATABASE_URL，把你上面数据库里最后搞出来的那个字符串贴到这里，点击 Deploy，然后静待花开；
3. 让 Umami 知道要统计的网站：
   1. 来到 Vercel 部署成功后的 umami 项目，点击 Domains 下面的网址，第一次打开 Umami，用户名 admin 密码 umami；
   2. 右上角小人头像改密码；
   3. Websites 栏目 Add Websites，输入你想在 umami 里管网站叫啥（Name）和网站域名（通常来说和博客的 baseurl 应该是一样的？或者去掉 https://？）
4. 让 Umami 追踪你的博客：
   1. 还是在 Umami 的页面，最上面的一行里选 Settings，左边选 Websites，找刚刚添加的网页，点 Edit；
   2. 在新页面的选项卡里找 Tracking codes，复制；
   3. 打开本地的 Hugo 文件夹，找 layouts/partials/head.html，粘进去；如果不想让统计 Hugo 在本地服务器运行的数据可以拿 {{ if not hugo.IsServer }} 包一下，怎么包可以往上翻，更详细的或者如果迭代更新了的话直接搜索 Hugo IsServer，看官方文档最新用法；
   4. 把本地的 Hugo 推到服务器上。

那么，就是这些！

总结

最后，总之可喜可贺，有惊无险，我也有 Umami 了！（以及真的很喜欢……玩乐高……）