我的博客架构长什么样

Fri, 10 Jan 2025 10:00:00 +0000

很多人好奇这个博客是怎么搭的.

看起来很简单,但背后东西不少.算不上大工程,但从工程角度确实折腾了不少东西.双语架构,自动化构建, PWA, Google SEO 等等.

所以打算写个系列,把现在的这套东西记录下来.用什么,为什么这么选,代码怎么写的,性能上怎么考虑的.

整体架构

Markdown 内容 (中英双语)
 ↓
 Hugo SSG (extended, v0.164)
 ↓
 自定义主题 (fork cactus-dark, 大改)
 ↓
 Gulp Pipeline
 ├── hugo --minify
 └── Workbox generateSW
 ↓
 Cloudflare Pages (GitHub Actions CI)

三层: 内容层, 构建层, 部署层. 没有数据库, 没有后端, 全是静态文件.

为什么用 Hugo

我是前端, 喜欢用前端圈的东西. Hugo 是用 Go 写的, 文章多了以后构建速度就是快. 两百多篇文章, 几秒就构建完了. 这就是核心原因.

构建快了, 更新博客的心理负担就小. 这是一个正反馈.

Go 模板用起来也挺顺手, 变量作用域, 管道语法, partial 系统, 该有的都有. 不过刚开始接触的时候, {{ range }} 和 {{ with }} 的区别可能会绕一下.

系列 on Time Friend

我的博客架构长什么样

整体架构

为什么用 Hugo