注意：配置全篇可能都需要魔法上网方案，除非您处在一个较好的网络下

本人主要是想要在自己的域名上部署博客，因此通过CloudFlare Page的方式部署，故这篇博客对于这种部署方式的人食用最佳，当然还有像Github Page部署等其他方式，故本篇博客会有出入，但是部分内容还是具有参考意义的

准备阶段
#

Git下载安装
#

Git下载

或者通过右上角的网盘链接下载

安装时只要一直点击下一步就行

GitHub账号
#

GitHub注册地址

首先需要一个GitHub账号来托管你的博客文件

CloudFlare账号注册与域名购买
#

购买域名
#

可以到Spaceship,Namecheap,Namesilo,Cloudflare等域名注册商处注册一个自己的域名

SpaceShip域名注册商

注册一个Cloudflare账号
#

额，这一部分不必我多讲，只要有邮箱就行，甚至你只要注册了GitHub

Hugo下载安装
#

在Hugo下载页面按照电脑版本下载Hugo文件，要求下载extended版本，例如Windows就下载hugo_extended_0.157.0_windows-amd64.zip版本

或者通过右上角的网盘来下载

解压该文件夹并配置环境变量

打开你想要放置本地博客的路径，到该路径下打开CMD，输入hugo new site 文件夹名

举例：我想在D:\github路径下放置名为blog的博客文件夹

1.首先在CMD中打到D:\github路径

2.输入

hugo new site blog

创建hugo文件夹blog

3.删除hugo.toml文件

主题配置
#

1.到BlowFish主题下载处下载zip主题文件

还是那句话，右上角也是可以的

2.解压缩这个主题文件到D:\github\blog\theme路径下

3.重命名该文件夹为blowfish

4.将该文件夹下的config文件夹复制并粘贴到项目根文件夹，即复制D:\github\blog\theme\config文件夹到D:\github\blog文件夹下

本地设计阶段
#

config->_default文件配置
#

hugo.toml
#

1.首先将baseURL修正到你想要部署的域名
例如：baseURL = "https://blog.arguo.org/"

2.将默认语言区改为你想要的语言
例如：defaultContentLanguage = "zh-cn"

如果语言为中日韩之一，记得在hugo.toml文件下 （即本文件下） 配置hasCJKLanguage = true

接着，将 config/_default 文件夹中所有以.语言名.toml结尾的文件重命名，例如：

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

3.将主题改为theme文件夹下的同名主题例如：theme = "blowfish"

现在您可以在博客项目的根文件下的CMD中执行hugo server -D在本地浏览器的1313端口（浏览器地址栏输入localhost:1313/）去预览您的博客了，并在接下来的配置中实时观察博客变化进行调整

以上三点为主要三点，剩余部分保持默认即可，也可根据自身需求自行修改

language.语言名.toml
#

1.可以在这里看看我的全局配置与[params]配置

disabled = false
languageCode = "zh-cn" #语言配置
languageName = "简体中文" #语言配置
weight = 1
title = "Arguo's Blog" #博客名

[params]
  displayName = "简体中文" #语言配置
  isoCode = "zh-cn" #语言配置
  rtl = false
  dateFormat = "2006-01-02"
  logo = "img/logo.png"
  description = "Arguo的博客"
  copyright = "©2026 允许转载，请注明出处" #可以看看这篇文章的底部

[params.author]
  name = "Arguo" #作者姓名
  email = "blog@arguo.org" #作者邮箱
  image = "img/avatar.png" #作者头像，这个配置意味着您要在`/asset/img`路径下放置一个名为avatar.png的文件来作为您的头像
  headline = "在繁华中自律，在落魄中自愈" #在首页就能看到

我的配置仅供参考，具体以您的配置计划为准

对照您现在正在浏览的我的博客网页，应该就能明白他们的对应地方了

2.还有links配置主要是针对联系方式的，例如我的配置为

  links = [
    { email = "mailto:blog@arguo.org" },
    { bilibili = "https://space.bilibili.com/3546918997198925"},
    #目前blowfish并未集成类似bilibili的图标，因此你需要在/assets/icon路径下放置bilibili的svg图标
    #一般默认被注释的links都有图标，如果默认的没有，就需要自己配置图标了
    { github = "https://github.com/arguo-mora" },
  ]

menus.语言名.toml
#

这里主要是针对页面菜单配置的，可以看一下menus的官方文档对于这一部分的解释

我就简单举个例子

[[main]] #意思是放置在网站头部，如果是footer就是尾部
identifier = "tech" #此处我没有用name，就能单独有一个图标而没有文字
pre = "code"
#这是blowfish图标集中的一个，也可以自己加.svg文件，像我的实用工具栏目就是自己加的svg
url = "/tech/" # 表示是/content/tech/路径下的文章，用pageRef更规范点，但是好像我的有bug，url也可以
weight = 10 #权重，表示该图标的先后顺序，数字越小，图标越前
title= "技术博客" #鼠标停留在该图标上试试看

params.toml
#

这里太冗余了，看官方文档去调吧blowfish官方文档

这里主要是自定义部分，不调其实也可以

content等剩余文件配置
#

content文件
#

1.首先创建/content/_index.md文件

内容举例

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

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

2.根据menus配置文件进行配置文件夹例如我在上文配置了技术博客栏目，url为/tech/

就要在content文件夹中创建tech文件夹，在其下创建_index.md文件

/content/tech/_index.md内容举例

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

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

归档的创建
#

我的归档创建方案是这样的：

1.在/config/_default/menus.zh-cn.toml文件下创建

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

2.再创建/content/archives/_index.md并在该文件下

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

3.创建/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 }}

其他文件
#

/assets/img存放头像,logo等

/assets/icons存放类似bilibili.svg等svg文件，我上文提到的我的实用工具对应的文件也在其中

提一嘴svg文件的获取与改动，
首先如何确定blowfish是否内置了该图标，可以看这个链接去了解，如果这个链接内有，就说明内置了。
没有的可以去官方推荐的FontAwesome_6下载免费部分的svg文件然后进行修改
修改举例：
这是我们获取到的bilibili-brands-solid-full.svg文件,为了简单，可以将其改名为bilibili.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M552.6 168.1C569.3 186.2 577 207.8 575.9 233.8L575.9 436.2C575.5 462.6 566.7 484.3 549.4 501.3C532.2 518.3 510.3 527.2 483.9 528L156 528C129.6 527.2 107.8 518.2 90.7 500.8C73.6 483.4 64.7 460.5 64 432.2L64 233.8C64.8 207.8 73.7 186.2 90.7 168.1C107.8 151.8 129.5 142.8 156 142L185.4 142L160 116.2C154.3 110.5 151.4 103.2 151.4 94.4C151.4 85.6 154.3 78.3 160 72.6C165.7 66.9 173 64 181.9 64C190.8 64 198 66.9 203.8 72.6L277.1 142L365.1 142L439.6 72.6C445.7 66.9 453.2 64 462 64C470.8 64 478.1 66.9 483.9 72.6C489.6 78.3 492.5 85.6 492.5 94.4C492.5 103.2 489.6 110.5 483.9 116.2L458.6 142L487.9 142C514.3 142.8 535.9 151.8 552.6 168.1zM513.8 237.8C513.4 228.2 510.1 220.4 503.1 214.3C497.9 208.2 489.1 204.9 480.4 204.5L160 204.5C150.4 204.9 142.6 208.2 136.4 214.3C130.3 220.4 127 228.2 126.6 237.8L126.6 432.2C126.6 441.4 129.9 449.2 136.4 455.7C142.9 462.2 150.8 465.5 160 465.5L480.4 465.5C489.6 465.5 497.4 462.2 503.7 455.7C510 449.2 513.4 441.4 513.8 432.2L513.8 237.8zM249.5 280.5C255.8 286.8 259.2 294.6 259.6 303.7L259.6 337C259.2 346.2 255.9 353.9 249.8 360.2C243.6 366.5 235.8 369.7 226.2 369.7C216.6 369.7 208.7 366.5 202.6 360.2C196.5 353.9 193.2 346.2 192.8 337L192.8 303.7C193.2 294.6 196.6 286.8 202.9 280.5C209.2 274.2 216.1 270.9 226.2 270.5C235.4 270.9 243.2 274.2 249.5 280.5zM441 280.5C447.3 286.8 450.7 294.6 451.1 303.7L451.1 337C450.7 346.2 447.4 353.9 441.3 360.2C435.2 366.5 427.3 369.7 417.7 369.7C408.1 369.7 400.3 366.5 394.1 360.2C387.1 353.9 384.7 346.2 384.4 337L384.4 303.7C384.7 294.6 388.1 286.8 394.4 280.5C400.7 274.2 408.5 270.9 417.7 270.5C426.9 270.9 434.7 274.2 441 280.5z"/></svg>

对于这个文件，我们只需要将其path部分进行修改就行，找到第二个尖括号这里Fonticons, Inc.-->这里这里<path d="M552.6 168.1C569.3，在path后，d前面添加fill="currentColor"，变成Fonticons, Inc.--><path fill="currentColor" d="M552.6 168.1C569.3

还有大小问题，通过前面的viewBox进行调整，但要注意对称问题，例如viewBox="0 0 640 640"可以换成viewBox="70 70 500 500"这里的70的计算方式为(640-500)/2=70，其余尺寸同理

GitHub配置阶段
#

建库并上传主文件
#

点击Github主页左侧的绿色的new

在Repository name*栏目里为该项目起个名，可以将choose visibility改为Private来确保别人看不到源码 （不管也行，毕竟那么无聊的人很少见）

点击下面的绿色的create repository按钮，库就建完了，此时你跳转到一个干净的库的界面，此时你就看到了页面底部的操作帮助（可以与咱们下面的步骤进行对比分析）

目前看到这里的人应该都是还没有实操过GitHub，那么咱们一步一步来

.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

正式开始
#

1.首先在项目根文件下打开git bash

2.初始化仓库

git init

3.切换默认分支（符合GitHub规范）

git branch -M main

4.设置身份

git config --local user.name "你的用户名"
git config --local user.email "你的邮箱"

5.加入暂存区

git add .

6.提交到本地仓库

git commit -m "first commit"

7.连接远程仓库

找到github仓库界面操作帮助界面的git remote add···这一行复制进去（每个人的仓库地址不一样，恕我无法将命令打出来），或者手打进去（git bash不支持Ctrl+V哦）

可能会弹出登录验证界面，正常登录验证就行，第一次后会存进Windows的登录凭证中去，以后就不用输入了（后续可自行配置ssh方案登录，该方案适合管理多账户）

8.推送到GitHub上去

git push -u origin main

此时你可以刷新一下Web界面，就可以看到你已经推上去的文件了

再次强调，这里可能需要魔法否则可能推不上去

CloudFlare配置阶段
#

在Cloudflare里添加你在其他域名商买的域名，他会扫描，扫描完后它会给你两个名称服务器，拿这两个名称服务器换掉你的原来的域名商处后台的名称服务器，以后你的域名管理就都在这里了，只要到购买商处按时缴费就行，这一部分我不展开，网络上有大把的教程。

链接github账号
#

1.打开首页右侧边栏的Compute->Workers和Pages，点击右上角蓝色的创建应用程序，他会给你一堆Workers的选项，这时我们不要点击方框内的任何东西，只要点击方框下面的Pages按钮就行（第一次写博客，没有拍照，也没有记下准确的名称，但位置和关键字是定的，你只要记住关键字里有Pages就成）

2.进入后选择连接到Git，批准登录github账号，然后选择自己新建的放置博客源码的仓库

配置Cloudflare
#

框架预设选Hugo
构建命令选择默认的hugo,或者可以优化为hugo --gc --minify
输出目录选择/public，/是Cloudflare原本就有的，千万别输进去了
重点刚才的构建命令和输出目录其实我们不难发现当我们框架预设选择完毕后就默认生成了，但接下来的这个部分没有默认生成哦

选择添加环境变量
#

1.我们先在本地终端测试一下Hugo版本

hugo version

比如我生成的是

hugo v0.156.0-9d914726dee87b0e8e3d7890d660221bde372eec+extended windows/amd64 BuildDate=2026-02-18T16:39:55Z VendorInfo=gohugoio

于是我在环境变量中添加了

变量名->HUGO_VERSION
值->0.156.0

2.环境变量剩余部分

变量名->HUGO_EXTENDED
值->true

变量名->HUGO_ENABLEGITINFO
值->true

3.顺道说一嘴，我的教程是手动配置的教程，如果您是Git子模块的配置方案，可能需要

环境变量->BUILD_FLAGS
值->--recurse-submodules

部署
#

现在您可以点击保存并部署的蓝色按钮，等待一会，直到其为您部署完毕

绑定域名
#

部署完成后，点击添加自定义域,将您规划好的域名配给它 （要保持与hugo.toml的baseURL项目相同），等待其域名配置完成，您就可以通过您的自定义域名访问您的博客了，后续如果想要推送博客的话，只需在项目根目录下执行

git add .
git commit -m "您的修改注释"
git push

结语
#

如果你看到这里，就说明我的博客已经开始帮助别人了，这是我的第一篇博客，感谢您的欣赏

准备阶段#

Git下载安装#

GitHub账号#

CloudFlare账号注册与域名购买#

购买域名#

注册一个Cloudflare账号#

Hugo下载安装#

主题配置#

本地设计阶段#

config->_default文件配置#

hugo.toml#

language.语言名.toml#

menus.语言名.toml#

params.toml#

content等剩余文件配置#

content文件#

归档的创建#

其他文件#

GitHub配置阶段#

建库并上传主文件#

.gitignore文件#

正式开始#

CloudFlare配置阶段#

链接github账号#

配置Cloudflare#

选择添加环境变量#

部署#

绑定域名#

结语#