第六章： 零门槛接入统计与评论

第六章： 零门槛接入统计与评论

这一章，我们将榨干 Vercel 的免费额度。我们将使用 Vercel Postgres（官方原生数据库）来运行 Umami，体验“点击即用”的快感。

6.1 流量统计：Umami + Vercel Postgres (官方原生)

不需要注册第三方数据库，我们直接在 Vercel 里一键开通。

6.1.1 第一步：部署 Umami 镜像

  1. 点击下方按钮，将 Umami 代码克隆到你的 Vercel 账号下：
    Deploy with Vercel
  2. Create Git Repository: 仓库名填 my-umami，点击 Create。
  3. Configure Project:
    • 看到 DATABASE_URL 随便输点东西别管它。
    • 直接点击 Deploy。
    • 注：此时部署会报错（因为还没连数据库），不用慌，这是正常的，让它红

6.1.2 第二步：一键创建并绑定数据库

  1. 进入刚才创建的 fuwari-umami 项目控制台（Dashboard）。
  2. 点击顶部的搜索框搜索顶部的 Storage 标签页。
  3. 点击 Create Database -> 选择 Neon Postgres -> 点击 Continue。
  4. 勾选 “I accept…” -> Create。
  5. 在弹出的 “Connect to Project” 窗口中，确保勾选了 fuwari-umami，点击 Connect。

按照正常情况下，这里会提示数据库DATABASE_URL已经存在，这是预期内的情况，我们定位到项目的

Setting -> Environments -> Development 点击进入详情页，删除DATABASE_URL 然后再回到Storage页面即可

image-20251210100234931

6.1.3 第三步：设置域名

与我们的第五章一样，我们可以在域名商定义一个例如为 “umami.prorise666.site”的统计站点，同样的将它指向CDN加速回流地址保证国内的访问速度正常

  1. 前往域名商定义一条新的CNAME记录，host填写 umami.prorise666.site,value填写 vercel.cdn.yt-blog.top
  2. 在Vercel页面通过 Setting -> Domains 添加并删除原来的默认app后缀域名

6.1.4 第四步：重启服务

  1. 点击顶部 Deployments 标签页。
  2. 找到刚才那个失败的部署（Redeploy），或者直接点击右上角 … -> Redeploy。
  3. 这次它就会全绿通过了。
  4. 点击 Visit，使用默认账号 admin / umami 登录。

6.1.5 第五步：获取 ID 并配置

  1. 在 Umami 后台 -> Websites -> Add website。
  2. 输入你的博客域名（如 blog.yourdomain.com）。
  3. 点击编辑按钮 -> Tracking Code，复制 data-website-id 后面的 UUID。
  4. 回到 VS Code 修改 src/config.ts：
1
2
3
4
5
6
7
// src/config.ts
export const umamiConfig = {
	enabled: true, // 是否显示 Umami 统计
	apiKey: import.meta.env.UMAMI_API_KEY || "输入密钥", // API 密钥优先从环境变量读取，否则使用配置文件中的值
	baseUrl: "https://umami.prorise666.site/api", // Umami API 地址（自部署实例，注意需要包含 /api 路径）
	scripts: `  `.trim(), // 上面填入从 umamis 上复制的整个 Tracking code
} as const;

umami提供了一个供外部游客访问你统计站的外链，无需登录校验，定位到website -> OverView，如下图所示

image-20251210101756072

复制弹出的链接后到 src/config.ts 中，修改Links数组，这样子所有游客都能看到你的站点的每日访问状态了

1
2
3
4
5
6
7
8
9
10
11
links: [
   // ...前面的外链
			{
				name: "umami",
				url: "https://umami.prorise666.site/share/M7aAizOum5s6ad3r",
				external: true,
				icon: "material-symbols: analytics",
			}
		],
	},
],

image-20251210102057256

6.2 评论系统：Twikoo + MongoDB

（注：因为 Twikoo 必须要用 MongoDB 这种特定格式的数据库，而 Vercel 自带的是 SQL 数据库，两者“语言不通”，所以这步我们只能去领一个免费的 MongoDB，这是避不开的。）

为了不让你觉得复杂，我们用最快路径解决：

6.2.1 第一步：领取 MongoDB 空间

  1. 打开 MongoDB Atlas 注册页，用 Google 账号一键登录。
  2. 看到创建页面，全选默认（Free / AWS / Singapore），直接点底部的 Create。
  3. 设置个账号：
    • Username: admin
    • Password: 自己设置一个并记下来。
    • 点 Create User。
  4. 设置网络：
    • 在 “IP Access List” 栏，填入 0.0.0.0/0（代表允许 Vercel 访问）。
    • 点 Add Entry -> Finish and Close。
  5. 拿链接：
    • 回到面板，点 Connect -> Drivers。
    • 复制那串代码，把 <password> 改成你刚才设的密码。

6.2.2 第二步：部署 Twikoo

  1. 点这个按钮一键部署：
    Deploy with Vercel
  2. Create Git Repository: 起名 my-comment。
  3. Environment Variables:
    • 在 MONGODB_URI 框里，粘贴刚才改好密码的链接。
  4. Deploy。

6.2.3 第三步：接入博客

拿到 Twikoo 的 Vercel 域名（如 https://my-comment.vercel.app），回 VS Code 填空：

1
2
3
4
5
6
7
// src/config.ts
export const commentConfig: CommentConfig = {
    enable: true, 
    twikoo: {
        envId: "https://my-comment.vercel.app", // 你的评论后台域名
    },
};

6.3 最终检查

现在你的 Vercel 面板里应该整整齐齐：

  1. my-blog: 博客前台。
  2. my-umami: 统计后台（连接着 Vercel 原生 Postgres 数据库）。
  3. my-comment: 评论后台（连接着 MongoDB）。

推送到 GitHub，等待构建完成。去博客里刷新几次，发一条评论测试一下。

至此，你已经拥有了一套无需维护服务器、完全免费、且数据掌握在自己手中的全栈博客系统。

警告信息 (Warning)

1
2
3
::: warning
注意：此操作不可逆，请谨慎执行。
:::

常规笔记 (Note)

1
2
3
::: note
这是一条普通的补充信息，背景通常是蓝色的。
:::

成功提示 (Tip)

1
2
3
::: tip
**最佳实践：** 这里的代码建议直接复制使用。
:::