背景

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

最终技术栈：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。

解决：改为目录格式 content/about/index.md，Hugo 正确生成了 /about/ 页面。

博客域名访问受限

博客域名因阿里云 ICP 备案核查无法访问，暂时通过公网 IP 直接访问。

CSS 样式优先级冲突

PaperMod 主题有自己的深色样式，自定义 CSS 的颜色老被覆盖。

解决：

  1. 用 curl 检查实际渲染后的 HTML，找到 PaperMod 的真实 class 名称
  2. 针对具体类名写样式：.entry-hint-parent、.post-title、.post-content 等
  3. 大量使用 !important 强制覆盖

最终效果

  • 科技感深色背景（#030014）
  • 青色（#00f0ff）+ 紫色（#bd00ff）霓虹配色
  • Canvas 粒子动画背景
  • 文章标题 97% 白色，正文 92% 白色，清晰可读
  • Hugo 构建速度 96ms，0 错误

部署结构

/var/www/blog/ ├── content/ │ ├── posts/ │ │ └── 001-ali-ecs-derper-deploy.md │ ├── about/index.md │ └── tools/index.md ├── layouts/ │ └── partials/ │ ├── header.html # 注入 Canvas + 扫描线 │ ├── extend_head.html # 注入 tech.css │ └── extend_footer.html # 注入 tech.js ├── static/ │ ├── css/tech.css │ └── js/tech.js ├── public/ # Hugo 构建输出 └── hugo.toml

后续计划

  • 继续写技术记录
  • 优化移动端显示
  • 探索评论系统集成