跳过正文

Hugo&Blowfish博客搭建入坑

·1267 字·6 分钟
陌白
作者
陌白
一只热爱技术的码农
目录

一、Hugo 简介
#

Hugo 是一个用 Go 语言编写的静态网站生成器,以其极快的构建速度和灵活性而闻名。它非常适合搭建个人博客、文档网站、作品集等。

主要特点:

  1. 极速构建: Hugo 的构建速度非常快,可以在几毫秒内生成数千页的网站,这对于大型网站尤其有利。
  2. 简单易用: 尽管功能强大,但Hugo的学习曲线相对平缓。它使用Markdown格式编写内容,易于上手。
  3. 高度可配置: Hugo 提供了丰富的配置选项,允许用户根据自己的需求定制网站的各个方面,包括主题、菜单、分类、标签等。
  4. 跨平台: Hugo 可以在macOS、Windows、Linux等多种操作系统上运行。
  5. 无需数据库: 静态网站的特性意味着它不需要数据库,这简化了部署和维护,并提高了安全性。
  6. 丰富的社区和主题: Hugo拥有一个活跃的社区,并提供了大量高质量的开源主题供用户选择。

官方网站:https://gohugo.io/

二、Blowfish 主题
#

Blowfish 是一个为 Hugo 设计的现代化、功能丰富且高度可定制的主题。它旨在提供一个美观、响应迅速且用户体验良好的博客平台。

主要特点:

  1. 现代化设计: Blowfish 拥有简洁、优雅的现代设计,注重内容呈现,提供出色的阅读体验。
  2. 响应式布局: 主题完全响应式,无论用户使用桌面电脑、平板还是手机访问,网站都能良好地适应屏幕尺寸。
  3. 高度可定制: Blowfish 提供了广泛的定制选项,包括颜色、字体、布局、组件等,用户可以轻松调整以匹配个人品牌。
  4. 多语言支持: 主题内置了多语言支持,方便创建多语言网站。
  5. SEO 友好: 针对搜索引擎优化进行了设计,有助于提高网站在搜索结果中的排名。
  6. 丰富的内置功能:
    • 深色模式/浅色模式: 支持一键切换主题颜色模式。
    • 代码高亮: 内置了代码高亮功能,方便展示代码片段。
    • 评论系统集成: 支持多种评论系统(如Disqus, Giscus等)的集成。
    • 分析工具集成: 方便集成Google Analytics等网站分析工具。
    • 社交媒体链接: 轻松添加社交媒体链接。
    • 图片优化: 支持响应式图片和懒加载。
  7. 活跃的开发和社区: Blowfish 主题持续更新,并有一个活跃的社区提供支持。

官方网站:https://blowfish.page/zh-cn/

三、环境准备
#

3.1 Git
#

  • 用途: 用于从 GitHub 等代码托管平台克隆 Hugo 主题(如 Blowfish)以及管理自己的博客内容。
  • 安装: 您可以从 Git 官方网站下载并安装适合您操作系统的版本:下载地址

3.2 Hugo
#

  • 用途: Hugo 是核心的静态网站生成器,用于将 Markdown 内容和主题文件编译成静态 HTML 网站。
  • 安装: 可参考官方安装文档
    • macOS: 推荐使用 Homebrew 进行安装:brew install hugo
    • Windows: 可以通过 Scoop、Chocolatey 或直接下载二进制文件进行安装。
    • Linux: 可以通过包管理器(如 aptyum)或直接下载二进制文件进行安装。
  • 验证: 安装完成后,您可以在命令行中运行 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主题。一个主题通常包含 layoutsstaticarchetypesassets 等目录,它定义了网站的外观和基本结构。

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 目录下。

方式二:直接下载
#

  1. 访问 Blowfish 主题的 GitHub 仓库
  2. 点击 “Code” 按钮,选择 “Download ZIP” 下载主题压缩包。
  3. 将下载的压缩包解压,并将解压后的文件夹重命名为 blowfish
  4. 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主题的博客网站了。

image-20251030112716781

五、配置 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 文件中,当然如果你想自定义,覆盖对应的文件即可。你也可以使用这种方法添加新的语言。

注意: 如果i18n目录下无对应语言的配置文件,请务必从主题目录下的i18n目录中复制该语言配置文件到自己博客。
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,这样文章才能在本地预览和最终部署时显示。

  • 修改 titledatecategoriestags 等元数据。

  • --- 之后开始编写你的 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 自动构建和部署。

相关文章