Umami 免费部署教程｜在 Vercel 上搭建隐私友好的网站统计系统

Eilo2024-12-192025-06-26

前言

传统的第三方统计工具，如百度统计，可能存在浏览器兼容性问题（unload 导致报错）、性能开销，甚至被广告拦截器屏蔽，导致数据失真。更重要的是，它们会将访客数据传输给第三方，存在潜在的隐私风险。Umami 作为一款自托管的统计工具，让你将访客数据完全掌握在自己手中，为访客隐私迈出重要一步。

事前准备

在开始部署之前，你需要准备以下几项：

域名（非必须）：你可以使用 Vercel 分配的免费域名，但考虑到其在中国大陆可能被严重限制访问，建议设置自定义域名并配合 CDN 服务加速。
GitHub 账号（必须）：用于代码托管和 Vercel 部署。
Vercel 账号（必须）：用于部署 Umami 应用和数据库。

操作步骤

第一步：Vercel 部署 Umami

Umami 的部署过程借助 Vercel 的一键部署功能，非常便捷。

1. 创建 Postgres 数据库

Umami 需要一个数据库来存储数据。我们将在 Vercel 上创建一个 Postgres 数据库。

在左侧菜单中选择 Postgres，然后点击 Create。

阅读并接受条款。

在 Region 处选择一个离你或你的目标用户较近的区域（例如：新加坡）。

在 Database Name 处输入你的数据库名称（例如：umami），可以自定义，点击 Create。

点击 Done。

数据库创建完成后，点击 Show secret 显示完整的数据库连接密钥，然后点击 Copy Snippet 复制你的密钥。请务必将此密钥妥善保存，它是一个形如 postgres://default:************@ep-royal-violet-a1klt79l.ap-southeast-1.aws.neon.tech:5432/verceldb?sslmode=require 的字符串（注意：只复制双引号内的内容，不包括 * 号）。此连接字符串包含敏感信息，请务必保密，切勿泄露！

2. 一键部署 Umami 应用

Umami 提供了 Vercel 一键部署功能，它会自动将 Umami 仓库 Fork 到你的 GitHub 账户并进行部署。

点击此链接前往 Vercel 一键部署：https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fumami-software%2Fumami&env=DATABASE_URL
在 Repository Name 处设置你项目的名称（例如：umami），可以自定义。

你可以选择勾选 Create private Git Repository 将其设置为私有仓库，不勾选则为公开。
点击 Create。
在环境变量配置页面，Name 会自动填写为 DATABASE_URL。在 Value 中粘贴你之前保存的 Postgres 数据库连接字符串。
点击 Deploy。

Vercel 会开始自动部署，通常需要等待三分钟左右。部署成功后，你会看到部署完成的提示页面。

第二步：自定义域名设置与 CDN 加速

如果你想拥有一个更友好且加速的访问地址，可以设置自定义域名。

在 Vercel 部署成功页面，点击 Add Domain。
输入你想要绑定的自定义域名（例如：umami.yourdomain.com），然后点击 ADD。
前往你的域名解析商（如 Cloudflare）添加 DNS 解析记录。
- 登录你的域名 DNS 管理页面。
- 添加一条 CNAME 记录。
- 名称 (Name) 填写你在 Vercel 设置的域名前缀（例如：umami）。
- 目标 (Target) 填写 cname.vercel-dns.com 或者 Vercel 给出的具体目标地址。如果你的域名解析服务支持 CDN 加速（例如 Cloudflare 的小黄云），请确保关闭小黄云，直接解析到 Vercel。
添加完成后，稍等片刻，返回 Vercel 的自定义域名页面，当看到两个绿色的对勾符号时，表示解析成功。

你可以使用 itdog.cn 等工具测试你的自定义域名访问速度，对比 Vercel 分配的默认域名，你会发现使用自定义域名并结合 CDN 加速后，访问效果会显著提升。

你还可以参考我的这一篇文章来为你的 Vercel 项目加速: Vercel 托管站点提速技巧｜使用优选域名绕过卡慢节点，全面提升国内访问速度

第三步：首次登录与网站添加

Umami 部署完成后，你可以访问你的 Umami 实例。

如果是 Vercel 分配的域名，点击部署成功页面的右上角箭头进入项目页面，再点击 Visit。
如果是自定义域名，直接在浏览器中访问你的自定义域名。

首次登录，请使用默认账号密码：

账号：admin
密码：umami

重要提示： 登录后，请立即点击右上角的小地球图标切换语言（如需），然后进入设置，修改默认的管理员密码，以确保你的 Umami 实例安全！

点击 去设置 然后选择网站。

点击 添加网站。

输入你想要统计的 网站名称 和 网站地址。

点击保存。

第四步：获取并添加统计代码

网站添加成功后，你需要将 Umami 的跟踪代码添加到你的网站中。

在 Umami 的网站设置页面，点击你刚刚添加的网站，然后选择 跟踪代码。

你会看到类似以下的统计代码：

1	<script async defer data-website-id="YOUR_WEBSITE_ID" src="YOUR_UMAMI_INSTANCE_URL/umami.js"></script>

其中 YOUR_WEBSITE_ID 是你网站的唯一 ID，YOUR_UMAMI_INSTANCE_URL 是你的 Umami 实例地址。

如何添加到你的网站？

一般来说，你应该将这段代码放置在你网站的每个页面上，推荐将其放在 <body> 标签的底部，</body> 标签之前。这样做的好处是不会阻塞页面内容的加载。

通用添加方法：

手动添加： 如果你能直接编辑网站的 HTML 文件（如 index.html 或主题模板文件），找到 </body> 标签，将 Umami 统计代码粘贴到其前面。

<!DOCTYPE html>
<html>
<head>
    <title>我的博客</title>
</head>
<body>
    <h1>欢迎来到我的博客</h1>
    <p>这里有一些文章...</p>

    <script async defer data-website-id="YOUR_WEBSITE_ID" src="YOUR_UMAMI_INSTANCE_URL/umami.js"></script>
</body>
</html>

利用建站工具/平台：
- 博客平台 (如 WordPress, Hexo, Jekyll 等): 检查你的主题设置或插件选项，通常会有“自定义 HTML”、“注入脚本”、“页脚代码”等功能，可以将 Umami 代码粘贴进去。例如，在 WordPress 中，你可能需要在主题的 footer.php 文件中添加，或者使用专门的插件。
- CMS 系统: 大多数内容管理系统都提供了自定义代码注入的功能，寻找相关的设置选项。