重建的起因 #
在寒假我和朋友想到了一个桌游的方案(详见Github),在Rainyun买了一台一个月的香港便宜服务器,还在Namesilo买了一年的novaclash.cc域名。在这个学期刚开学第一周,在学校忽然觉得一个域名一台服务器就只是部署一套项目太浪费了,于是想着继续做Vibe Coding的创作,并且把这些项目还有建设过程投到博客上。又觉得旧的博客的handsome主题太重量,加载不够迅速,而且评论等功能比较冗余毕竟平时并没有多少人和我互动。于是在询问D指导之后我选取了Hugo框架+Blowfish主题的方案。
在这里我问了很多AI工具基本上是AI指导我一步步做的,以下所有D指导均意为Deepseek
Hugo+Blowfish介绍 #
Hugo 是一个用 Go 语言编写的静态网站生成器,构建速度快,模板灵活多样。它将 Markdown 格式的内容转换为完整的 HTML 网站,无需数据库,部署简单,非常适合搭建博客、文档站或个人作品集。
Blowfish 则是专为 Hugo 设计的一款现代、响应式主题。它内置了丰富的功能:多语言支持、暗色/亮色模式切换、灵活的配色方案、文章配图优化、SEO 友好等。通过模块化的配置文件,你可以轻松定制网站外观和行为,从导航菜单到文章页面的每一个细节,无需深入修改主题代码。
将 Hugo 与 Blowfish 结合,你可以获得一个既快速又美观的博客系统,同时拥有对内容的完全控制权——这正是我从笨重的 Typecho 转向这套技术栈的原因。
一套排除所有坑,完整能用的方案 #
在此声明本人使用的MacOS,所以以下教程都是基于MacOS,但是Windows和Linux(特别是Linux)配置思路应该大致相同,可以参考这个顺序进行。
安装Hugo并且新建站点 #
首先,通过brew安装hugo,如果没有brew可以考虑使用其他方案安装hugo
brew install hugo #通过brew安装hugo(mac)
hugo version #如果显示版本号则为安装成功在这里也需要注意Blowfish需要的是hugo的extended版本,在hugo version中要找一下有没有extended。
接下来,新建站点并且初始化git仓库(如果没有预先安装git,要先安装git)
hugo new site my-blog #将my-blog改为你想创建的目录名
cd my-blog #同上,将my-blog改为上面你设定好的目录
git init #初始化git仓库安装Blowfish并且配置Config #
我不太推荐使用官方CLI的方式下载并安装Blowfish因为速度比较慢而且可能因为时间较长而导致出现错误(详见下文),比较推荐使用Git子模块安装。
git submodule add https://github.com/nunocoracao/blowfish.git themes/blowfish #可以把blowfish原来的仓库改成你自己克隆的仓库或者通过镜像站进行加速
rm hugo.toml #删除hugo自己生成的config文件
mkdir -p config/_default #新建config/_default文件夹
cp -r themes/blowfish/config/_default/* config/_default/ #将blowfish主题中的配置文件放到config/_default文件夹中配置方法 #
在这里由于官方文档写的非常清晰而且引导很好,所以请点击这里直接跳转官方入门配置文档。对于某些具体的设置问AI能得到不错的答案,如果你觉得他给的方法复杂了不妨让他找找有没有Blowfish自带的方法来实现这一功能。
在这里需要特别注意要记得配置config/_default/hugo.toml 中的 baseURL 为你的最终域名,否则sitemap等等链接会是localhost。
创建和维护新文章,新页面 #
新建文章/页面 #
新建文章可以用hugo new content posts/文章名/index.md,新建页面则为hugo new content about/index.md。在这里要注意如果要创建的是单页,最后的文件名则为index.md,如果是一个列表页面(例如文章归档,分类页面)则文件名应当为_index.md。
插入图片 #
将图片放在文章同级目录下(例如 content/posts/一篇文章/photo.jpg),然后在 index.md 中用 Markdown 语法引用:
如果是多篇文章共用图片,可以放在 static/images/ 下,引用路径为 /images/photo.jpg。
预览和部署 #
在项目目录中:
在本地预览(包括草稿):hugo server -D
生成生产环境文件:hugo,在运行之后会在项目根目录中生成public文件夹,其中的内容就是生成完的网站静态文件。在这里千万要注意,hugo server也会生成public文件夹,但是其中的sitemap等内容的链接会是指向本地而不是baseUrl的所以不能直接使用于生产环境中,要先清理预览过程中的public文件夹,然后再hugo生成新的,再在生产环境中使用
过程中我遇到的坑 #
Hugo在PaperMod主题后报错 #
其实一开始我选择的不是Blowfish,纯粹略过觉得这个好看可以备选而不是首选。我的首选方案本是PaperMod主题,我在看到这个主题的第一眼就被吸引到了,挺喜欢这个极简主义的外观。但是在安装这个主题的时候Hugo却不停报错:can't evaluate field Author in type interface {},后来无论是通过换config格式,调试config等等都没有找出来问题在哪里,而且PaperMod的中文文档比较少难以找到参考资料,只能靠D指导一点点指导我debug和分析。在浪费了差不多三个小时之后我碎了,只能放弃PaperMod主题,转而到Blowfish主题了。
通过一般方式装Blowfish速度慢并且可能报错 #
在查看Github中Blowfish官方中文文档的时候,推荐的安装方式是npm i -g blowfish-tools,再使用CLI工具进行配置,但是因为国内访问速度慢并且Blowfish项目本来就比较庞大,下载时间长,所以在执行下载的时候可能会卡退。因此我后面采用了Git子模块安装的方式,也就是
cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish并且克隆了仓库到自己的Gitee帐号上,用自己仓库的git地址替换其中的blowfish原仓库以取得加速。
日期配置一定要是2006年1月2日 #
因为 Hugo 使用 Go 语言的参考时间格式,2006-01-02 是固定的参考日期,不能换成其他日期,所以在languages.zh-cn.toml页面中的dateFormat字段中填写的时间一定要是2006年1月2日,无论你采用的是哪一种日期的显示方式,不能是其他日期。
文盲误理解config配置部分 #
在配置config的部分,官方要求的是将config文件删掉,然后从主题中复制 *.toml 文件,粘贴到 config/_default/ 目录中。但是我一开始琢磨了很久到底怎么找到所有toml文件复制呢?最后发现其实意思就是在themes/blowfish/config/_default这里,只需要删除Hugo生成的时候在根目录下面的config文件,然后把整个themes/blowfish中的config目录复制到根目录下面就可以了。
顺带一提,在进一步配置Blowfish的过程中就没有那么痛苦了,只要撑过了基础配置的部分,后面基本上问D指导都能得到完美答复。如果英文水平不错,也可以使用官方的CLI工具帮助配置,这样就可以免受手写配置文件的困扰了。
总结 #
以上就是这次重新配置Hugo+Blowfish博客的过程,希望能帮到你或者给予一些启发!如果发现文章有什么问题或者描述不清晰的地方,请通过首页中的联系方式联系我,感激不尽!