Hugo 博客搭建 - 这篇文章属于一个选集。

Part 1: 本文

Part 2: 博客上线了但搜不到？把你的站点提交到 Google 和 Bing，让搜索引擎收录

⚠️ 本文涉及多处需要访问 GitHub 和 Cloudflare 的操作，提前确保网络通畅。

搭这个博客之前我的需求就三条：不要服务器、不要钱、能绑自己域名。Hugo + Cloudflare Pages 刚好全满足——Hugo 在本地生成静态页面，源码扔 GitHub，Cloudflare Pages 自动拉取部署，全程零费用。这篇文章是我当时一步步的记录，从 Git 安装一直写到域名绑定。

准备阶段
#

工欲善其事，先利其器。我们需要准备好四样东西：Git、GitHub 账号、Cloudflare 账号 + 域名，以及 Hugo。

Git 下载与安装
#

Git 下载

也可以点击右上角按钮，从网盘分享页获取。

安装过程一路「下一步」即可，无需特殊配置。安装完成后打开任意终端，输入 git --version 验证是否安装成功。

GitHub 账号
#

GitHub 注册

博客的源码需要托管在 GitHub 上，Cloudflare Pages 会从这里自动拉取并部署。

Cloudflare 账号 + 域名
#

购买域名
#

推荐几个靠谱的域名注册商：Spaceship、Namecheap、Namesilo、Cloudflare Registrar。选哪家都行，挑个喜欢的域名买下即可。

注册 Cloudflare
#

有邮箱就能注册，甚至用 GitHub 账号直接登录也行。

Hugo 下载与安装
#

前往 Hugo Releases 下载对应平台的 extended 版本。以 Windows 为例，下载类似 hugo_extended_0.157.0_windows-amd64.zip 的文件。

也可以点击右上角网盘获取。

解压后配置环境变量（将 Hugo 所在目录加入 PATH），然后在你想要创建博客的位置打开 CMD：

举例：想在 D:\github\blog 创建博客项目：

cd D:\github
hugo new site blog

创建成功后，删除项目根目录下自动生成的 hugo.toml 文件（后续会用 BlowFish 主题的配置替代）。

主题配置
#

到 BlowFish Releases 下载主题 zip 包（右上角网盘同样可获取）
解压到 D:\github\blog\theme 目录下
将解压后的文件夹重命名为 blowfish
将主题自带的 config 文件夹复制到项目根目录（D:\github\blog\），这是后续所有配置的基础

本地设计阶段
#

从现在开始，你可以在项目根目录执行 hugo server -D，在浏览器访问 localhost:1313/ 实时预览博客效果，边调边看。

config/_default 文件配置
#

hugo.toml — 三个关键修改
#

1. 配置域名

baseURL = "https://你的域名.com/"

2. 切换语言

defaultContentLanguage = "zh-cn"
hasCJKLanguage = true  # 中日韩语言必加，优化分词和摘要

然后将 config/_default 中所有 .en.toml 结尾的文件重命名为 .zh-cn.toml：

languages.en.toml → languages.zh-cn.toml
menus.en.toml    → menus.zh-cn.toml

3. 指定主题

theme = "blowfish"

以上三项为核心配置，其余保持默认即可，后续可按需微调。

languages.zh-cn.toml — 站点信息与作者配置
#

以下是本站的完整配置作为参考，对照着正在浏览的博客页面，你能很快理解每一项对应的位置：

disabled = false
languageCode = "zh-cn"
languageName = "简体中文"
weight = 1
title = "我的博客"  # 浏览器标签栏显示的标题

[params]
  displayName = "简体中文"
  isoCode = "zh-cn"
  rtl = false
  dateFormat = "2006-01-02"
  logo = "img/logo.png"
  description = "我的博客描述"
  copyright = "©2026 允许转载，请注明出处"  # 看页面底部

[params.author]
  name = "你的名字"
  email = "you@example.com"
  image = "img/avatar.png"  # 将头像放入 /assets/img/avatar.png
  headline = "你的签名"  # 首页个人签名

links 配置用于展示联系方式，例如：

  links = [
    { email = "mailto:you@example.com" },
    { bilibili = "https://space.bilibili.com/你的B站ID"},
    # BlowFish 未内置 B 站图标，需要自行将 bilibili.svg 放入 /assets/icons/
    # 默认被注释掉的 links 通常都有内置图标，没有的话就需要自己准备 SVG
    { github = "https://github.com/你的用户名" },
  ]

menus.zh-cn.toml — 导航菜单
#

这部分控制页面头部和底部的导航图标。详细说明见 Menus 官方文档。

一个简单示例：

[[main]]                          # main = 头部导航，footer = 底部导航
  identifier = "tech"             # 不设置 name，纯图标无文字
  pre = "code"                    # BlowFish 内置图标名，也可用自己的 SVG
  url = "/tech/"                  # 对应 /content/tech/ 下的文章
  weight = 10                     # 数字越小越靠前
  title = "技术博客"               # 鼠标悬浮提示文字

params.toml — 主题参数
#

这部分配置项较多，建议直接查阅 BlowFish 官方文档按需调整。保持默认也能正常使用，不是必须修改项。

content 等剩余文件配置
#

content — 文章目录结构
#

首先创建 /content/_index.md，这是内容区首页：

+++
title = '技术博客'
layout = 'list'
description = '技术博客'
+++

分享编程、框架、性能优化等技术内容

根据 menus 中配置的 url 创建对应文件夹。比如上文配置了 url = "/tech/"，就需要创建 /content/tech/_index.md，内容和上面类似。

归档页面的创建
#

按以下三步为博客添加文章归档功能：

第一步：在 /config/_default/menus.zh-cn.toml 中添加菜单项：

[[footer]]                        # 放头部用 [[main]]
  identifier = "archives"
  pre = "box"
  url = "/archives/"
  weight = 10
  title = "文章归档"

第二步：创建 /content/archives/_index.md：

+++
title = '归档'
layout = 'archive'
groupByYear = true
showSummary = true
+++

第三步：创建 /layouts/_default/archive.html 模板文件：

{{ define "main" }}
<header>
    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
        {{ .Title }}
    </h1>
</header>

<section class="mt-8">
    {{ $pages := where .Site.RegularPages "Section" "!=" "" }}
    
    {{ range $pages.GroupByDate "2006" }}
    <div class="archives-year-group mb-12">
        <h2 class="mb-6 text-3xl font-bold border-b-2 border-primary-500 pb-2 text-neutral-800 dark:text-neutral-200">
            {{ .Key }} 年
        </h2>

        {{ range .Pages.GroupByDate "01" }}
        <div class="archives-month-group ml-4 mb-8">
            <h3 class="flex items-center mb-4 text-xl font-semibold text-neutral-700 dark:text-neutral-300">
                <span class="mr-2 text-primary-600">●</span>
                {{ .Key }} 月
            </h3>
            
            <div class="space-y-4 ml-6 border-l border-neutral-200 dark:border-neutral-700 pl-4">
                {{ range .Pages }}
                <div class="flex items-center group">
                    <span class="text-sm text-neutral-500 dark:text-neutral-400 w-16 flex-none font-mono">
                        {{ .Date.Format "01-02" }}
                    </span>
                    
                    <a class="text-lg text-neutral-800 dark:text-neutral-200 decoration-primary-500 hover:text-primary-600 dark:hover:text-primary-400 hover:underline underline-offset-4 transition-all duration-300" 
                       href="{{ .RelPermalink }}">
                        {{ .Title }}
                    </a>
                </div>
                {{ end }}
            </div>
        </div>
        {{ end }}
    </div>
    {{ end }}
</section>
{{ end }}

资源文件：头像、Logo、自定义图标
#

/assets/img/ — 存放头像（avatar.png）、Logo 等图片文件。

/assets/icons/ — 存放自定义 SVG 图标（如 bilibili.svg）。

关于 SVG 图标的获取与修改：

先确认 BlowFish 是否内置了该图标 → 内置图标预览
没有的话去 FontAwesome 6 下载免费 SVG
下载后做两处修改（以 bilibili.svg 为例）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M552.6 168.1C569.3 ..."/></svg>

在 <path 后添加 fill="currentColor" → <path fill="currentColor" d="..."
调整 viewBox 裁剪尺寸，比如 viewBox="0 0 640 640" 改为 viewBox="70 70 500 500"（计算方式：(640-500)/2 = 70，保持对称）

GitHub 配置阶段
#

创建仓库并上传代码
#

点击 GitHub 首页左侧绿色的 New 按钮创建新仓库：

Repository name：给项目命个名
建议将 Choose visibility 设为 Private（私密仓库，源码不公开）
点击 Create repository 完成创建

如果你还不熟悉 Git 操作，下面是一步一步的指南 👇

.gitignore 文件
#

先在项目根目录创建 .gitignore 文件（⚠️ 无后缀名，不是 .txt 文件）：

public/
resources/
.hugo_build.lock
.DS_Store
Thumbs.db
ehthumbs.db
Desktop.ini
$RECYCLE.BIN/
.idea/
.vscode/
*.swp
*.swo
*~
node_modules/
*.log
*.tmp
*.temp

推送代码到 GitHub
#

在项目根目录打开 Git Bash，依次执行：

# 1. 初始化本地仓库
git init

# 2. 切换到 main 分支（GitHub 规范）
git branch -M main

# 3. 配置身份信息
git config --local user.name "你的用户名"
git config --local user.email "你的邮箱"

# 4. 将所有文件加入暂存区
git add .

# 5. 提交到本地仓库
git commit -m "first commit"

# 6. 关联远程仓库（复制 GitHub 仓库页面提示的那行命令，每人地址不同）
git remote add origin https://github.com/你的用户名/仓库名.git

# 7. 推送到 GitHub
git push -u origin main

💡 Git Bash 不支持 Ctrl+V 粘贴，用右键粘贴或 Shift+Insert。
首次推送会弹出 GitHub 登录验证，通过后凭证会自动保存在 Windows 中。如果管理多个账号，后续可以配置 SSH 方案。
⚠️ 推送过程可能需要稳定的网络环境（你懂的）。

刷新 GitHub 页面，就能看到你的代码已经躺在那儿了。

Cloudflare Pages 配置阶段
#

域名迁移到 Cloudflare
#

在 Cloudflare 后台添加你购买的域名，系统会自动扫描现有 DNS 记录。扫描完毕后，Cloudflare 会分配两个名称服务器（Nameserver），拿着这俩地址去你的域名注册商后台，把原来的名称服务器替换掉。之后域名管理就全在 Cloudflare 了，注册商那边只需按时续费即可。网络上有大量详细教程，这里不展开。

连接 GitHub 并部署
#

Cloudflare 首页 → 右侧 Compute → Workers 和 Pages → 点击 创建应用程序
页面上会出现一堆 Workers 选项，不要选任何方框内的东西，直接往下翻，点击 Pages 按钮
选择 连接到 Git → 授权登录 GitHub → 选择存放博客源码的仓库

构建设置
#

配置项	值
框架预设	Hugo
构建命令	`hugo`（或 `hugo --gc --minify` 开启压缩优化）
输出目录	`public`（不要写成 `/public`，前面的 `/` 已经有了）

框架预设选 Hugo 后，构建命令和输出目录会自动填入。但环境变量不会自动生成，下面是关键步骤 👇

添加环境变量（重要！）
#

1. 确定 Hugo 版本：在本地终端运行：

hugo version

输出示例：

hugo v0.156.0-9d914726dee87b0e8e3d7890d660221bde372eec+extended windows/amd64 ...

提取版本号添加为环境变量：

变量名	值
`HUGO_VERSION`	`0.156.0`
`HUGO_EXTENDED`	`true`
`HUGO_ENABLEGITINFO`	`true`

💡 如果你用的是 Git 子模块方式引入主题，还需要加： BUILD_FLAGS = --recurse-submodules

部署并绑定域名
#

点击 保存并部署，等待构建完成。然后进入部署好的项目 → 自定义域，填入你的域名（需与 hugo.toml 中 baseURL 一致）。等待 DNS 生效后，你的博客就通过自定义域名正式上线了 🎉

以后每次更新博客，只需在项目根目录执行三连：

git add .
git commit -m "更新内容描述"
git push

Cloudflare Pages 会自动检测推送并重新部署。

结语
#

如果你一路看到了这里，说明我的第一篇博客已经开始帮到别人了——这正是我写博客的初衷。

从 Git 安装到域名绑定，整个流程看似繁琐，但一步步走下来，你会发现其实并没有什么高深的门槛。搭建自己的博客，不只是拥有一个写字的角落，更是对互联网「去中心化」精神的一次小小实践。

博客上线只是第一步——没人看等于白搭。接下来这篇教你把站点提交到 Google 和 Bing，让搜索引擎开始给你带流量。

感谢你的阅读，欢迎常来逛逛 🏠

Hugo 博客搭建 - 这篇文章属于一个选集。

Part 1: 本文

Part 2: 博客上线了但搜不到？把你的站点提交到 Google 和 Bing，让搜索引擎收录

准备阶段#

Git 下载与安装#

GitHub 账号#

Cloudflare 账号 + 域名#

购买域名#

注册 Cloudflare#

Hugo 下载与安装#

主题配置#

本地设计阶段#

config/_default 文件配置#

hugo.toml — 三个关键修改#

languages.zh-cn.toml — 站点信息与作者配置#

menus.zh-cn.toml — 导航菜单#

params.toml — 主题参数#

content 等剩余文件配置#

content — 文章目录结构#

归档页面的创建#

资源文件：头像、Logo、自定义图标#

GitHub 配置阶段#

创建仓库并上传代码#

.gitignore 文件#

推送代码到 GitHub#

Cloudflare Pages 配置阶段#

域名迁移到 Cloudflare#

连接 GitHub 并部署#

构建设置#

添加环境变量（重要！）#

部署并绑定域名#

结语#