文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉

前置条件

Vercel 部署 Umami

创建数据库

  • 第一步：登录 Vercel 控制台，在控制台首页顶栏中找到「Storage」，点击进入并选择 Create Database
  • 第二步：创建数据库，选择 Neon 或者 Postgres，请依据自己的创建页面进行选择，按照创建步骤进行创建
  • 第三步：数据库创建完成之后，点击查看 psql 中的字符串 (引号内)，后续会用到记录1

部署 Project

Github-Umami 地址

①点击 Deploy 直接跳转到 Umami 部署（基于已注册 Vercel，使用 Github 登录）
②常规部署

  • 使用 Github fork 一下 Umami 仓库
  • Vercel 新增 Project，选择 fork 的 Umami
  • (必选) 配置环境变量 (数据库)DATABASE_URL，数据库值设置为创建数据库第三步的字符串使用记录1
  • (必选) 配置环境变量 TRACKER_SCRIPT_NAME，可设置 umami 跟踪器名称，以避免默认名称被广告拦截器拦截导致追踪失败。该处可任意填写自己喜欢的值
  • 等待部署完成
  • (可选) 绑定自定义域名，此处不做赘述
  • 访问 umami 地址，初次登录时默认用户名为 admin，默认密码为 umami，可在登录后自行修改；自行设置统计的网站

Cloudflare-Workers 搭建数据接口

  • 前往 Hoppscotch 获取 token，POST 地址为 Vercel 部署的 Umami Project 地址加上 /api/auth/loginhttps://你的地址/api/auth/login

  • Send 成功后返回 token 信息

  • 前往 Cloudflare，创建一个 Workers，设置好名称 (随意)，确认部署并等待

  • 部署完成，点击右上角编辑代码，修改 worker.js 的内容 (注意，部分内容需修改为你的数据！！！)

    参数 说明
    API_BASE_URL 你的 umami 地址
    TOKEN Hoppscotch 中你获取到的 token
    WEBSITE_ID 你的博客在 umami 中的 website ID — 在 umami 中设置的网址点击编辑后可查看到 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

const API_BASE_URL = '你的umami地址';
const TOKEN = 'Hoppscotch中你获取到的token';
const WEBSITE_ID = '你的博客在umami中的website ID';
const CACHE_KEY = 'umami_cache'; // 缓存
const CACHE_TIME = 600; // 缓存时间，单位秒

async function fetchUmamiData(startAt, endAt) {
  const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
  const response = await fetch(url, {
    headers: {
      'Authorization': `Bearer ${TOKEN}`,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    console.error(`Error fetching data: ${response.statusText}`);
    return null;
  }

  return response.json();
}

async function handleRequest(event) {
  const cache = await caches.open(CACHE_KEY);
  const cachedResponse = await cache.match(event.request);

  if (cachedResponse) {
    return cachedResponse;
  }

  const now = Date.now();
  const todayStart = new Date(now).setHours(0, 0, 0, 0);
  const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
  const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
  const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);

  const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
    fetchUmamiData(todayStart, now),
    fetchUmamiData(yesterdayStart, todayStart),
    fetchUmamiData(lastMonthStart, now),
    fetchUmamiData(lastYearStart, now)
  ]);

  const responseData = {
    today_uv: todayData?.visitors?.value ?? null,
    today_pv: todayData?.pageviews?.value ?? null,
    yesterday_uv: yesterdayData?.visitors?.value ?? null,
    yesterday_pv: yesterdayData?.pageviews?.value ?? null,
    last_month_pv: lastMonthData?.pageviews?.value ?? null,
    last_year_pv: lastYearData?.pageviews?.value ?? null
  };

  const jsonResponse = new Response(JSON.stringify(responseData), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    }
  });

  event.waitUntil(cache.put(event.request, jsonResponse.clone()));

  return jsonResponse;
}
  • 完成编辑后，保存并部署
  • (可选) 绑定自定义域名。在 workers 中点击设置，在域和路由项下添加自定义域名（受 cloudflare 限制，域名必须已托管至 cloudflare 才可绑定）

将数据引入 about 页面

修改 solitude./source/_data/about.yml 文件中的统计部分

1
2
3
4
5
tj: # 统计
  provider: custom # 51la/custom
  url: 你的数据接口地址 # cloudflare部署的works地址
  img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
  desc: # 卡片左下角描述

about 页效果展示

vitepress 插入统计代码

主页 head 中引入统计代码

  • 部署代码在你的 umami 部署的网址中，点击编辑即可查到 
1
<script src="https://你的部署js地址" data-website-id="你设置的网址id"></script>