一、Hugo 简介 #
Hugo 是一个用 Go 语言编写的静态网站生成器,以其极快的构建速度和灵活性而闻名。它非常适合搭建个人博客、文档网站、作品集等。
主要特点:
- 极速构建: Hugo 的构建速度非常快,可以在几毫秒内生成数千页的网站,这对于大型网站尤其有利。
- 简单易用: 尽管功能强大,但Hugo的学习曲线相对平缓。它使用Markdown格式编写内容,易于上手。
- 高度可配置: Hugo 提供了丰富的配置选项,允许用户根据自己的需求定制网站的各个方面,包括主题、菜单、分类、标签等。
- 跨平台: Hugo 可以在macOS、Windows、Linux等多种操作系统上运行。
- 无需数据库: 静态网站的特性意味着它不需要数据库,这简化了部署和维护,并提高了安全性。
- 丰富的社区和主题: Hugo拥有一个活跃的社区,并提供了大量高质量的开源主题供用户选择。
官方网站:https://gohugo.io/
二、Blowfish 主题 #
Blowfish 是一个为 Hugo 设计的现代化、功能丰富且高度可定制的主题。它旨在提供一个美观、响应迅速且用户体验良好的博客平台。
主要特点:
- 现代化设计: Blowfish 拥有简洁、优雅的现代设计,注重内容呈现,提供出色的阅读体验。
- 响应式布局: 主题完全响应式,无论用户使用桌面电脑、平板还是手机访问,网站都能良好地适应屏幕尺寸。
- 高度可定制: Blowfish 提供了广泛的定制选项,包括颜色、字体、布局、组件等,用户可以轻松调整以匹配个人品牌。
- 多语言支持: 主题内置了多语言支持,方便创建多语言网站。
- SEO 友好: 针对搜索引擎优化进行了设计,有助于提高网站在搜索结果中的排名。
- 丰富的内置功能:
- 深色模式/浅色模式: 支持一键切换主题颜色模式。
- 代码高亮: 内置了代码高亮功能,方便展示代码片段。
- 评论系统集成: 支持多种评论系统(如Disqus, Giscus等)的集成。
- 分析工具集成: 方便集成Google Analytics等网站分析工具。
- 社交媒体链接: 轻松添加社交媒体链接。
- 图片优化: 支持响应式图片和懒加载。
- 活跃的开发和社区: Blowfish 主题持续更新,并有一个活跃的社区提供支持。
三、环境准备 #
3.1 Git #
- 用途: 用于从 GitHub 等代码托管平台克隆 Hugo 主题(如 Blowfish)以及管理自己的博客内容。
- 安装: 您可以从 Git 官方网站下载并安装适合您操作系统的版本:下载地址
3.2 Hugo #
- 用途: Hugo 是核心的静态网站生成器,用于将 Markdown 内容和主题文件编译成静态 HTML 网站。
- 安装: 可参考官方安装文档
- macOS: 推荐使用 Homebrew 进行安装:
brew install hugo - Windows: 可以通过 Scoop、Chocolatey 或直接下载二进制文件进行安装。
- Linux: 可以通过包管理器(如
apt、yum)或直接下载二进制文件进行安装。
- macOS: 推荐使用 Homebrew 进行安装:
- 验证: 安装完成后,您可以在命令行中运行
hugo version来验证是否安装成功并查看版本信息。
3.3 文本编辑器 #
- Visual Studio Code (VS Code): 宇宙第一编辑器的含金量,不用我再赘述了吧。
- Typora: 一款极简的 Markdown 编辑器,提供“所见即所得”的沉浸式写作体验,非常适合专注于内容创作。博主非常喜欢它的图片自动上传功能(搭配图床使用)。
四、站点创建 #
4.1. 准备Git仓库 #
博主习惯用一个Git仓库管理博客内容。主分支用来写文章,发布分支用来存储构建好的静态博客页面。
创建my-blog仓库(my-blog 是博客的名称,可自己定义):
mkdir my-blog
cd my-blog
# 修改git默认分支为main
git config --global init.defaultBranch main
git init
git config user.email "your@mail.domain"
git config user.name "yourname"
# 添加远程仓库
git remote add origin https://yourgitdomain/<yourname>/<repo-name>
# 新增.gitignore文件
touch .gitignore
.gitignore文件内容:
# 操作系统文件
.DS_Store
# Hugo 构建输出目录
/public/
# 编辑器和IDE文件
.vscode/
.idea/
# 日志文件
*.log
然后进行第一次提交:
# 添加文件
git add .
git commit -m "commit message"
# push
git push --set-upstream origin main
4.2.创建 Hugo 站点 #
初始化 Hugo 站点。打开终端,然后执行以下命令:
hugo new site --force .
现在目录结构应该大致如下:
my-blog
├── .git
│ ├── ......
├── .gitignore
├── archetypes
│ └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes
目录说明:
-
archetypes: 这个目录包含内容文件的模板。当使用
hugo new命令创建新内容时,Hugo会根据这里定义的模板来生成文件。 -
assets: 这个目录用于存放需要通过Hugo Pipes处理的资源文件,例如SCSS/Sass文件、JavaScript文件、图片等。Hugo Pipes是一个强大的资源处理工具,可以用于压缩、合并、指纹化这些文件。
-
config: 这个目录存放Hugo站点的配置文件,例如
_default/config.toml,production/config.toml等。 -
content: 这是博客所有内容的存放地,例如文章、页面、项目等。内容文件通常是Markdown格式。这个目录的结构决定了网站的URL结构。
-
data: 这个目录用于存放可以在模板中访问的结构化数据文件,例如YAML、JSON或TOML格式的文件。这对于存储不属于内容但需要在网站中显示的信息(如作者列表、社交媒体链接等)非常有用。
-
i18n: 这个目录存放翻译文件,Hugo会根据用户的语言设置加载相应的翻译文本。
-
layouts: 这个目录包含网站的HTML模板文件。它定义了内容如何被渲染成最终的网页。我们可以为不同的内容类型、列表页、单页等创建不同的布局文件。
-
public: 这是Hugo生成静态网站的默认输出目录。当运行
hugo命令时,所有生成的HTML、CSS、JS和图片文件都会被放置在这个目录中。这个目录的内容可以直接部署到任何静态网站托管服务。 -
static: 这个目录用于存放不需要Hugo处理的静态文件,例如图片、PDF、字体文件等。这些文件在网站生成时会被直接复制到
public目录的根部。 -
themes: 这个目录存放使用的Hugo主题。一个主题通常包含
layouts、static、archetypes、assets等目录,它定义了网站的外观和基本结构。
4.3. 安装 Blowfish 主题 #
这里介绍两种方式安装 Blowfish 主题:使用 Git Submodule 或直接下载。推荐使用 Git Submodule,因为它方便主题更新和版本控制。
方式一:使用 Git Submodule (推荐) #
在你的博客根目录(my-blog)下执行以下命令:
git submodule add https://github.com/nunocoracao/blowfish.git themes/blowfish
这会将 Blowfish 主题作为 Git 子模块添加到 themes/blowfish 目录下。
方式二:直接下载 #
- 访问 Blowfish 主题的 GitHub 仓库
- 点击 “Code” 按钮,选择 “Download ZIP” 下载主题压缩包。
- 将下载的压缩包解压,并将解压后的文件夹重命名为
blowfish。 - 将
blowfish目录移动到themes/目录下。
无论哪种方式,最终目录结构中都应该有 themes/blowfish 目录。
主题配置文件 #
等待子模块克隆完成之后:
-
删除根目录下(
my-blog)Hugo自动生成的hugo.toml文件 -
将
themes/blowfish/config/_default下的所有*.toml都粘贴到根目录下的config/_default目录注意: 如果项目中已经存在module.toml文件,请不要覆盖它!
rm hugo.toml
mkdir -p ./config/_default
cp ./themes/blowfish/config/_default/*.toml ./config/_default
现在config目录结果应该如下:
config
└── _default
├── hugo.toml
├── languages.en.toml
├── markup.toml
├── menus.en.toml
├── module.toml
└── params.toml
各配置文件说明:
-
hugo.toml: 这是Hugo站点的主配置文件。它包含了网站的基本设置,如
baseURL(网站根URL)、title(网站标题)、theme(使用的主题)、paginate(每页文章数量)等。所有核心的全局配置都可以在这里找到。 -
languages.en.toml: 这个文件用于配置英文语言相关的设置。如果有多个语言,可以创建
languages.zh.toml等文件来分别配置。它通常包含语言代码、语言名称、权重等信息。 -
markup.toml: 这个文件用于配置Hugo处理Markdown内容的渲染方式。可以设置Markdown解析器的选项,例如代码高亮(
highlight)、表格、脚注等。 -
menus.en.toml: 这个文件定义了英文网站的导航菜单。可以在这里创建不同的菜单(如主菜单、页脚菜单),并指定每个菜单项的名称、URL、权重等。
-
module.toml: 这个文件用于配置Hugo Modules。用于管理主题、模块、依赖等。你可以在这里指定模块的路径、版本等信息,以便更好地组织和重用代码。
-
params.toml: 这个文件用于定义自定义的网站参数。这些参数不是Hugo内置的,而是由主题或自己定义的,可以在模板中通过
.Site.Params访问。
修改 config/_default/ 目录下的 hugo.toml ,将 theme = "blowfish" 注释取消
回到根目录,执行
hugo server
# 执行成功会有类似如下提示
# Built in 53 ms
# Environment: "development"
# Serving pages from disk
# Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
# Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
# Press Ctrl+C to stop
在浏览器打开地址 http://localhost:1313 ,就可以看到Blowfish主题的博客网站了。

五、配置 Blowfish 主题 #
详细配置请参考:Blowfish主题的官方文档
以下为博主的参考配置
5.1 基础配置 #
在config/_default/hugo.toml中添加或修改以下内容:
# 主题为 blowfish
theme = "blowfish"
# 你的博客域名
baseURL = "https://yourdomain.com/"
# 用来指定创作内容的主要语言,中文为"zh"
defaultContentLanguage = "zh"
5.2 语言和i18n #
在 config/_default/language.zh.toml 中配置对应语言配置。
博主配置如下:
disabled = false
languageCode = "zh"
languageName = "简体中文"
weight = 1
title = "陌白的个人博客"
[params]
displayName = "简体中文"
isoCode = "zh"
rtl = false
dateFormat = "2006-01-02 15:04:05"
# logo = "img/avatar.jpg"
# secondaryLogo = "img/secondary-logo.png"
description = "与君初相识,犹如故人归"
# copyright = "Copy, _right?_ :thinking_face:"
[params.author]
name = "陌白"
email = "mobai@10042021.xyz"
image = "img/avatar.jpg"
imageQuality = 96
headline = "与君初相识,犹如故人归"
bio = "一只热爱技术的码农"
links = [
{ envelope = "mailto:mobai@10042021.xyz" },
{ github = "https://github.com/greeeds" },
]
组件和静态资源的默认翻译在 i18n/zh.yaml 文件中,当然如果你想自定义,覆盖对应的文件即可。你也可以使用这种方法添加新的语言。
mkdir -p ./i18n
cp ./themes/blowfish/i18n/zh-CN.yaml ./i18n/zh.yaml
5.3 菜单配置 #
在 config/_default/menus.toml 中配置导航菜单。
[[main]]
name = "文章"
pageRef = "posts"
weight = 10
[[main]]
name = "分类"
pageRef = "categories"
weight = 20
[[main]]
name = "标签"
pageRef = "tags"
weight = 30
[[main]]
name = "关于"
url = "/about/"
weight = 100
5.4 参数配置 #
在 config/_default/params.toml 中配置参数。
# 主题颜色
colorScheme = "blowfish"
defaultAppearance = "light" # valid options: light or dark
autoSwitchAppearance = true
enableA11y = false
enableSearch = true
enableCodeCopy = false
giteaDefaultServer = "https://git.fsfe.org"
forgejoDefaultServer = "https://v11.next.forgejo.org"
[header]
layout = "basic" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur
[footer]
showMenu = true
showCopyright = true
showThemeAttribution = false
showAppearanceSwitcher = true
showScrollToTop = true
[homepage]
layout = "background" # valid options: page, profile, hero, card, background, custom
homepageImage = "img/homepage.png" # used in: hero, and card
showRecent = true
showRecentItems = 5
showMoreLink = false
showMoreLinkDest = "/posts/"
cardView = true
cardViewScreenWidth = false
layoutBackgroundBlur = false # only used when layout equals background
disableHeroImageFilter = false # only used when layout equals hero
[article]
showDate = true
showViews = false
showLikes = false
showDateOnlyInArticle = false
showDateUpdated = false
showAuthor = true
# showAuthorBottom = false
showHero = true
heroStyle = "basic" # valid options: basic, big, background, thumbAndBackground
layoutBackgroundBlur = true # only used when heroStyle equals background or thumbAndBackground
layoutBackgroundHeaderSpace = true # only used when heroStyle equals background
showBreadcrumbs = false
showDraftLabel = true
showEdit = false
# editURL = "https://github.com/username/repo/"
editAppendPath = true
seriesOpened = false
showHeadingAnchors = true
showPagination = true
invertPagination = false
showReadingTime = true
showTableOfContents = true
showRelatedContent = true
relatedContentLimit = 3
showTaxonomies = true # use showTaxonomies OR showCategoryOnly, not both
showCategoryOnly = false # use showTaxonomies OR showCategoryOnly, not both
showAuthorsBadges = false
showWordCount = true
showComments = true
# sharingLinks = [ "linkedin", "twitter", "bluesky", "mastodon", "reddit", "pinterest", "facebook", "email", "whatsapp", "telegram", "line"]
showZenMode = false
[list]
showHero = true
heroStyle = "basic" # valid options: basic, big, background, thumbAndBackground
layoutBackgroundBlur = true # only used when heroStyle equals background or thumbAndBackground
layoutBackgroundHeaderSpace = true # only used when heroStyle equals background
showBreadcrumbs = true
showSummary = true
showViews = false
showLikes = false
showTableOfContents = true
showCards = true
orderByWeight = false
groupByYear = true
cardView = false
cardViewScreenWidth = false
constrainItemsWidth = false
[sitemap]
excludedKinds = ["taxonomy", "term"]
[taxonomy]
showTermCount = true
showHero = false
# heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
showBreadcrumbs = false
showViews = false
showLikes = false
showTableOfContents = true
cardView = false
[term]
showHero = false
# heroStyle = "background" # valid options: basic, big, background, thumbAndBackground
showBreadcrumbs = false
showViews = false
showLikes = false
showTableOfContents = true
groupByYear = false
cardView = false
cardViewScreenWidth = false
[fathomAnalytics]
# site = "ABC12345"
# domain = "llama.yoursite.com"
[umamiAnalytics]
# websiteid = "ABC12345"
# domain = "llama.yoursite.com"
# dataDomains = "yoursite.com,yoursite2.com"
# scriptName = ""
# enableTrackEvent = true
[selineAnalytics]
# token = "XXXXXX"
# enableTrackEvent = true
[buymeacoffee]
# identifier = ""
# globalWidget = true
# globalWidgetMessage = "Hello"
# globalWidgetColor = "#FFDD00"
# globalWidgetPosition = "right"
[verification]
# google = ""
# bing = ""
# pinterest = ""
# yandex = ""
# fediverse = ""
[rssnext]
# feedId = ""
# userId = ""
[advertisement]
# adsense = ""
六、博客编写 #
现在,我们可以编写第一篇博客文章了。Hugo 使用 Markdown 格式来编写内容。执行如下命令:
hugo new posts/my-first-post.md
这会在 content/posts/ 目录下创建一个名为 my-first-post.md 的文件,并自动填充一些预设的 Front Matter(文章元数据)。
打开 content/posts/my-first-post.md 文件,你会看到类似以下内容:
---
title: "我的第一篇文章"
date: 2025-08-28T17:40:00+0800
draft: true # 注意:draft 为 true 的文章在默认情况下不会被发布
categories:
- 随笔
tags:
- 入门
---
这是我的第一篇 Hugo 博客文章!
欢迎来到我的新博客。
-
将
draft: true改为draft: false,这样文章才能在本地预览和最终部署时显示。 -
修改
title、date、categories、tags等元数据。 -
在
---之后开始编写你的 Markdown 内容。 -
详细的Front Matter可参考:Blowfish官方文档
在博客根目录(my-blog)下,重新运行 Hugo 的本地服务器命令:
hugo server
在浏览器中打开 http://localhost:1313/,就可以看到刚刚发布的文章了!每次修改内容或配置并保存后,浏览器会自动刷新,非常方便。
七、部署指南 #
当对本地预览满意后,就可以将静态网站部署到线上。Hugo 生成的网站是纯静态文件,因此可以部署到任何支持静态文件托管的服务上。
7.1 生成静态文件 #
在部署之前,需要生成最终的静态文件。在博客根目录运行:
hugo
这会在根目录(myblog)下生成一个 public/ 文件夹,其中包含了所有生成的 HTML、CSS、JavaScript 和图片等静态文件。这些就是我们需要部署到服务器上的文件。
7.2 部署选项 #
有多种免费或付费的部署方案可供选择:
GitHub Pages #
- 优点: 免费、与 Git 仓库集成、配置简单。
- 缺点: 部署速度可能稍慢,自定义域名需要额外配置。
- 流程: 将
public/目录的内容推送到 GitHub 仓库的gh-pages分支或主分支。
Netlify #
- 优点: 免费(有流量限制)、部署速度快、支持自定义域名、HTTPS、CI/CD 自动化部署。
- 流程: 连接你的 GitHub 仓库,Netlify 会自动检测 Hugo 项目并进行构建和部署。
Vercel #
- 优点: 免费(有流量限制)、部署速度快、支持自定义域名、HTTPS、CI/CD 自动化部署。
- 流程: 类似于 Netlify,连接 GitHub 仓库即可。
Cloudflare Pages #
- 优点: 免费、全球 CDN 加速、支持自定义域名、HTTPS、CI/CD 自动化部署。
- 流程: 连接 GitHub 仓库,Cloudflare Pages 会自动构建和部署。
博主选择的是Cloudflare Pages,通过将 public/ 目录的内容推送到博客仓库(my-blog)的 gh-pages 分支,在Cloudflare Pages连接该仓库的 gh-pages 分支,最后让 Cloudflare Pages 自动构建和部署。