用 Hugo 复刻 Minimal UI 的博客观感

用 Hugo 复刻 Minimal UI 的博客观感

J
Joy
2026年06月10日 · 1 分钟阅读

为什么选择 Hugo,以及如何把一套 React + MUI 的设计语言搬到静态站点上。

系列:Hugo 建站实录 2 / 2
  1. 1 用「设计 token」的思维管理个人站点风格
  2. 2 用 Hugo 复刻 Minimal UI 的博客观感 当前

为什么是 Hugo

Minimal UI 是一套基于 React + MUI 的后台模板,观感精炼。但个人博客并不需要一个运行时 SPA —— 静态站点在速度、可维护性、托管成本上都更划算。

Hugo 的优势在于:

  • 构建极快,上千篇文章秒级出站
  • 内置 taxonomy,分类(categories)与标签(tags)开箱即用
  • Markdown 即内容,写作体验顺滑

设计如何迁移

MUI 的 sx 与主题系统无法直接搬运,但设计 token 可以:主色 #00A76F、 柔和卡片阴影、16px 圆角、Public Sans + Barlow 字体,全部转写成 Tailwind v4 的 @theme 变量即可。

不是迁移代码,而是迁移设计语言。

这样既保留了 Minimal 的视觉气质,又获得了静态站点的全部好处。

分享

相关文章