Hugo博客

hugo-theme-hulga — Hugo 博客模板

作者 wlh320

基于 Bulma v1 的 Hugo 博客主题，体积小、支持暗色模式、Pagefind 静态搜索与 PWA。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Bulma v1 构建的 Hugo 博客主题，体积小、构建轻量

支持分类、标签、归档等基础博客页面结构

CSS 变量实现的暗色模式，兼容 prefers-color-scheme 与手动切换

集成 Pagefind 实现静态全文搜索

可选 PWA、KaTeX 数学公式与 PostCSS/PurgeCSS 压缩

模板详细介绍

hulga 是一个把 Hugo 和 Bulma v1 组合起来的博客主题，名字本身就是 hugo + bulma 的缩写。它没有走复杂组件库路线，而是围绕博客常见结构展开：分类与标签的列表页和词条页、归档页，以及文章页的目录侧边栏。配色可以在配置里改主色和链接色，暗色模式基于 CSS 变量实现，同时支持 prefers-color-scheme 和手动强制切换。

功能取舍比较清楚：搜索用 Pagefind 做静态索引，PWA 需要自备图标并修改 manifest，数学公式通过 KaTeX 按需开启，PostCSS 主要用于 PurgeCSS 压缩 CSS。主题默认关闭了目录、暗色切换、摘要显示等选项，需要按需在 params 里打开。内容需要放在 content/post 目录下，非 en 或 zh-cn 的语言要自行补 i18n 文件。

使用前有几处需要核对：PostCSS 依赖 Hugo extended 版本，搜索页要在 hugo build 之后运行 Pagefind 索引命令，PWA 和 CDN 相关开关也涉及额外配置。仓库的 license 状态标记为 review，正式使用前建议确认授权条款。

Hugo博客

适合你的项目吗？

适用场景

个人技术博客或写作站点，需要分类、标签和归档组织文章
希望用 Bulma 风格快速搭建、又不想引入重型前端框架的项目
对暗色模式和静态搜索有需求，且愿意按文档配置 Pagefind 的站点

适合人群

熟悉 Hugo 目录结构与 config.toml 配置的开发者
能接受手动安装依赖、按需开启功能的用户
内容以文章为主、不需要复杂交互或后端的博客

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
通过 git submodule 克隆到 themes/hulga，并在 config.toml 中设置 theme = "hulga"
2
使用 PostCSS 需要 Hugo extended 版本，并复制 package.json 与 postcss.config.js 后执行 npm install
3
搜索页需在 hugo build 之后运行 npx pagefind --site public 生成索引
4
文章内容应放在 content/post 目录下，非 en 或 zh-cn 语言需补充 i18n 文件
5
PWA 需自备图标并修改 manifest.json；license 状态为 review，商用前请确认授权

查看仓库使用说明