AI 摘要

这篇文章详细介绍了如何告别付费订阅，利用 Docker 和开源工具 Uptime Kuma，在自己的服务器上搭建一个高颜值、功能强大的服务器监控面板。Uptime Kuma 不仅完全免费，界面美观，还支持毫秒级监控、多种报警方式（如微信、邮件、Telegram），并能创建专业的状态页，甚至绑定专属域名。部署过程简单，只需通过 Docker 安装，然后配置反向代理实现域名访问和SSL加密。最后，你可以轻松添加监控项、设置报警通知，并通过自定义CSS打造独一无二的状态页，让你的服务稳定运行，数据尽在掌握。

Powered by Gemini-2.5-Flash

告别付费订阅！用 Docker + Uptime Kuma 打造高颜值的服务器监控面板

想象一下：如果服务器悄悄挂了，而你毫无察觉，直到被用户发邮件轰炸才知道，那是种什么体验？

虽然市面上有 UptimeRobot 这样的工具，但免费版限制颇多：5 分钟才检测一次、自定义域名要付费、界面也平平无奇。

uptimebot

作为尊贵的 Linux 服务器拥有者，数据当然要掌握在自己手里！

今天，我们来玩点高端的。利用 Docker，在自己的服务器上部署开源监控神器 —— Uptime Kuma。
它界面如丝般顺滑，支持中文，支持微信/TG/邮箱报警，最重要的是：完全免费，颜值爆表！

Github 项目地址

为什么选择 Uptime Kuma？

颜值即正义：UI 设计非常现代化（支持暗夜模式），动态心跳图表看着极度舒适。
毫秒级监控：你可以设置 20秒 一次检测，甚至更短（UptimeRobot 免费版只能 5 分钟）。
报警方式多：支持 Telegram, Discord, 邮件，甚至企业微信、飞书、钉钉等 90+ 种通知方式。
高大上的状态页：原生的状态页 (Status Page) 就足以媲美付费产品，还能绑定你的 专属域名。

uptime kuma

第一步：安装 Docker

Uptime Kuma 基于 Docker 部署，环境隔离，干净清爽。
连接你的 SSH 或者服务器终端，输入以下命令（如果你的服务器已经装过 Docker，请直接跳过此步）：

# 1. 官方一键安装脚本
curl -fsSL https://get.docker.com | bash

# 2. 启动 Docker 并设置开机自启
systemctl start docker
systemctl enable docker

第二步：部署 Uptime Kuma

Docker 装好了，部署 Kuma 只需要几行命令。
这里我们将数据映射出来，防止重启后数据丢失。你可以选择 Docker CLI 或 Docker Compose 两种方式。

方式 A：Docker Compose 部署（推荐）

结构清晰，方便管理。

# 创建目录
mkdir uptime-kuma && cd uptime-kuma

# 下载官方 Compose 文件
curl -o compose.yaml https://raw.githubusercontent.com/louislam/uptime-kuma/master/compose.yaml

# 启动容器
docker compose up -d

方式 B：Docker 直接运行（简单粗暴）

docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:2

参数解析：
-p 3001:3001：开放 3001 端口（如需修改访问端口，改冒号前面的数字即可）。
louislam/uptime-kuma:2：使用 V2 版镜像。

懒人提示：
如果你使用的是 宝塔面板 或 1Panel，直接在“应用商店”搜索 Uptime Kuma 点击安装即可，省去命令行操作。

宝塔面板

第三步：配置域名与 SSL (反向代理)

直接用 IP:3001 访问既难记又不安全，我们需要给 Uptime Kuma 加上“SSL安全证书”（配置反向代理 + HTTPS）。

这里以 宝塔面板 为例（Nginx 同理）：

域名解析：去你的域名服务商（如阿里云、腾讯云、Cloudflare），添加一条 A记录。
- 名称：填 status (或者 monitor)。
- IPv4 地址：填你服务器的公网 IP。

Cloudflare

添加站点：在面板中“新建站点”，域名填写 status.你的域名.com。
设置反代：
- 进入站点设置 -> 反向代理 -> 添加反向代理。
- 代理名称：随意（如 Kuma）。
- 目标 URL：http://127.0.0.1:3001。
- 点击提交。
开启 HTTPS：在站点设置 -> SSL 中申请免费证书并开启强制 HTTPS。

反向代理

搞定！ 现在你可以通过 https://status.你的域名.com 优雅地访问你的监控面板了。

第四步：配置监控与报警

1. 添加监控项

进入 Kuma 后台，创建管理员账号。
建议先点击-> 设置 -> 常规，配置一下 “ 站点主 URL”，也就是你刚才绑定的 https://status.你的域名.com。

添加域名

回到仪表盘，点击 “+ 添加监控项”。

监控类型：
- HTTP(s)：适用于监控网站。
- Ping：适用于监控服务器 IP 连通性。
显示名称：例如 我的博客。
URL：填入你需要监控的地址，如 https://example.com。
心跳间隔：推荐 180 秒（太快容易被防火墙当成攻击，太慢反应迟钝）。
接着看到高级，证书过期提醒，这里我们可以顺手开启，方便我们随时查看SSL证书过期
点击保存。

kuma

2. 设置报警

不想错过每一次宕机？让 Kuma 喊你起床处理问题！

点击监控 -> 【编辑】 -> 【通知】 -> 【设置通知】。
通知类型：推荐 Email (SMTP) 或 Telegram / 企业微信等通知方式。
配置示例 (SMTP)：填写你的 SMTP 信息（QQ邮箱、Gmail 或域名邮箱），这里不懂的可以自行搜索或者询问AI解决
点击测试，收到测试消息后保存。

第五步：创建高颜值“状态页”

我们要把这个漂亮的监控结果展示给访客看，证明我们的服务有多稳定。

点击 Kuma 后台右上角的 【状态页】 -> 【新的状态页】。
名称：例如 System Status。
路径：/status (或者直接设为首页)。
在编辑页面，把刚才添加的“我的博客”监控项拖拽到分组中。

自定义 CSS (注入灵魂)

想让界面更好看？在状态页编辑界面 -> 样式 -> 自定义 CSS 中加入以下代码。

(这段代码来自不知道来自哪位大佬的美化
CSS，如果有人告诉我那最好不过了，我只通过Gemini 3.0 Pro进行了优化和精简和更换图片API ，该美化适配了日间/暗夜模式/移动和PC端，点击下方箭头展开复制，注：如果想要修改网页背景图，只需要修改第14行代码处的loliapi的随机图API即可)

点击展开完整美化 CSS 代码

/* ========================
   1. 字体定义与全局设置
   ======================== */
@font-face {
    font-family: 'CustomACG';
    /* 原字体保留，若失效或加载慢，会自动降级使用系统字体 */
    src: url('https://jsd.cdn.zzko.cn/gh/54ayao/ACG@main/static/fonts/1666963922.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

:root {
    --bg-image-url: url('https://www.loliapi.com/acg/');
    --card-blur: 12px;       /* 稍微增加模糊度，提升文字可读性 */
    --transition-speed: 0.3s;
    
    /* 定义主题色：使用一种舒适的“ACG绿”或“科技蓝”作为点缀，而不是彩虹色 */
    --primary-color: #42b983; 
    --text-main: #2c3e50;    /* 浅色模式主文字颜色 */
    --text-dark: #f0f0f0;    /* 深色模式主文字颜色 */
}

/* 优化后的字体栈：优先 ACG 字体，其次是系统原生字体（macOS/iOS/Win/Android） */
body, #app, .font-monospace {
    font-family: 'CustomACG', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif !important;
    -webkit-font-smoothing: antialiased; /* 让字体在 Mac/iOS 上更清晰 */
    -moz-osx-font-smoothing: grayscale;
}

/* ========================
   2. 背景图与遮罩
   ======================== */
body {
    margin: 0;
    padding: 0;
    color: var(--text-main);
    background-color: #f0f2f5; /* 图片加载前的底色 */
    min-height: 100vh;
}

/* 使用伪元素做背景，解决移动端 background-attachment: fixed 的兼容性问题 */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2;
    background: var(--bg-image-url) center center / cover no-repeat;
}

/* 遮罩层：稍微加深一点，确保文字在任何图片上都能看清 */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background: rgba(255, 255, 255, 0.15); /* 浅色模式叠加层 */
    pointer-events: none;
}

/* 暗黑模式下的遮罩调整 */
.dark body::after {
    background: rgba(0, 0, 0, 0.4); /* 深色模式背景压暗 */
}

/* ========================
   3. 毛玻璃卡片 (高可读性优化)
   ======================== */
.card, 
.shadow-box, 
.alert, 
.list-group-item,
.modal-content,
.form-control,
.input-group-text {
    background-color: rgba(255, 255, 255, 0.8) !important; /* 增加不透明度提升对比度 */
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

/* 卡片悬停效果 */
.card:hover, .shadow-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* === 暗黑模式卡片适配 === */
.dark .card, 
.dark .shadow-box, 
.dark .alert, 
.dark .list-group-item,
.dark .modal-content,
.dark .form-control,
.dark .input-group-text {
    background-color: rgba(30, 30, 30, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-dark);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* 列表项去背景，更通透 */
.list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1) !important;
}

/* 侧边栏与导航 */
.sidebar, .navbar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(var(--card-blur));
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dark .sidebar, .dark .navbar {
    background-color: rgba(20, 20, 20, 0.8) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ========================
   4. 标题与文字
   ======================== */

/* 通用标题样式：清晰、稳重 */
h1, h2, h3, h4, h5, .navbar-brand {
    color: var(--text-main);
    font-weight: 700;
    /* 给文字加一点点白色描边，防止背景图太杂导致看不清 */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 
    letter-spacing: 0.5px;
}

/* 重点文字颜色 */
.monitor-list .item-name, 
.alert-heading {
    color: #333;
    font-weight: 600;
}

/* === 暗黑模式文字适配 === */
.dark h1, .dark h2, .dark h3, .dark .navbar-brand,
.dark .monitor-list .item-name, 
.dark .alert-heading {
    color: var(--text-dark);
    /* 深色模式下，文字阴影改为黑色，增加立体感 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* 描述性文字颜色减淡，形成层级 */
.description, .text-muted {
    color: #666 !important;
}
.dark .description, .dark .text-muted {
    color: #aaa !important;
}

/* 链接颜色优化 */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: #2c8560; /* 深一点的绿色 */
    text-decoration: underline;
}

/* 状态徽章 (Badge) 保持高亮清晰 */
.badge {
    text-shadow: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ========================
   5. 组件细节微调
   ======================== */

/* 进度条美化 */
.progress {
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    height: 10px; /* 稍微细一点，更精致 */
}
.dark .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.6);
}

/* 隐藏不必要的边框 */
.border-end {
    border-right: 1px solid rgba(0,0,0,0.05) !important;
}
.dark .border-end {
    border-right: 1px solid rgba(255,255,255,0.05) !important;
}