什么是 uptime-kuma？
uptime-kuma 是一个自托管的监控工具，用于监控网站、服务器和其他在线服务的可用性。它提供了直观的 Web 界面，支持多种监控方式，如 HTTP、TCP、Ping、DNS 等，并且可以自定义通知方式。

效果展示

uptime-kuma 界面

🚀 安装 uptime-kuma

方法一：使用 Docker 安装（推荐）

Docker 安装是最简单和推荐的方式：

1
2
3
4
5
6
7
# 创建数据目录
mkdir uptime-kuma

# 运行容器
cd uptime-kuma
curl -o compose.yaml https://raw.githubusercontent.com/louislam/uptime-kuma/master/compose.yaml
docker compose up -d

🎨 基础配置

  1. 访问 Web 界面：打开浏览器访问 http://服务器IP:3001
  2. 创建管理员账户：首次访问需要设置用户名和密码
  3. 添加监控项：点击「Add New Monitor」按钮添加需要监控的服务

🌟 美化代码和自定义

自用美化配置代码 
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

/* ============================
   基础样式重置与全局配置
============================ */
/* LOGO标题样式 - 补充display:flex使其生效 */
.title-flex {
  font-weight: bold;
  display: flex; /* 关键：flex布局需声明display:flex才生效 */
  justify-content: center;
}

/* ============================
   1. 自定义字体引入（可替换为自己的字体地址）
============================ */
/* 标题特效字体 */
@font-face {
  font-family: 'CustomTitleFont'; /* 语义化命名，替代数字 */
  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; /* 优化字体加载体验 */
}

/* 正文字体 */
@font-face {
  font-family: "BodyFont";
  src: url("https://cdn.jsdelivr.net/gh/nulijiazaizhong/fonts/saye/saye.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================
   2. 全局样式设置
============================ */
/* 基础全局样式 */
body {
  font-family: "BodyFont", sans-serif; /* 正文基础字体 */
  color: #333;
  margin: 0;
  padding: 0;
  /* 背景图样式 - 优化适配 */
  background-image: url('https://t.alcy.cc/fj');
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 根容器字体（优先级更高） */
#app {
  font-family: 'CustomTitleFont', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue',
               Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji',
               'segoe ui symbol', 'noto color emoji' !important;
}

/* ============================
   3. 通用组件样式
============================ */
/* 导航栏链接悬停 */
.navbar a:hover {
  text-decoration: underline;
}

/* 卡片基础样式 */
.card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 修复空格问题 */
  margin-bottom: 20px;
  padding: 20px;
}

/* 卡片标题 */
.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 侧边栏样式 */
.sidebar {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 修复空格问题 */
}

/* ============================
   4. 主题适配样式
============================ */
/* 明亮主题 - 阴影盒子 */
.shadow-box {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 10px;
  margin: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 修复空格问题 */
  text-decoration: none;
}

/* 暗色主题 - 阴影盒子（排除alert类） */
.dark .shadow-box:not(.alert) {
  background-color: rgba(0, 0, 0, 0.65);
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 修复空格问题 */
}

/* ============================
   5. 文字渐变动画特效
============================ */
/* 渐变文字元素 */
span[data-v-7d4a7f28],
.item-name,
div.description[data-v-7d4a7f28][data-v-b8247e57][contenteditable="true"],
div[data-v-7d4a7f28][data-v-b8247e57].alert-heading.p-2,
.refresh-info>div,
.alert-heading.p-2>div,
.alert-heading.p-2>p,
.alert-heading.p-2>h1 {
  /* 渐变背景 */
  background-image: linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
  font-family: 'CustomTitleFont', sans-serif;
  /* 文字渐变核心属性 */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text; /* 兼容非webkit内核 */
  background-size: 400% 100%;
  /* 绑定动画 */
  animation: wzw 10s linear infinite;
}

/* 渐变动画关键帧 - 修复空格问题 */
@keyframes wzw {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

添加自定义 CSS

你可以通过自定义 CSS 来美化界面： 
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
/* 自定义 uptime-kuma 样式 */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 美化卡片样式 */
.card {
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 自定义状态指示器 */
.status-up {
  background-color: #4CAF50;
  animation: pulse 2s infinite;
}

.status-down {
  background-color: #F44336;
  animation: shake 0.5s;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

3. 添加自定义图标

你可以为监控项添加自定义图标：

1
2
<!-- 在监控项设置中添加自定义图标 -->
<img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/github.svg" alt="GitHub" width="24" height="24">

📊 高级配置

1.设置通知：

uptime-kuma 支持多种通知方式，如电子邮件、Telegram、Discord 等：

1
2
3
4
# 配置 Telegram 通知
1. 在 Telegram 中创建 Bot 并获取 Token
2. 获取 Chat ID
3. 在 uptime-kuma 中添加 Telegram 通知，填写 Token 和 Chat ID

2. 使用反向代理

使用 Nginx 作为反向代理，添加 HTTPS 支持：

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
server {
    listen 80;
    server_name monitor.yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name monitor.yourdomain.com;
    
    ssl_certificate /path/to/ssl/cert.pem;
    ssl_certificate_key /path/to/ssl/key.pem;
    
    location / {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        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;
    }
}

🛠️ 常见问题解决

1. 容器无法启动

1
2
3
4
5
# 查看容器日志
docker logs uptime-kuma

# 检查端口是否被占用
netstat -tuln | grep 3001

2. 数据备份和恢复

1
2
3
4
5
# 备份数据
tar -czf uptime-kuma-backup.tar.gz /data/uptime-kuma

# 恢复数据
tar -xzf uptime-kuma-backup.tar.gz -C /

恭喜！你已经成功搭建了 uptime-kuma 监控工具，并添加了一些美化代码。现在你可以监控你的网站和服务器，并通过自定义通知及时了解服务状态。