Blog-Building on UU 技术站

博客首页排版修复：Hero 区域高度与快捷链接间距优化

Thu, 30 Apr 2026 20:30:00 +0800

问题现象

博客首页打开后，搜索框下方留出了大片空白，快捷链接卡片被推到了屏幕下半部分。用户需要滚动才能看到"专栏"入口，访问路径变长了。

目标效果：搜索框 → 少量间距 → 快捷链接 → 专栏卡片，首页一屏内尽量展示所有核心入口。

排查过程

第一层：min-height 冲突

打开浏览器开发者工具，定位到 .home-hero 元素，发现 computed style 显示 min-height: 80vh。这个规则来自主题源文件，但自定义 CSS 里已经加了一条覆盖规则：

.home-hero {
  min-height: auto !important;
  padding: 2rem 0 0.75rem !important;
}

curl 确认线上 CSS 已经包含这条规则，但刷新页面视觉上没有任何变化——说明有其他规则优先级更高，或者被注释掉的原始规则依然在解析。

第二层：多处冲突的 min-height

用 grep -n "min-height" /var/www/blog/static/css/tech.css 找到了三处相关规则：

/* Line 128 */
.home-hero { min-height: 80vh; padding: 80px 20px; }

/* Line 393-396 (media query) */
@media (max-width: 768px) {
  .home-hero { min-height: 60vh !important; padding: 50px 20px !important; }
}

/* Line 614 (media query) */
@media (min-width: 769px) {
  .home-hero { min-height: 65vh; padding: 60px 40px; }
}

这三处都设置了具体的高度值，而且注释掉不等于删除——CSS 解析器依然会处理注释内的内容在某些构建流程中。更关键的是：自定义 CSS 的覆盖规则写在 line 128 之后，但主题的 media query 规则在 line 393 和 614，相同选择器的后来者优先级更高，且 !important 在 media query 内层会覆盖外层普通规则。

博客手机端渲染优化：从 CSS 排查到 Hugo goat SVG 根因定位

Sun, 26 Apr 2026 06:30:00 +0800

问题现象

博客在手机端打开 Day 5 这类文章时，中文文字出现了逐字分行的问题：

创建 N A T 网关

明明一行能显示的文字，被拆成了一个个单字，视觉上完全无法阅读。

第一反应：CSS 问题

以为是 word-break 或 white-space 的锅。用 MobaXterm 连上服务器，先把 CSS 文件拉下来看：

scp root@***.uuworld.cn:/var/www/blog/static/css/tech.css .

找到好几处 word-break: break-word，这个属性在手机端会让浏览器在任意字符之间断行——而中文没有空格，浏览器就把每个字都当成了合法断点，自然就逐字分行显示。

修改方案：把涉及中文内容的 word-break: break-word 全部改成 word-break: normal，让中文按自然语意换行。

同步回服务器，重建 Hugo：

scp tech.css root@***.uuworld.cn:/var/www/blog/static/css/tech.css
ssh root@***.uuworld.cn "cd /var/www/blog && hugo"

验证 CSS 是否更新：

curl https://***.uuworld.cn/css/tech.css | grep 'word-break'

结果：CSS 已生效。但刷新手机端，问题依旧。

深入：HTML 里藏了什么

CSS 修改了但没效果，怀疑 HTML 本身就有问题。用 curl 抓页面看：

curl http://***.uuworld.cn/acp/acp-day-05-acp-day-5-vpc-nat/ | grep -A5 '典型实验流程'

输出里发现了这个：

<div class="goat svg-container ">
  <svg xmlns="http://www.w3.org/2000/svg" font-family="Menlo,Lucida Console,monospace" viewBox="0 0 192 201">
    <g transform='translate(8,16)'>
      <text text-anchor='middle' x='0' y='4' fill='currentColor' style='font-size:1em'>系</text>
      <text text-anchor='middle' x='0' y='20' fill='currentColor' style='font-size:1em'>├</text>
      <text text-anchor='middle' x='0' y='36' fill='currentColor' style='font-size:1em'>├</text>

问题找到了！Hugo 生成的 HTML 里，代码块被转成了 SVG 图形，每个字符都是独立的 <text> 元素。手机端 SVG 无法正确缩放，浏览器就把每个字符当成独立行来渲染。

安装包落地自动化流程

Sun, 26 Apr 2026 02:10:00 +0800

背景

每次在服务器上下载、安装、配置软件后，安装包散落在 /tmp 或下载目录，没有统一管理。下次要用时找不到，或者重复下载。

博客搭建完成后，决定把「安装包落地」这件事系统化。

流程设计

下载安装包（本地或代理） ↓ 安装、配置、验证 ↓ 移动到 /var/www/blog/static/downloads/ ↓ 更新 tools/index.md 的下载链接 ↓ Hugo 自动构建发布

实际操作

1. 下载安装包

能直接从互联网下载（代理/VPS 可达）：本地 curl/wget 后 scp 上传

# 本地下载 Hugo
curl -sL 'https://github.com/gohugoio/hugo/releases/download/v0.146.0/...tar.gz' -o hugo.tar.gz

# scp 到服务器 downloads 目录
scp hugo.tar.gz root@***.uuworld.cn:/var/www/blog/static/downloads/

服务器本地已有：直接 cp 到 downloads

cp /root/go/bin/derper /var/www/blog/static/downloads/
cd /var/www/blog/static/downloads/
tar -czf derper_v1.96.5_linux_amd64.tar.gz derper

2. 更新 tools 页面

在 content/tools/index.md 添加下载链接：

| [derper_v1.96.5_linux_amd64.tar.gz](/downloads/derper_v1.96.5_linux_amd64.tar.gz) | 1.96.5 | 13 MB | Tailscale DERP relay 二进制 |

3. 构建发布

cd /var/www/blog
/usr/local/bin/hugo --quiet

即可通过 https://***.uuworld.cn/tools/ 下载。

Hugo + PaperMod 博客搭建全记录

Sun, 26 Apr 2026 00:30:00 +0800

背景

想用一个简洁的技术博客记录折腾过的项目，选型要求：静态站点、主题好看、部署简单、定制灵活。

最终技术栈：Hugo 0.146 + PaperMod + nginx + 自定义赛博朋克样式。

目标

静态博客，Markdown 写文章
PaperMod 主题，简洁好看
自定义科技感 UI：粒子背景 + 霓虹光效
通过 nginx 直接托管 /var/www/blog/public/
支持 /about/ 和 /tools/ 页面

踩坑记录

Hugo 版本与主题兼容

下载 Hugo 0.139.0 配合 PaperMod 时报错：

ERROR 2026/04/25 错过了GaTracker的site.config.googleAnalytics

解决：升级到 Hugo 0.146.0 extended 版本，问题消失。

wget https://github.com/gohugoio/hugo/releases/download/v0.146.0/hugo_extended_0.146.0_linux-amd64.tar.gz
tar -xzf hugo_extended_0.146.0_linux-amd64.tar.gz hugo
mv hugo /usr/local/bin/

安装包下载

文件	下载
hugo-0.146.0-extended-linux-amd64.tar.gz	Hugo 0.146.0 extended
PaperMod-master.zip	PaperMod 主题最新源码

about 页面不渲染

content/about.md 放在根目录，访问 /about/ 始终 404。

ali-ecs DERP 部署全记录

Sat, 25 Apr 2026 22:59:00 +0800

背景

需要在阿里云 ECS 上部署 Tailscale DERP relay，让 Windows 客户端能通过 DERP 连接到节点。

目标

域名：derp.***.cn
泛域名证书：.**.cn
derper 运行在 443 端口
STUN 运行在 3478 UDP

踩坑记录

1. DNSPod Token 格式

问题：API 返回 401，原因是 SecretId 是腾讯云 CAM 的，不是 DNSPod 的。

解决：DNSPod Token 格式是 ID,Token（两部分用逗号连接），腾讯云控制台生成的 SecretId/SecretKey 是 CAM 的，不通用。

2. lucky 安装失败

问题：jsdelivr CDN 在阿里云 ECS 上无法访问，导致 lucky 安装脚本无法下载二进制文件。

解决：从 GitHub 直接下载 release 包，传到 ECS 再解压安装。

3. derper 证书参数

问题：新版 derper 参数变了，不再是 -c cert -k key，改为 -certmode manual -certdir。