Beautiful Hugo 上手:从零搭建静态博客
Beautiful Hugo 是 Hugo 生态里比较省心的一款主题。它不追求花哨,适合想先把博客跑起来的人:配置不复杂,默认样式也够干净,后面再慢慢改细节就行。
先把环境准备好
使用主题前,先确认本机已经装好 Hugo,版本建议在 v0.80.0 以上。
把主题放进项目的 themes 目录,最直接的方式就是克隆仓库:
git clone https://github.com/halogenica/beautifulhugo themes/beautifulhugo
主要配置放哪里
主题的核心配置在项目根目录的 hugo.toml。我一般会先看这几块:
- 网站基本信息:标题、描述、作者
- 主题相关设置:颜色、字体、布局
- 社交链接:放在
data/beautifulhugo/social.toml - 菜单导航:按自己的内容结构改掉默认项
这几项配完,网站的骨架就基本成型了。
新建第一篇文章
Hugo 创建文章靠命令行就够了:
hugo new post/my-first-post.md
生成后打开对应的 Markdown 文件,补上 Front Matter,用来控制标题、日期和展示信息:
---
title: "我的第一篇博客文章"
date: 2023-10-15
description: "这是使用 Beautiful Hugo 创建的第一篇文章"
tags: ["Hugo", "博客", "教程"]
---
本地预览
写完内容后,先起一个本地服务看效果:
hugo server -D
默认访问 http://localhost:1313。文件改动后页面会自动刷新,适合一边写一边调。博客主题这种东西,光看配置文件很难判断实际效果,预览这一步基本省不掉。
调整外观
Beautiful Hugo 自带了一些可改的样式,常见的几个入口如下:
- 背景图片:替换
static/img/下的资源 - 颜色方案:切换浅色、深色风格
- 字体细节:在
static/css/main.css里改
如果只是想先上线,建议先用默认样式;等内容起来了,再回头收拾视觉细节。这样比一开始纠结配色省时间。
发布上线
确认没问题后,直接生成静态文件:
hugo
生成结果在 public 目录,可以部署到 Netlify、GitHub Pages 或 Vercel 这类静态托管平台。
再往前走一点
如果你想继续往下折腾,exampleSite 目录能当作参考配置;多语言可以看 i18n 目录;想改得更深,就去 layouts/partials 里动模板。
Beautiful Hugo 的好处不在于'功能多',而在于起步轻。先把博客搭起来,再决定哪些地方值得花时间,这通常比一开始就追求完美更实际。

