One

主题

00:00:00
2025-09-072025-09-07博客搭建zola
2200
9.4m
0

部署Umami展示API ​

部署Umami展示API ​

image-20250907144732422

目录 ​

[toc]

版权 ​

警告

本着开源共享、共同学习的精神：

本文是在 《王嘉祥》博主的《部署Umami展示API，为博客提供PV数据》文章 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

背景 ​

大佬，最近用您这个zola-theme-jiaxiang.wang模板部署了自己的博客，感觉超级丝滑，目前打算给自己博客配置上umami监控，但是remote_url = “https:/stat-api-ur”这里的url不懂要如何获取？

目前umami服务端已经拿到了我网站数据，只是博客 访问统计 那一块 还没数据，大佬有空了帮指导下，感谢。

另外，针对这个二开的主题，大佬有微信沟通群没，如果有，帮拉我下，多谢哦😜

image-20250907144112771

引子 ​

在我之前的文章中，分享了使用Umami作为访客统计工具的经历。

今天有小伙伴问我，部署了本站的开源Zola主题并配置 Umami 访客统计后，如何实现和本站关于页面的一样的 PV 展示效果，如下图所示。

image-20250907144325265

关于PV数据的获取，我参考了张洪大佬的Umami 文章，里面分享了一个 PHP 文件用于获取 Umami 的数据并进行公开展示。

在我移植张洪大佬博客主题过程中，并没有沿用 PHP 代码，因为我希望实现一种同时支持函数服务和本地部署的方法，这样可以根据实际需要灵活切换，避免被云服务商或云函数服务商锁定。

为此，我移植了 JS 版本，能够在 CloudFlare Workers 平台运行，并且支持通过 Docker 容器私有化部署在云服务器或本地，算是一劳永逸地解决了这个问题。

这项工作在博客上线时已经完成了，只不过忘了发布。正好借着这次的契机，将项目发布出来。

软件 ​

2025.9.7-下载-umami-status-public-api-main-王嘉祥

image-20250907153337623

项目名称：Umami Status Public API

项目地址：https://github.com/iWangJiaxiang/umami-status-public-api

Umami Status Public API ​

Umami Status Public API 是一个基于 Cloudflare Worker 的 Umami 网站统计数据公共 API 服务，提供网站访问统计数据的 RESTful API 接口。支持私有化部署、数据缓存等。

项目名称：Umami Status Public API

项目地址：https://github.com/iWangJiaxiang/umami-status-public-api

image-20250907144959008

1、docker部署 ​

服务部署

关于 CloudFlare Workers 和 Docker 私有化部署的步骤我放在项目 Readme 里了，有需要的小伙伴自行查阅吧~真的非常简单。

这里我写下自己本次docker部署的过程：

1.克隆项目 ​

git clone https://github.com/iWangJiaxiang/umami-status-public-api
cd umami-status-public-api

2.配置参数 ​

配置参数 编辑 worker/status.js 文件中的 CONFIG 对象：

js
const CONFIG = {
  API_BASE_URL: 'https://your-umami-domain.com',  // 你的 Umami 服务器地址
  USERNAME: 'your-username',                       // Umami 用户名
  PASSWORD: 'your-password',                       // Umami 密码
  WEBSITE_ID: 'your-website-id',                   // 网站 ID
  CACHE_TIME: 600                                  // 缓存时间（秒）
}

自己本次代码：

（1）worker/status.js 文件中的 CONFIG 对象

js
const CONFIG = {
  API_BASE_URL: 'https://umami.onedayxyy.cn',
  USERNAME: 'admin',
  PASSWORD: '你的密码',
  WEBSITE_ID: 'db1---xxhxhgxg---xxhxhxh--8',
  CACHE_TIME: 600 // 缓存时间10分钟（单位：秒）
}

备注：我这里当然加密了哈哈哈。🤣

提示

这里的信息就是自己之前部署umami服务时的一些信息哦，记得去当时部署文档里找下对应信息。

（2）docker-compose.yml文件

yaml
services:
    worker:
        image: jacoblincool/workerd
        volumes:
            - ./worker:/worker
        ports:
            - "8081:8080"

3.启动服务 ​

docker-compose up -d

image-20250907145447766

4.访问 ​

访问 API 服务将在 http://localhost:8081 启动，你可以通过以下方式测试：

curl http://localhost:8081

效果：

bash
[root@wiki umami-status-public-api]# curl http://localhost:8081
{"today_uv":6,"today_pv":48,"yesterday_uv":5,"yesterday_pv":40,"last_month_pv":88,"last_year_pv":88}[root@wiki umami-status-public-api]#

5.配置公网访问 ​

使用反向代理将服务的端口映射到公网端口。

（1）创建/etc/nginx/conf.d/api.onedayxyy.cn.conf文件：

json
server {
    listen 80;
    server_name  api.onedayxyy.cn;
    #配置https重定向
    return 301 https://$host$request_uri;
}

server {
    listen  443 ssl;
    server_name  api.onedayxyy.cn;

    location / {
        proxy_pass http://127.0.0.1:8081/; 
        client_max_body_size 100M;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    } 

    ssl_certificate             /etc/letsencrypt/live/onedayxyy.cn/fullchain.pem;
    ssl_certificate_key         /etc/letsencrypt/live/onedayxyy.cn/privkey.pem;
 
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    add_header Strict-Transport-Security "max-age=31536000";
    
    access_log /var/log/nginx/photo.onedayxyy.cn.https.log;
}

（2）重启nginx服务：

bash
nginx -s reload

2、与本站博客主题集成 ​

完成部署后，你会具备一个可以访问 API 服务的域名或者地址。

如果你使用的是本站开源的Zola主题，那么只需要在 config.toml 文件中，将下列配置中的 stat_api 替换成你的地址即可。

toml
# 是否启用页面统计
[extra.site.analytics]
# 关于页面展示访问量
stat_api = "https://stat-api-url"
  • 自己zola-theme-jiaxiang.wang主题配置如下：
toml
# 是否启用页面统计
[extra.site.analytics]
# 关于页面展示访问量
# stat_api = "https://stat-api-url"
stat_api = "https://api.onedayxyy.cn/"

# umami 监控
[extra.site.analytics.umami]
enable = true
# 监控的域名，避免被 localhost 统计 可选
domain = "zola.onedayxyy.cn"
# umami 服务地址
# remote_url = "https:/stat-api-ur"
remote_url = "https://umami.onedayxyy.cn/"
# 网站id 改成你的
id = "db1562a7-70ae-4570-bd0f-3912f214e8c8"
# js 地址
js = "https://umami.onedayxyy.cn/script.js"
# 追踪外部连接
track_external_link = true

image-20250907152333951

扩展：

PS：如果你使用其他的方式提供 PV 数据，只要你的数据格式符合以下的 JSON 结构，都可以替换 stat_api 配置的。

toml
{
  "today_uv": 123,        // 今日独立访客数
  "today_pv": 456,        // 今日页面浏览量
  "yesterday_uv": 98,     // 昨日独立访客数
  "yesterday_pv": 234,    // 昨日页面浏览量
  "last_month_pv": 12345, // 近30天页面浏览量
  "last_year_pv": 123456  // 近一年页面浏览量
}

3、验证 ​

配置玩出，发布网站，浏览几次网站，稍等一会儿，观察效果：nice。

image-20250907144732422

结束。

我踩过的坑 ​

配置完成后博客没有显示 PV 数据 ​

这类问题是跨域导致的浏览器禁用，如果你采用私有化部署的方式，很可能会遇到这类问题。

你可以按 F12 打开浏览器控制台，查看是否有 CORS 相关的报错。

如果是跨域的问题，你需要调整 API 服务反向代理的配置，具体的步骤请咨询 AI。

总结 ​

正如前文所述，通过 Umami Status Public API 项目获取 PV 数据是一个相对灵活的方式，无论是使用 CloudFlare Workers 还是自己搭建服务，都能在一套代码下实现。

项目已经运行了大半年，目前进入维护阶段。如果大家有更好的建议或遇到问题，欢迎在评论区或者项目 ISSUE 中提出~

关于我 ​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

image-20250109220325748

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后 ​

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

最近更新