推荐一些博客常用的服务搭建教程

近况

最近在折腾博客，根据现有情况（博客运行多年，没有更新文章。。。ps：其实有更新几篇，但大多数的文章都是引荐大佬的教程所制作，没有形成写作习惯。。。无非就是我特懒）

服务集合

站点监控 Uptime Kuma & API 站点统计 umami 评论系统 Twikoo 极简朋友圈

Uptime Kuma预览

umami预览

Uptime Kuma

我这边服务器用的是 宝塔面板 ，宝塔面板左侧菜单点击终端，输入以下命令行

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

Tips：（3001:3001，这个可以根据自己需求更改端口，注意需要在服务器放开设置的端口）

安装Uptime Kuma

点击Docker，再点击容器，最右侧有个管理按钮，这里设置一下反代与SSL

设置反代&SSL

这时可以在浏览器地址栏输入这个域名访问，输入默认账号：admin ；默认密码：umami ，进入后台配置页面

Uptime Kuma后台

点击添加监控项，显示名称输入名称- -输入URL- -心跳间隔（这里推荐先选择初始60s，保存之后再修改为600s）–最后保存

添加监控项

状态页面–新的状态页–填写名称及路径–下一步

新建状态页

新建状态页

底部自定义文本（这里可设置备案号）;显示标签（这个可以去首页右上角头像设置–标签–添加新标签）;显示Powered By（按需设置）显示证书有效期（按需设置）

添加分组–添加监控项……

设置状态页

注意

所有样式的版权均归张洪Heo所有，如有侵权可联系删除

洪哥相似的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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
:root {
  --global-bg: #fff;
  --hr-border: #97bcfb;
  --hr-before-color: #6ea2f9;
  --search-bg: #f6f8fa;
  --search-input-color: #4c4948;
  --search-result-title: #4c4948;
  --preloader-bg: #37474f;
  --preloader-color: #fff;
  --tab-border-color: #f0f0f0;
  --tab-button-bg: #f0f0f0; /* 修正拼写错误：botton → button */
  --tab-button-color: #1f2d3d; /* 修正拼写错误 */
  --tab-button-hover-bg: #dcdcdc; /* 修正拼写错误 */
  --tab-button-active-bg: #fff; /* 修正拼写错误 */
  --sidebar-bg: #f6f8fa;
  --btn-hover-color: #ff7242;
  --btn-color: #fff;
  --btn-bg: #307af6;
  --text-bg-hover: #307af6;
  --light-grey: #eee;
  --text-highlight-color: #1f2d3d;
  --blockquote-color: #6a737d;
  --blockquote-bg: rgba(73, 177, 245, 0.1);
  --reward-pop: #f5f5f5;
  --toc-link-color: #666261;
  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.06);
  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.15);
  --heo-theme: #425AEF;
  --heo-theme-op: #4259ef23;
  --heo-theme-op-deep: #4259efdd;
  --heo-theme-op-light: #4259ef0d;
  --heo-theme-none: #4259ef01;
  --heo-blue: #425AEF;
  --heo-red: #f04a63;
  --heo-pink: #FF7C7C;
  --heo-green: #57bd6a;
  --heo-yellow: #936900;
  --heo-yellow-op: #d99c001a;
  --heo-orange: #e38100;
  --heo-purple: #7a60d2;
  --heo-fontcolor: #363636;
  --heo-background: #f7f9fe;
  --heo-reverse: #000;
  --heo-maskbg: rgba(255, 255, 255, 0.6);
  --heo-maskbgdeep: rgba(255, 255, 255, 0.85);
  --heo-hovertext: var(--heo-theme); /* 修正：使用已定义的变量 */
  --heo-ahoverbg: #F7F7FA;
  --heo-lighttext: var(--heo-theme); /* 修正：使用已定义的变量 */
  --heo-secondtext: rgba(60, 60, 67, 0.8);
  --heo-scrollbar: rgba(60, 60, 67, 0.4);
  --heo-card-btn-bg: #edf0f7;
  --heo-post-blockquote-bg: #fafcff;
  --heo-post-tabs-bg: #f2f5f8;
  --heo-secondbg: #f7f7f9;
  --heo-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --heo-card-bg: #fff;
  --heo-card-bg-op: rgba(0, 0, 0, 0.05); /* 修正：定义这个变量 */
  --heo-card-bg-none: rgba(255, 255, 255, 0);
  --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --heo-card-border: #e3e8f7;
  --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
  --style-border: 1px solid var(--heo-card-border);
  --style-border-always: 1px solid var(--heo-card-border);
  --style-border-hover: 1px solid var(--heo-theme); /* 修正：使用已定义的变量 */
  --style-border-hover-always: 1px solid var(--heo-theme); /* 修正 */
  --style-border-dashed: 1px dashed var(--heo-theme-op);
  --style-border-forever: 2px solid var(--heo-theme); /* 修正 */
}

body {
  background: var(--heo-background); /* 使用已定义的变量 */
}

.shadow-box {
  box-shadow: var(--heo-shadow-border);
  background: var(--heo-card-bg);
  border: var(--style-border);
}

.item-name {
  font-weight: bold;
}

.btn-primary {
  background-color: var(--heo-green);
  color: var(--btn-color); /* 使用已定义的变量 */
}

.hp-bar-big .beat {
  background-color: var(--heo-green);
}

.bg-primary {
  background-color: var(--heo-green) !important;
}

.title-flex {
  justify-content: center;
}

.refresh-info.mb-2 {
  display: none;
}

.mt-3 {
  margin-top: 3rem !important;
}

a {
  text-decoration: none !important;
}

.monitor-list .monitor-list {
  min-height: 46px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; /* 添加间距 */
}

@media screen and (max-width: 768px) {
  .monitor-list .monitor-list {
    grid-template-columns: 1fr;
  }
  
  .col-md-8, .col-md-4 {
    max-width: 100%;
    width: 100%;
  }
}

.overall-status .ok {
  color: var(--heo-green) !important;
}

.item .row {
  justify-content: space-between;
  align-items: center; /* 添加垂直居中 */
}

.col-md-8 {
  max-width: 50%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.col-md-4 {
  width: 50%;
}

.bg-danger, .bg-warning {
  color: #FFFFFF;
  padding: 0.25rem 0.5rem; /* 添加内边距 */
  border-radius: 4px; /* 添加圆角 */
}

.monitor-list .item .info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 添加间距 */
}

.bg-primary {
  display: none;
}

/* 添加响应式调整 */
@media (max-width: 576px) {
  .item .row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .col-md-8, .col-md-4 {
    max-width: 100%;
    width: 100%;
  }
}

umami部署

在需要放入 umami 信息的文件夹建立 docker-compose.yaml 文件，填写下面的内容：

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
version: '3'
services:
  umami:
    container_name: umami
    image: umamisoftware/umami:postgresql-latest
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      HASH_SALT: replace-me-with-a-random-string
    depends_on:
      - db
    restart: always
  db:
    container_name: umami-db
    image: postgres:12-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./sql/schema.postgresql.sql:/docker-entrypoint-initdb.d/schema.postgresql.sql:ro
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always

注意，umami的ports中，3000:3000 可以将前面的3000更换成其他闲置端口。

然后通过ssh访问服务器后，cd进这个文件夹，然后执行 docker-compose up -d 即可配置完成。

设置信息
进入之后umami默认的用户名为 admin，默认密码为 umami。进入之后我们先改一下语言。

Twikoo私有部署

1
docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8080:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo

一键部署Twikoo

设置反代&SSL，完成之后访问域名即可

设置反代&SSL

如果显示如图的字幕输出，则API部署好了

Twikoo API正常

进入博客文件夹 _config.anzhiyu.yml 全局搜索 comments，use: Twikoo

1
2
3
4
5
6
7
8
9
10
11
12
13
# Comments System
# --------------------------------------

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Valine/Waline/Twikoo/Artalk
  use: Twikoo # Twikoo/Waline
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://twikoo.imoyan.top/
  region:
  visitor: false
  option:

envId 中填写 服务器公网IP:8080 或者 设置二级域名如 https://twikoo.imoyan.top/，之后再进行hexo三连

1
2
3
hexo cl
hexo ge
hexo d