博客 on HRunning

Hugo ｜ to do list

Thu, 27 Nov 2025 11:04:45 +0800

📝 博客待办清单

🔥 P0

让博客可以在google、百度等搜索引擎中被收录
- 提交 google sitemap
- 提交百度 sitemap,百度提交sitemap时需要备案号才能增加提交次数
优化网站访问速度
- 开启 BBR 拥塞控制 net.ipv4.tcp_congestion_control = bbr

🛠 p1

开发agent 同时发布上传yuque、csdn、weichat
- yuque api token 需要付费
- csdn 目前没有找到合适的api
美化网站右侧边栏添加优秀文章,根据访问量去统计
单独制作首页，可以参考https://www.shaohantian.com/
SEO 搜索结果片段优化，提高搜索结果的美观性
写关于我的一些说明
开发管理平台
增加常用工具列表

✅Archived - 已上线功能

增加评论功能
- 评论功能迁移到waline
- 评论通知 wechat、email 等渠道
完善关键字搜索功能
添加文章字数统计
添加英文站，中英文文章由作者分别维护
- 页眉网站统计信息适配英文版
- 文章顶部字数统计、阅读量统计适配英文版
- 左侧边栏切换按钮由下拉框改为直接切换
美化浏览器顶层图标
首页和文章添加"返回顶部"功能
服务器部署网站服务器不在国内可以先不备案域名：hangops.top，首年 ¥14，续费 ¥32
部署监控系统
- 部署prometheus
- 部署grafana(https://monitor.hangops.top/)
添加网站访问统计
- 统计网站访问量
- 统计文章访问量
备份blog mysql 数据库到cos 存储桶

内容相关

目录结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


- 运维
 - Mysql
 - Redis
 - Kafka
 - ansible
 - k8s
 - aws
 - Linux
 - Docker
 - prometheus
 - Terraform

- 编程
 - Python
 - Shell
 - Go
 - 数据结构
 - 算法

- 专题
 - 博客相关
 - 面试相关
 - Liunx 性能优化
 - Mysql 实战

Hugo ｜如何让搜索引擎检索到博客

Mon, 15 Dec 2025 19:45:07 +0800

部署完博客后，需要让搜索引擎检索到博客。

google

获取Measurement ID

google 分析官方网站在 google 分析中，每个网站都有一个唯一的 Measurement ID，格式为 G-XXXXXXXXXX。这个 ID 用于将网站的访问数据发送到 google 分析。

在hugo.yaml 中添加如下配置：

如果你是yaml 格式，注意要是最顶级的配置

1

googleAnalytics: G-xxxx # <--- 换成你的 Measurement ID

提交siteMap

siteMap 是一个 xml 文件，用于告诉搜索引擎你的网站有哪些页面。

Hugo 会在生成和部署网站时在 public 文件夹根目录下自动生成 sitemap.xml 文件

登录谷歌搜索控制台。在验证所有权的选项中选择 “Google Analytics”，输入你的 Measurement ID 即可验证所有权。

下面就是已经成功提交的截图

如何验证文章已经被Google 收录

对于一个新站，Google 可能需要几天甚至几周才能把所有页面全部收录

Google Search Console 验证

直接在顶部的搜索框查询，输入你的文章链接，即可验证是否被收录。

也可以直接点击请求编入索引，请求 Google 收录你的文章。

google 搜索验证

tips:

验证收录可能需要几天甚至几周才能完成。
文章的标题尽可能增加关键词密度，更加吸晴，让用户有点击的欲望。

百度

登录百度搜索控制台
按照要求添加域名后，使用普通收录推送资源

提交 sitemap.xml 文件时，需要备案号，这里先不添加。
api 提交每天会有条数限制

refs

https://hyrtee.github.io/2023/start-blog/#refs

Hugo ｜ Waline 评论系统私有化部署

Sun, 14 Dec 2025 17:53:12 +0800

Waline 评论系统

博客原本使用github giscus 作为评论系统，现在迁移至 Waline 评论系统。

支持匿名评论（无需登录）
UI 简洁美观
可以配置邮箱/weixin 接收通知

本地部署(Waline)

docker-compose 部署

 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


version: '3'

services:
 waline:
 image: lizheming/waline:latest
 container_name: waline-standalone
 restart: always
 ports:
 - "8360:8360"
 environment:
 - MYSQL_HOST=blog-stats-db 
 - MYSQL_PORT=3306
 - MYSQL_DB=waline_db 
 - MYSQL_USER=root
 - MYSQL_PASSWORD=xxx
 - MYSQL_CHARSET=utf8mb4
 - MYSQL_SSL=false
 - TABLE_PREFIX=wl_

 - TZ=Asia/Shanghai
 - LANG=zh_CN.UTF-8
 - JWT_SECRET=Standalone_Waline_Secret_2025

 # --- 通知配置 ---
 - SITE_NAME=Hangliuc
 - SITE_URL=https://hangops.top

 # 163
 - SMTP_SERVICE=163
 - SMTP_USER=iliuhang@163.com
 - SMTP_PASS=xxxxx
 - SMTP_SECURE=true
 - AUTHOR_EMAIL=iliuhang@163.com
 - SENDER_EMAIL=iliuhang@163.com

 networks:
 - ext-blog-net

networks:
 ext-blog-net:
 external: true
 name: blog-stats_blog-net  #因为 Waline 和 MySQL 不在同一个 docker-compose.yaml 文件里，它们默认是隔离的。需要让 Waline 加入到 MySQL 所在的网络中。

使用时请先导入 waline.sql 以完成表和表结构的创建，之后在项目中配置如下环境变量。 Waline 数据库配置

1

docker exec -i blog-stats-db mysql -uroot -p'xxxxx' -Dwaline_db < waline.sql

Nginx 反向代理

 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


server {
 if ($host = comment.hangops.top) {
 return 301 https://$host$request_uri;
 } # managed by Certbot


 listen 80;
 server_name comment.hangops.top;

 # 强制跳转 HTTPS (可选，建议加上)
 return 301 https://$host$request_uri;


}

server {
 listen 443 ssl http2;
 server_name comment.hangops.top;

 ssl_certificate /etc/letsencrypt/live/comment.hangops.top/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/comment.hangops.top/privkey.pem;

 location / {
 proxy_pass http://127.0.0.1:8360;

 # 必须带上的 Header，否则 Waline 无法获取用户真实
 proxy_set_header Host $host;
 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;
 }

 ssl_certificate /etc/letsencrypt/live/comment.hangops.top/fullchain.pem; # managed by Certbot
 ssl_certificate_key /etc/letsencrypt/live/comment.hangops.top/privkey.pem; # managed by Certbot
}

Hugo 配置

Waline 组件配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


params:
 comments:
 enabled: true
 provider: waline
 waline:
 serverURL: https://comment.hangops.top
 pageview: true # 开启阅读量
 requiredMeta:
 - nick
 - mail 

Hugo ｜如何自定义实现网站统计功能

Thu, 11 Dec 2025 14:23:32 +0800

一些实现方式

目前看到网上关于网站统计功能的实现方式：

基于busuanzi js的统计功能
基于Waline 的统计功能
基于服务器端的统计功能

关于上面的两种方式大家可以自行在网上搜索，这里就不展开讲了，主要讲一下基于自行服务端的统计功能。

基于服务器端的统计功能

优点

数据源真实可靠（全部来自你自己的数据库）
访问量可以根据业务逻辑定义
可以进行强一致性统计（文章访问量、文章数量、评论数量等）
不依赖第三方服务
后续可以接入监控告警系统，实时观察
后续可以在自研管理平台展示

目前统计功能

网站访问量
文章访问量
文章总访问量
网站运行时间
….

实现方式

采用gin web 框架 https://github.com/gin-gonic/gin

使用 GORM 做数据库对象关系映射 https://github.com/go-gorm/gorm

以处理POST /api/article/visit，其他接口处理基本相同

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


func (r *articleRepo) IncreaseViewCount(path string) (int64, error) {
 // 1. 执行 Upsert (存在则更新，不存在则插入)，体现原子性操作，避免并发问题
 // SQL: INSERT INTO article_stats ... ON DUPLICATE KEY UPDATE view_count = view_count + 1
 err := r.db.Clauses(clause.OnConflict{
 Columns: []clause.Column{{Name: "path"}},
 DoUpdates: clause.Assignments(map[string]interface{}{
 "view_count": gorm.Expr("view_count + 1"),
 }),
 }).Create(&model.ArticleStat{Path: path, ViewCount: 1}).Error

 if err != nil {
 return 0, err
 }

 // 2. 查出最新的值返回
 var stat model.ArticleStat
 err = r.db.Select("view_count").Where("path = ?", path).First(&stat).Error
 return stat.ViewCount, err
}

前端逻辑上报/article/visit 接口时如果是首页(/)或者分页(/page/1)或者搜索(/search/query)，也会添加到文章计数，这里排除了这个bug

 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


 <script>
 (function() {
 const isLocal = ["localhost", "127.0.0.1"].includes(window.location.hostname);

 const API_URL = isLocal
 ? "http://localhost:8080/api/article/visit"
 : "https://hangops.top/api/article/visit";

 const path = window.location.pathname;
 // 如果是首页(/)或者分页(/page/1)或者搜索(/search/query)，直接什么都不做
 if (path === "/" ||
 path.includes("/page/") ||
 path.includes("/search/")) {
 return;
 }

 fetch(API_URL, {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ path: path })
 })
 .then(response => response.json())
 .then(data => {
 const container = document.getElementById("article_views_container");
 const viewEl = document.getElementById("article_views");

 if (container && viewEl && data.views) {
 viewEl.innerText = data.views;

 container.style.display = "flex";
 }
 })
 .catch(err => {
 console.error("阅读量获取失败:", err);
 });
 })();
 </script> 

Hugo ｜本地服务器部署

Sun, 07 Dec 2025 18:31:24 +0800

以前采用的是github pages部署网站，现在进行服务器部署网站。

安装基础软件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


# 更新系统并安装 EPEL 源
sudo yum update -y
sudo yum install epel-release -y

# 安装 Nginx, Git, 和 Certbot
sudo yum install nginx git certbot certbot-nginx -y

# 启动 Nginx 并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

# 创建目录
sudo mkdir -p /var/www/hangops

sudo chown -R root:root /var/www/hangops
sudo chmod -R 755 /var/www/hangops

配置 Nginx 与 HTTPS

1
2
3
4
5
6


sudo vi /etc/nginx/conf.d/hangops.top.conf

# 检查语法是否正确
sudo nginx -t
# 如果显示 successful，则重启
sudo systemctl reload nginx

nginx 配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


server {
 listen 80;
 server_name hangops.top www.hangops.top;

 root /var/www/hangops;
 index index.html;

 # 核心：处理 Hugo 的路由（防止刷新 404）
 location / {
 try_files $uri $uri/ =404;
 }

 # SRE 优化：开启 Gzip 压缩，加速访问
 gzip on;
 gzip_min_length 1k;
 gzip_comp_level 5;
 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

申请 HTTPS 证书

sudo certbot –nginx -d hangops.top -d www.hangops.top

配置 GitHub 自动部署 (CI/CD)

看仓库源码即可

Hugo ｜基础规划和使用方法

Thu, 27 Nov 2025 15:16:29 +0800

Hugo 目录结构

content/: 存放你的 Markdown 文章（数据库）。

layouts/ & themes/: 存放前端代码（HTML/CSS 模版）。

static/: 存放图片、CNAME 文件等静态资源。

hugo.toml (或 .yaml/.json): 整个站点的配置文件（相当于 k8s 的 configmap）

评论系统

Giscus 评论系统 https://giscus.app/zh-CN

hugo.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


params:
 # ... 其他配置 ...

 comments:
 enabled: true
 provider: giscus  # <--- 将默认的 disqus 改为 giscus

 giscus:
 repo: hangliuc/blog-hugo  # <--- 换成你的 "用户名/仓库名"
 repoID: "R_kgD..." # <--- 填入第二步获取的 data-repo-id
 category: "Announcements" # <--- 你选择的分类名
 categoryID: "DIC_kw..." # <--- 填入第二步获取的 data-category-id
 mapping: pathname
 lightTheme: light
 darkTheme: dark_dimmed
 reactionsEnabled: 1
 emitMetadata: 0

除此之外需要去GitHub 授权 Giscus 评论系统参考链接 https://giscus.app/zh-CN

分类和标签

Categories (分类)：像文件夹一样，通常是树状、排他性的。一篇文章通常属于 1-2 个分类（例如“运维”、“容器化”）。

Tags (标签)：像便利贴一样，是扁平、描述性的。一篇文章可以有多个标签（例如“Docker”、“网络”、“Troubleshooting”、“Linux”）。

一些可用链接

图标下载网站 https://tabler.io/icons

一些使用 hugo-theme-stack 搭建的优秀网站

https://liuhouliang.com/categories/web/

https://blog.reincarnatey.net/

https://zfj1441.com/archives/

https://hyrtee.github.io/2023/start-blog/#%E8%AF%84%E8%AE%BA

https://www.shaohantian.com/