第一部分：Vercel+Umami#
-
第一步
1.1 Forkumami到自己的 Github 倉庫
1.2 創建項目
index.mdx -
第二步
2.1 創建Vercel 帳號，這裡我就省略了，因為 GitHub 可以直接進行授權即可。
2.2 在你授權以後，首先創建Postgres數據庫，直接一路下一步，創建好就行，可以給下面的連接複製出來
點擊Copy Snippet, 就可以，記住在粘貼的時候是我畫線裡面的部分，雙引號都不需要，因為要設置環境變量。
2.3 在創建好數據庫以後，回到主頁面的Overview，然後右上角有一個Add New選擇添加Project，選擇你Fork的umami，添加即可。
2.4 設置環境變量，DATABASE_URL和HASH_SALT和TRACKER_SCRIPT_NAME，其中DATABASE_URL的值就是上面劃線的部分，其他的兩個環境變量都是對應的值是 String 自己可以隨意定義。
2.5 設置好以後點擊Deploy，等待大約兩分鐘左右，自動部署完成，部署完成以後可以通過下圖種面板上面給的連接可以直接訪問。
2.6 打開以後會跳出登錄地址，默認的登錄密碼是adminumami，登錄進去以後，設置給自己密碼修改了，然後就是設置裡面添加網站，給你要統計的網站添加進去，到此，別人訪問你的网站你可以通過面板看到統計數據了。
第二部分：Umami+Cloudflare worker#
這一部分主要是讓你的博客上面能展示的訪問數據，效果如下：
- 註冊CloudFlare帳號，然後進去以後，選擇Workers和Pages，點擊創建，再點擊部署
部署以後，進去點擊編輯代碼，將裡面的代碼進行替換：
addEventListener('fetch', event => {
event.respondWith(handleRequest(event));
});
const API_BASE_URL = 'https://umami.yourdomain.com'; // 替換你的剛才部署的umami的域名
const TOKEN = 'your_token'; // 獲取的token
const WEBSITE_ID = 'your_website_id'; // 在umami添加網站的 webstie id
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds
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;
}
但是裡面有幾個比較重要的參數需要修改API_BASE_URL、TOKEN、WEBSITE_ID其中API_BASE_URL和WEBSITE_ID已經是有的，WEBSITE_ID在umami中的設置，選擇你已經添加好的網站，點擊編輯，會出現網站的WEBSITE_ID：
2.2 獲取token，在想api測試網站，hoppscotch，跳轉到這個頁面以後，如下圖所示
2.2.1 請求方式選擇post，鏈接填寫方式是：
https://你的umami域名或者是鏈接/api/auth/login
2.2.2 請求體選擇Body參數格式選擇application/json
{
"username":"用戶名",
"password":"密碼"
}
2.2.3 返回結果中token裡面的內容就是需要的token
{
"token": "你的token", # 你需要記錄下來的內容
"user": {
"id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
"username": "admin",
"role": "admin",
"createdAt": "2024-11-12T09:18:12.766Z",
"isAdmin": true
}
}
到這裡，你部署api所需要的所有參數內容都已經有了，給替換進去即可。
2.3 測試在你部署好以後，會有一個鏈接，當然你如果是用cloudflare代理你的域名，可以直接進行關聯。
然後點擊或則是複製粘貼到瀏覽器，請求以後會出來下面的結果：
如果沒有結果，建議你先去你部署的 umami 面板裡面看看有沒有數據，有數據的情況下，這裡請求都會有數據的，清理瀏覽器緩存開代理在測試。
第三部分：添加博客統計#
將數據添加到about頁面
tj: # 統計
provider: custom # custom
url: 你的數據接口地址
img: https://7.isyangs.cn/1/65eb2e9109826-1.png # 背景
desc: # 卡片左下角描述
配置完成～
感謝starsharbor大佬博客的指導，原文
作者原文#
作者: Couture
鏈接: https://www.coutures.top/posts/27233.html
來源: Couture
著作權歸作者所有。 商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。