--
:
--
:
--
站点监控页面配置说明
最后更新于:
🔍 站点监控页面概述
Hugo-Teek 主题支持接入第三方站点监控服务，实时展示站点的运行状态、可用性、响应时间等关键指标。通过监控页面，访客可以了解站点的服务健康状况。
✨ 监控功能特性
🎨 展示特性
- 🚦 实时状态：展示站点各项服务的实时运行状态
- 📊 可用性统计：显示服务在线率、响应时间等指标
- 📈 历史记录：查看服务的历史运行状态和故障记录
- 🔔 故障告警：服务异常时及时通知
⚙️ 配置特性
- 🔗 外部集成：支持Uptime Kuma、UptimeRobot等监控服务
- 🌐 独立页面：可嵌入监控面板或链接到外部监控页面
- 📱 响应式设计：适配各种屏幕尺寸
- 🎨 状态标识：直观的状态颜色标识（绿色/黄色/红色）
📁 配置文件路径
站点监控功能涉及以下配置文件：
1# hugo-teek-site/config/teek-plugins/menus.toml
2# 添加站点监控页面导航入口1# hugo-teek-site/content/status.md
2# 创建监控页面内容（可选，用于嵌入监控面板）1# hugo-teek-site/config/themes/hugo-teek/services.toml
2# 监控服务相关配置文件作用说明
1站点监控配置流程：
2┌─────────────────┐ ┌─────────────────┐
3│ 监控服务部署 │────▶│ 导航栏配置 │
4│ Uptime Kuma等 │ │ menus.toml │
5└─────────────────┘ └─────────────────┘
6 │
7 ▼
8 ┌─────────────────┐
9 │ 访问监控页面 │
10 │ /status/ 或外链 │
11 └─────────────────┘🔗 导航栏监控入口配置
添加站点监控菜单项
在导航栏添加站点监控入口，链接到外部监控面板：
1# config/teek-plugins/menus.toml
2[[main]]
3 name = "🔍 站点监控"
4 parent = "about"
5 url = "https://status.xxdevops.cn/status/dashboard"
6 weight = 34.0
7 [main.params]
8 icon = "activity"
9 external = true # ◀️ 标记为外部链接
10 target = "_blank" # ◀️ 在新窗口打开1[[main]]
2 name = "🔍 站点监控"
3 url = "https://status.example.com/"
4 weight = 10
5 [main.params]
6 icon = "activity"
7 external = true
8 target = "_blank"1[[main]]
2 name = "🔍 站点监控" # ◀️ 菜单显示名称
3 parent = "about" # ◀️ 父菜单标识符（放在【关于】下拉菜单下）
4 url = "https://status..." # ◀️ 监控面板地址
5 weight = 34.0 # ◀️ 排序权重
6 [main.params]
7 icon = "activity" # ◀️ Bootstrap Icons 图标名称
8 external = true # ◀️ 标记为外部链接，显示外链图标
9 target = "_blank" # ◀️ 在新窗口打开监控页面监控图标选择
1# 活动/状态图标
2icon = "activity" # ◀️ 活动图标（推荐）
3icon = "pulse" # ◀️ 脉冲图标
4icon = "heart-pulse" # ◀️ 心跳图标
5icon = "speedometer" # ◀️ 速度计图标
6icon = "graph-up" # ◀️ 上升图表
7icon = "diagram-3" # ◀️ 网络图表1# 监控相关图标
2icon = "eye" # ◀️ 监控图标
3icon = "search" # ◀️ 搜索图标
4icon = "broadcast" # ◀️ 广播图标
5icon = "wifi" # ◀️ 网络图标
6icon = "globe" # ◀️ 全球图标
7icon = "shield-check" # ◀️ 安全盾牌🖥️ Uptime Kuma 监控配置
Uptime Kuma 简介
Uptime Kuma 是一款开源的站点监控工具，支持监控HTTP/HTTPS、TCP、Ping等多种服务类型，提供美观的状态页面。
🌟 Uptime Kuma 特点
- 🆓 开源免费，自托管部署
- 📊 支持多种监控类型（HTTP/TCP/Ping/DNS等）
- 🔔 多种通知渠道（邮件、Webhook、Telegram等）
- 🎨 可自定义状态页面样式
- 📱 响应式设计，支持移动端
部署 Uptime Kuma
1# 使用 Docker 快速部署 Uptime Kuma
2docker run -d \
3 --restart=always \
4 -p 3001:3001 \
5 -v uptime-kuma:/app/data \
6 --name uptime-kuma \
7 louislam/uptime-kuma:1 1# docker-compose.yml
2version: '3.8'
3services:
4 uptime-kuma:
5 image: louislam/uptime-kuma:1
6 container_name: uptime-kuma
7 volumes:
8 - ./uptime-kuma-data:/app/data
9 ports:
10 - "3001:3001"
11 restart: always1# 部署完成后访问
2http://localhost:3001
3# 或你的服务器地址
4http://your-server-ip:3001配置监控项
1# 在 Uptime Kuma 后台添加监控项
2监控类型: HTTP(s)
3名称: 我的博客首页
4URL: https://xxdevops.cn/
5心跳间隔: 60秒 # ◀️ 检查频率
6重试次数: 3次 # ◀️ 失败重试次数
7超时时间: 48秒 # ◀️ 请求超时时间1监控类型: HTTP(s)
2名称: API接口
3URL: https://api.xxdevops.cn/health
4心跳间隔: 30秒
5期望状态码: 2001监控类型: Ping
2名称: 服务器连通性
3主机名: xxdevops.cn
4心跳间隔: 60秒获取状态页面链接
11️⃣ 登录 Uptime Kuma 管理后台
22️⃣ 进入「状态页面」菜单
33️⃣ 点击「新建状态页面」
44️⃣ 配置页面标题、描述、Logo等
55️⃣ 选择要展示的监控项
66️⃣ 保存并获取公开访问链接1# 默认状态页面地址
2https://status.xxdevops.cn/status/default
3
4# 自定义slug的状态页面
5https://status.xxdevops.cn/status/dashboard
6https://status.xxdevops.cn/status/blog📊 UptimeRobot 监控配置
UptimeRobot 简介
UptimeRobot 是一款流行的站点监控服务，提供免费和付费版本，支持50个免费监控项。
🌟 UptimeRobot 特点
- 🆓 免费版支持50个监控项
- ⏱️ 5分钟监控频率（免费版）
- 🔔 多种通知方式
- 📊 公开状态页面
- 🔌 REST API支持
配置公开状态页面
11️⃣ 登录 UptimeRobot 控制台
22️⃣ 进入「My Settings」->「Public Status Pages」
33️⃣ 点击「Add Public Status Page」
44️⃣ 配置页面信息：
5 - Friendly Name: 站点状态
6 - Monitor: 选择要展示的监控项
7 - Custom Domain: 可选，绑定自定义域名
85️⃣ 保存并获取公开链接1# UptimeRobot 公开状态页面链接格式
2https://stats.uptimerobot.com/你的页面ID
3
4# 示例
5https://stats.uptimerobot.com/xxxxx12345📝 创建监控页面
嵌入式监控页面
创建一个包含监控面板的独立页面：
1---
2# content/status.md
3title: 站点状态监控
4layout: single
5type: page
6url: /status/
7description: 实时查看站点服务运行状态
8--- 1# 站点运行状态
2
3本页面展示各服务的实时运行状态。
4
5## 服务状态概览
6
7<iframe
8 src="https://status.xxdevops.cn/status/default"
9 width="100%"
10 height="800"
11 frameborder="0"
12 style="border: none; border-radius: 8px;">
13</iframe>
14
15## 状态说明
16
17| 状态 | 含义 |
18|------|------|
19| 🟢 正常 | 服务运行正常 |
20| 🟡 警告 | 服务响应缓慢 |
21| 🔴 故障 | 服务不可用 |
22
23---
24
25**最后更新时间：** 2026-03-02导航栏关联配置
1# 链接到站内监控页面
2[[main]]
3 name = "🔍 站点监控"
4 parent = "about"
5 url = "/status/"
6 weight = 34.0
7 [main.params]
8 icon = "activity" 1# 链接到外部监控面板
2[[main]]
3 name = "🔍 站点监控"
4 parent = "about"
5 url = "https://status.xxdevops.cn/status/dashboard"
6 weight = 34.0
7 [main.params]
8 icon = "activity"
9 external = true
10 target = "_blank"📋 完整配置示例
典型监控配置
1# ========================================
2# 文件1: config/teek-plugins/menus.toml
3# 导航栏站点监控入口
4# ========================================
5
6# 父菜单 - 关于
7[[main]]
8 identifier = "about"
9 name = "🍷 关于"
10 url = "#"
11 weight = 5
12
13# 子菜单 - 站点监控
14[[main]]
15 name = "🔍 站点监控"
16 parent = "about"
17 url = "https://status.xxdevops.cn/status/dashboard"
18 weight = 34.0
19 [main.params]
20 icon = "activity"
21 external = true
22 target = "_blank" 1# ========================================
2# 文件2: content/status.md
3# 站点监控页面（可选）
4# ========================================
5---
6title: 站点运行状态
7layout: single
8type: page
9url: /status/
10description: 实时查看站点各项服务的运行状态
11---
12
13# 服务运行状态
14
15<iframe
16 src="https://status.xxdevops.cn/status/default"
17 width="100%"
18 height="800"
19 frameborder="0">
20</iframe>⚙️ 通过管理后台配置
使用 Hugo Teek Admin
Hugo-Teek 提供可视化管理后台，可图形化配置监控入口：
1make dev-admin
2# 访问: http://localhost:808011️⃣ 登录管理后台
22️⃣ 进入「外观管理」->「菜单」
33️⃣ 添加新的菜单项
44️⃣ 设置名称：🔍 站点监控
55️⃣ 设置链接：https://status.xxdevops.cn/status/dashboard
66️⃣ 勾选「外部链接」选项
77️⃣ 保存后自动生成配置🔧 常见问题
监控页面无法访问
1原因：监控服务未部署或链接错误
2解决：
31️⃣ 确认 Uptime Kuma/UptimeRobot 已正确部署
42️⃣ 检查监控服务是否正常运行
53️⃣ 验证状态页面链接是否正确
64️⃣ 确认监控服务防火墙设置允许访问1原因：X-Frame-Options 限制或跨域问题
2解决：
31️⃣ 检查监控服务是否允许嵌入iframe
42️⃣ 配置监控服务的 CORS 设置
53️⃣ 考虑改为直接链接到外部页面
64️⃣ 使用新窗口打开监控页面1原因：导航栏配置错误或缓存问题
2解决：
31️⃣ 检查 menus.toml 语法是否正确
42️⃣ 确认 parent 标识符存在且正确
53️⃣ 重启 Hugo 开发服务器
64️⃣ 清除浏览器缓存监控服务选择建议
1推荐：Uptime Kuma
2适用场景：
3- 有服务器资源
4- 需要完全控制数据
5- 监控项较多
6- 需要自定义通知
7
8优点：
9- 数据自主可控
10- 无监控数量限制
11- 可自定义域名
12- 支持多种监控类型 1推荐：UptimeRobot
2适用场景：
3- 无服务器资源
4- 快速上手使用
5- 监控需求简单
6- 少量监控项
7
8优点：
9- 无需部署维护
10- 免费版够用
11- 全球监控节点
12- 稳定可靠配置生效检查清单
1✅ 监控服务已部署并正常运行
2✅ 状态页面已创建并可访问
3✅ 导航栏配置语法正确
4✅ 外部链接标记正确（external = true）
5✅ 链接地址可正常访问
6✅ 重启 Hugo 开发服务器后生效
7✅ 浏览器强制刷新（Ctrl+F5）清除缓存📝 配置模板速查
常用监控配置模板
1# config/teek-plugins/menus.toml
2[[main]]
3 name = "🔍 站点监控"
4 parent = "about"
5 url = "https://status.xxdevops.cn/status/dashboard"
6 weight = 34.0
7 [main.params]
8 icon = "activity"
9 external = true
10 target = "_blank"1[[main]]
2 name = "🔍 站点监控"
3 parent = "about"
4 url = "https://stats.uptimerobot.com/你的页面ID"
5 weight = 34.0
6 [main.params]
7 icon = "activity"
8 external = true
9 target = "_blank"1[[main]]
2 name = "🔍 站点监控"
3 url = "https://status.example.com/"
4 weight = 10
5 [main.params]
6 icon = "activity"
7 external = true
8 target = "_blank"1[[main]]
2 name = "🔍 站点监控"
3 parent = "about"
4 url = "/status/"
5 weight = 34.0
6 [main.params]
7 icon = "activity"Docker Compose 完整示例
1version: '3.8'
2
3services:
4 uptime-kuma:
5 image: louislam/uptime-kuma:1
6 container_name: uptime-kuma
7 volumes:
8 - ./uptime-kuma-data:/app/data
9 ports:
10 - "3001:3001"
11 restart: always
12 networks:
13 - monitoring
14
15 # 可选：配合 Nginx 反向代理
16 nginx:
17 image: nginx:alpine
18 container_name: nginx
19 volumes:
20 - ./nginx.conf:/etc/nginx/nginx.conf
21 ports:
22 - "80:80"
23 - "443:443"
24 restart: always
25 networks:
26 - monitoring
27
28networks:
29 monitoring:
30 driver: bridge 1server {
2 listen 80;
3 server_name status.xxdevops.cn;
4
5 location / {
6 proxy_pass http://uptime-kuma:3001;
7 proxy_http_version 1.1;
8 proxy_set_header Upgrade $http_upgrade;
9 proxy_set_header Connection "upgrade";
10 proxy_set_header Host $host;
11 proxy_set_header X-Real-IP $remote_addr;
12 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
13 proxy_set_header X-Forwarded-Proto $scheme;
14 }
15}🎉 站点监控页面配置完成！
如有问题，请在 Hugo-Teek项目仓库 的 Issues 中反馈
📡
推荐使用微信支付
推荐使用支付宝
- 修改目录样式 2026-03-02
- 站点监控页面配置说明 2026-03-02
- 网站统计页面配置说明 2026-03-02