Vercel 部署 Umami 网站分析工具

Umami 是一款开源、轻量、注重隐私的网站分析工具
GitHub：https://github.com/umami-software/umami（37.5k⭐）

前言

如果想要统计网站的被访问情况，通常有第三方工具（如 Google Analytics）和开源自建（如 Umami、Plausible）两种选择。前者上手快但存在隐私顾虑和网络限制；后者需自行部署，但数据自主可控。综合对比后，我选择了 Umami 作为个人博客网站的分析工具。

Umami 提供官方托管和自托管两种方式。官方托管的免费版虽然开箱即用，但存在以下限制：

仅支持监控 1 个网站
数据仅保留过去 6 个月

这两个限制无法满足我的需求，因此本文记录如何通过 Vercel 免费部署 Umami。

想要把服务成功运行起来，需要两个核心组件：

服务端：提供运行环境与可视化管理面板
数据库：用于持久化存储站点的访问数据

下面介绍具体部署步骤。

部署步骤

Fork 仓库

点击“Create fork”

Vercel 部署

新建项目

如未授权，则需要先在 Vercel 中授权 GitHub。如已授权，则跳过。

导入项目

直接部署

这里会部署失败，是正常的，因为缺少数据库环境变量。接下来去创建数据库，点击“Go to Project”

在左侧列表点击找到“Storage”，找到 Neon 数据库（Umami 要求使用 Postgres 数据库），点击“Create”

点击“Accept and Create”

选择区域、关闭 Auth（Umami 有自己的登录系统，无需 Neon 提供的认证服务）、选择 Free 套餐、最后点击“Continue”

设置数据库名称、最后创建

等待创建完成后，连接到刚才的创建的 umami 项目

连接成功后，点击“Project”，点击刚才部署的 umami 项目

左侧列表点击“Deployments”，找到刚才部署失败的记录，点击“Redeploy”再次部署

在弹框中点击“Redeploy”

等待部署完成后，Vercel 会给一个.vercel.app结尾的后台访问地址，如果你有魔法，那么可以直接在浏览器打开 .vercel.app 结尾的后台访问地址

但该地址在国内已被墙，需要为该服务绑定自定义域名才能保证后续跟踪代码的正常使用。

自定义域名

我已通过腾讯云托管了主域名，因此我只需要为 Umami 创建一个二级域名，让腾讯云可以正常解析即可。

先进入 Umami 项目，点击“Domains”，点击“Add Existing”

填写二级域名

添加后点击“Learn more”展开，记录 Value的值

去腾讯云 DNS 解析，添加记录，主机记录填自定义的二级域名前缀，类型选CNAME，记录值填上一步记录的Value值，最后点确认

返回 Vercel，查看域名是否绑定成功

配置后台

访问后台，进入后第一件事一定要修改密码

提示
初始账号：admin；初始密码：umami

监控目标网站

点击“网站”、点击“添加网站”

输入你想要监控的目标网站

添加成功后，点击编辑按钮

找到跟踪代码并复制，这串代码就是访问统计的核心。之后为任何网站添加访问统计，用到的都是这串代码。我的个人博客由 Hugo 构建，下面就以 Hugo 为例

我用的是 PaperMod主题，因此只需要编辑\layouts\partials\extend_head.html文件

{{- /* Head custom content area start */ -}}
{{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}

/* 添加以下内容 */
{{- /* Umami analytics (production only) */ -}}
{{- if eq (site.Params.env | default hugo.Environment) "production" }}
/* 下面这行替换成你的追踪代码 */
<script defer src="https://你的二级域名/script.js" data-website-id="xxxx"></script>
{{- end }}

{{- /* Head custom content area end */ -}}

后记

Umami 中的功能还有很多，一些更高级的功能需要慢慢摸索

前言#

部署步骤#

Fork 仓库#

Vercel 部署#

自定义域名#

配置后台#

监控目标网站#

后记#

前言