Umami 是一个简单、快速、注重隐私的开源网站统计工具，是 Google Analytics 的理想替代品。本文将指导你如何在 Vercel 上部署 Umami，并通过 Vercel Storage 创建 Neon PostgreSQL 数据库，搭建一个零成本、轻量级的网站流量统计系统。本教程特别为 Hugo 静态网站用户优化，确保生成的 Markdown 文件适配 Hugo 的静态网页生成。
前言
对于个人博客或中小型网站，Google Analytics 可能过于复杂，且在某些地区访问不便。而 Umami 提供了简洁的界面和核心指标，非常适合轻量级流量分析需求。通过 Vercel 的 Serverless 部署和 Vercel Storage 集成的 Neon 数据库，我们可以快速搭建一个高效的统计系统，无需服务器维护成本。
以下是详细的部署步骤。
准备工作
在开始之前，确保你已准备以下内容：
- GitHub 账户：用于 Fork Umami 仓库。
- Vercel 账户：用于部署 Umami 和创建 Neon 数据库。
- Neon 账户：已注册，用于通过 Vercel Storage 连接。
- 一个运行中的 Hugo 网站（或其他静态网站），用于嵌入 Umami 的跟踪代码。
Fork Umami 仓库
- 访问 Umami 官方 GitHub 仓库： https://github.com/umami-software/umami。
- 点击右上角的 Fork 按钮，将仓库 Fork 到你的 GitHub 账户。
- （可选）如果你需要自定义 Umami，可以克隆仓库到本地进行修改，但本教程使用默认配置。
在 Vercel 部署 Umami
- 登录 Vercel 官网，点击 Add New > Project。
- 在 Import Git Repository 页面，选择你刚刚 Fork 的 Umami 仓库。
- 配置项目：
- Framework Preset：选择 Next.js（Umami 基于 Next.js 构建）。
- Environment Variables：暂时跳过，稍后配置 Neon 数据库的
DATABASE_URL。
- 点击 Deploy 按钮，Vercel 将自动构建项目（此时可能因缺少数据库连接而失败，稍后修复）。
在 Vercel Storage 创建 Neon 数据库
- 在 Vercel 仪表板中，进入你的 Umami 项目。
- 点击顶部导航的 Storage 标签，然后选择 Create Database。
- 在数据库类型中选择 Neon，并登录你的 Neon 账户以授权 Vercel 访问。
- 配置数据库：
- 项目名称：任意，例如
umami-project。 - 数据库名称：建议使用
umami。 - 云服务托管商：选择你所在的地区（如 AWS 亚洲区域）以降低延迟。
- 项目名称：任意，例如
- 创建完成后，Vercel 会自动生成一个 DATABASE_URL 并将其添加到项目的环境变量中，格式如下：
postgresql://[username]:[password]@[host]/[database] - 返回项目设置，确认 Environment Variables 中已包含
DATABASE_URL。 - 重新部署项目：点击 Deployments 标签，选择最新部署，点击 Redeploy。
配置 Umami
- 部署完成后，点击 Visit 查看你的 Umami 实例，记下分配的默认域名（如
your-project.vercel.app）。 - 访问 Umami 网站，首次登录默认账户为：
- 用户名：
admin - 密码：
umami
- 用户名：
- 登录后立即更改密码以确保安全。
- 在 Umami 仪表板中，点击 Add Website，输入你的网站信息（如域名、名称）。
- Umami 会生成一段 JavaScript 跟踪代码，格式如下：
复制此代码。
<script async src="https://your-project.vercel.app/umami.js" data-website-id="YOUR_WEBSITE_ID"></script>
在 Hugo 网站中嵌入跟踪代码
为了让 Umami 统计你的 Hugo 网站流量，需要将跟踪代码嵌入到网站中。这个一般需要你使用的hugo主题支持，如果不支持，则需要自己修改hugo主题。