uptime-kuma 搭建教程

部署uptime-kuma#

还是简单粗暴的直接使用docker部署，docker-compose.yml文件如下：

1
services:
2
  uptime-kuma:
3
    container_name: uptime-kuma
4
    image: louislam/uptime-kuma:1
5
    volumes:
6
      - ./data:/app/data
7
    ports:
8
      - "3001:3001"
9
    restart: unless-stopped

然后执行docker-compose up -d即可部署。部署完成后，访问http://ip:3001即可进入uptime-kuma的界面。

先创建账号，然后在添加服务监控，最后创建仪表盘

美化#

提供2套美化方案，一套是从腾讯云开发者社区薅过来的方案，一套是我自己写的方案。

我自己写的

演示：https://uptime.ets2la.cn/status/goodnightan
源码：

1
/* ============================
2
   1. 字体引入（字体换成自己的地址）
3
============================ */
4
/* 标题字体 */
5
@font-face {
6
    font-family: "TitleFont";
7
    src: url("https://cdn.jsdelivr.net/gh/nulijiazaizhong/fonts/harmonyOS/HarmonyOS_Sans.woff2") format("woff2");
8
    font-weight: normal;
9
    font-style: normal;
10
}
11

12
/* 正文字体 */
13
@font-face {
14
    font-family: "BodyFont";
15
    src: url("https://cdn.jsdelivr.net/gh/nulijiazaizhong/fonts/saye/saye.woff2") format("woff2");
16
    font-weight: normal;
17
    font-style: normal;
18
}
19

20
/* ============================
21
   2. 全局字体设置
22
============================ */
23
body, p, span, div {
24
    font-family: "BodyFont", sans-serif;
25
}
26

27
#app {
28
    font-family: '1666963922', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue',
29
                 Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji',
30
                 'segoe ui symbol', 'noto color emoji' !important;
31
}
32

33
/* ============================
34
   3. 背景设置(随机图换成自己的地址)
35
============================ */
36
body {
37
    background: url("https://cf-api.goodnightan.com") no-repeat center center fixed;
38
    background-size: cover;
39
}
40

41
/* ============================
42
   4. 标题字体应用
43
============================ */
44
/* 分组标题 */
45
.group-title span[data-v-f71ca08e],
46
h1, h2, h3, h4, h5, h6 {
47
    font-family: "TitleFont", sans-serif;
48
    font-weight: 700;
49
}
50

51
/* 全局状态栏 */
52
.overall-status[data-v-b8247e57],
53
h1.page-title {
54
    font-family: "TitleFont", sans-serif !important;
55
    font-weight: 800;
56
    font-size: 2.5rem;
57
    text-align: center;
58
    margin: 20px 0;
59
}
60

61
/* 页面主标题（带 logo） */
62
h1.title-flex,
63
h1.title-flex span[data-v-7d4a7f28] {
64
    font-family: "TitleFont", sans-serif !important;
65
    font-weight: 800;
66
    font-size: 2.5rem;
67
    text-align: center;
68
    display: block;
69
    margin: 20px auto;
70
    background-image: linear-gradient(
71
        90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079
72
    );
73
    -webkit-text-fill-color: transparent;
74
    -webkit-background-clip: text;
75
    background-clip: text;
76
    background-size: 400% 100%;
77
    animation: wzw 10s linear infinite;
78
}
79

80
/* 页面主标题 Logo */
81
h1.title-flex .logo-wrapper img {
82
    width: 40px;
83
    height: 40px;
84
    display: inline-block;
85
    vertical-align: middle;
86
    margin-right: 10px;
87
}
88

89
/* ============================
90
   5. 渐变动画定义
91
============================ */
92
h1, h2, h3, .h1, .h2, .h3,
93
.group-title span,
94
.alert-heading.p-2 > h1,
95
.alert-heading.p-2 > h2 {
96
    background-image: linear-gradient(
97
        90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079
98
    );
99
    font-family: '1666963922', sans-serif;
100
    -webkit-text-fill-color: transparent;
101
    -webkit-background-clip: text;
102
    background-clip: text;
103
    background-size: 400% 100%;
104
    animation: wzw 10s linear infinite;
105
}
106

107
@keyframes wzw {
108
    0%   { background-position: 0% 50%; }
109
    50%  { background-position: 100% 50%; }
110
    100% { background-position: 0% 50%; }
111
}
112

113
/* ============================
114
   6. 网格布局（监控项容器）
115
============================ */
116
.monitor-list > .monitor-list {
117
    display: grid;
118
    grid-template-columns: repeat(3, minmax(300px, 1fr));
119
    grid-gap: 1rem;
120
    justify-content: center;
121
}
122

123
/* 响应式布局 */
124
@media (max-width: 900px) {
125
    .monitor-list > .monitor-list {
126
        grid-template-columns: repeat(1, 1fr);
127
    }
128
}
129
@media (min-width: 901px) and (max-width: 1400px) {
130
    .monitor-list > .monitor-list {
131
        grid-template-columns: repeat(2, 1fr);
132
    }
133
}
134
@media (min-width: 1401px) {
135
    .monitor-list > .monitor-list {
136
        grid-template-columns: repeat(3, 1fr);
137
    }
138
}
139

140
/* ============================
141
   7. 卡片样式（监控项）
142
============================ */
143
/* 明亮主题 */
144
.shadow-box {
145
    background-color: rgba(255, 255, 255, 0.65);
146
    padding: 10px;
147
    margin: 5px;
148
    border-radius: 12px;
149
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
150
    text-decoration: none;
151
}
152

153
/* 暗色主题 */
154
.dark .shadow-box:not(.alert) {
155
    background-color: rgba(0, 0, 0, 0.35);
156
    padding: 20px;
157
    margin: 10px;
158
    border-radius: 12px;
159
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
160
}
161

162
/* 边框 + Hover 效果 */
163
.monitor-list .item,
164
.shadow-box {
165
    border: 1px solid rgba(0, 0, 0, 0.2);
166
    border-radius: 12px;
167
    overflow: hidden;
168
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
169
}
170

171
.dark .monitor-list .item,
172
.dark .shadow-box {
173
    border: 1px solid rgba(255, 255, 255, 0.2);
174
}
175

176
.monitor-list .item:hover,
177
.shadow-box:hover {
178
    border-color: rgba(0, 123, 255, 0.8);
179
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
180
}
181

182
/* ============================
183
   8. 侧边栏样式
184
============================ */
185
.sidebar {
186
    background-color: rgba(255, 255, 255, 0.9);
187
    padding: 20px;
188
    margin: 10px;
189
    border-radius: 12px;
190
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
191
}
192

193
/* ============================
194
   9. 服务文字样式
195
============================ */
196
/* 服务名称 */
197
.item-name {
198
    font-family: "BodyFont", sans-serif;
199
}
200

201
/* 服务描述 */
202
.description {
203
    font-family: "BodyFont", sans-serif;
204
}
205

206
/* 刷新信息 */
207
.refresh-info[data-v-b8247e57] {
208
    font-family: "BodyFont", sans-serif;
209
}

薅过来的：

演示：https://uptime.ets2la.cn/status/ets2la
源码

1
/* 自定义字体定义 */
2
@font-face {
3
    font-family: '1666963922';
4
    src: url('https://jsd.cdn.zzko.cn/gh/54ayao/ACG@main/static/fonts/1666963922.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}
8

9
/* 全局样式 */
10
body {
11
    font-family: '1666963922', sans-serif; /* 使用自定义字体 */
12
    color: #333;
13
    margin: 0;
14
    padding: 0;
15
    background-image: url('https://api.goodnightan.com'); /* 自适应背景图片API */
16
    background-attachment: fixed;
17
    background-size: cover;
18
    background-position: center center;
19
    background-repeat: no-repeat;
20
}
21

22
/* 导航栏链接悬停样式 */
23
.navbar a:hover {
24
    text-decoration: underline;
25
}
26

27
/* 卡片样式 */
28
.card {
29
    background-color: #fff;
30
    border-radius: 5px;
31
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
32
    margin-bottom: 20px;
33
    padding: 20px;
34
}
35

36
/* 卡片标题样式 */
37
.card-title {
38
    font-size: 18px;
39
    font-weight: bold;
40
    margin-bottom: 10px;
41
}
42

43

44
/* 在明亮主题下，应用不同的背景色及75%透明度 */
45
.shadow-box {
46
    background-color: rgba(255, 255, 255, 0.75);
47
    padding: 10px;
48
    margin: 5px;
49
    border-radius: 10px;
50
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
51
  text-decoration: none;
52

53
}
54
/* 在暗色主题下，应用不同的背景色及65%透明度 */
55
.dark .shadow-box:not(.alert) {
56
    background-color: rgba(0, 0, 0, 0.65);
57
     padding: 20px;
58
    margin: 10px;
59
    border-radius: 5px;
60
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
61
}
62
/* 侧边栏样式 */
63
.sidebar {
64
    background-color: rgba(255, 255, 255, 0.9);
65
    padding: 20px;
66
    margin: 10px;
67
    border-radius: 5px;
68
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
69
}
70

71
/* 特定元素和类的样式 */
72
span[data-v-7d4a7f28],
73
.item-name,
74
div.description[data-v-7d4a7f28][data-v-b8247e57][contenteditable="true"],
75
div[data-v-7d4a7f28][data-v-b8247e57].alert-heading.p-2,
76
.refresh-info > div,
77
.alert-heading.p-2 > div,
78
.alert-heading.p-2 > p,
79
.alert-heading.p-2 > h1 {
80
    background-image: linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
81
    font-family: '1666963922', sans-serif;
82
    -webkit-text-fill-color: transparent;
83
    -webkit-background-clip: text;
84
    background-size: 400% 100%;
85
    animation: wzw 10s linear infinite;
86
}
87

88
/* 动画关键帧定义 */
89
@keyframes wzw {
90
    0% {
91
        background-position: 0% 50%;
92
    }
93
    50% {
94
        background-position: 100% 50%;
95
    }
96
    100% {
97
        background-position: 0% 50%;
98
    }
99
}
100
  #app {
101
font-family: '1666963922', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue', Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji' !important;
102
}