下面是笔者在搭建这个网站过程的一个记录,包括一个本地的部署以及对coder模版的一个个性化探索

前提条件 链接到标题

首先,你必须要有一个github的账号,且在本地下载好git!

创建github账号 链接到标题

可以参考这篇文章

下载git 链接到标题

参考 这篇文章,下载之后多个命令行都可以使用,不过笔者还是倾向于用window自带的终端运行

基本配置 链接到标题

配置环境 链接到标题

首先,我们需要下载 Hugo 并配置相关环境变量。具体步骤可以参考这篇文章。完成后,确保在终端中运行 hugo version 时没有报错。 这里建议都安装hugo的extend版本,也即hugo官网里的

hugo_extended_0.144.0_windows-amd64.zip

我昨天就是卡在了这里,一直没有看到网站的效果。今天(2025.2.15)发现原因就是因为没有安装extend版本。

配置主题 链接到标题

接着在安装好了hugo的地方使用hugo new site <你的本地博客文件夹名称>创建自己的网站根目录文件夹,我选择了 hugo-coder 主题。不过在抓取仓库时遇到了一些问题。运行仓库抓取命令时出现报错,询问 AI 后得知需要先初始化本地仓库。为此,我们需要运行:

git init

接着,运行以下命令来抓取主题仓库:

git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

运行 git submodule add 命令后,Hugo 会将 hugo-coder 主题添加到你的项目中的 themes 文件夹下。 然后运行命令

hugo server

就能看到自己网站的效果了。关于如何将其部署到githubpage上,请看我另外的教程。

个性化模版网站 链接到标题

Coder 这个模板真的很漂亮,我决定进一步摸索一下如何将它个性化。

在下面的过程中建议大家都先试用hugo server命令一路开着本地预览的网站,方便看到更改的实施效果

首先,我将 exampleSite 目录中的文件直接复制到网站根目录,覆盖掉现有文件。通过这些步骤,我们可以顺利地完成 Hugo 网站的搭建和 Coder 模板的本地化设置。接下来,我会继续个性化设计,调整网站内容以符合自己的需求。

更改语言 链接到标题

大部分更改都集中在 hugo.toml 文件中,因此建议在开始之前安装 Even Better TOML 插件,这样会更方便查看和修改。

首先要修改的就是语言配置。hugo-coder 模板默认使用葡萄牙语和英文双语,而我希望使用中文。具体步骤如下:

修改英文名 链接到标题

config.toml 中搜索 John DoeFull Stack DevOpsMagician,分别是模板中的三行示例文本。将它们改成你想要的英文名(例如 Tsui)以及简短介绍。

修改中文名 链接到标题

同样搜索 João NinguémFull Stack DevOps eMágico,将其修改为中文名称和介绍。注意,Full Stack DevOps e 和英文中的 Full Stack DevOps 会重复,因此在修改英文时也会覆盖这个部分。可以直接定位到:

[languages.zh-cn.params]

处进行修改。

修改中文跳转链接 链接到标题

修改中文跳转链接,也就是右上角about、blog、……等的中文部分以及切换按钮设置,定位到

[[languages.pt-br.menu.main]]

可以看到下面有葡文的跳转文字Sobre Blog Projetos Contato,首先需要将所有的

[[languages.pt-br.menu.main]]

改成

[[languages.zh-cn.menu.main]]

然后改葡文为中文即可。 最后还需要将[languages.zh-cn] 下面改为languageName = ":cn:"。 这个步骤适用于扩展更多的跳转链接以及语言。

写中文的相关文档 链接到标题

实际上,仅仅刚刚的修改是不够的,你会发现修改完语言点进去的中文菜单中显示404,这是因为没有对应的中文文档,我们进入\content,会发现 about.md,about.pt-br.md以及相应的其他文档,我们需要增加about.zh-cn.md文档来给予跳转目标!而对于.pt-br.md后缀的文档可删可不删,只是可能偶尔会跳出一些葡文链接。

修改头像 链接到标题

最后,还可以通过avatarURL更改头像(其实我们甚至改网站logo,不过这一块还没来得及探索)

直接修改默认语言 链接到标题

其实可以直接更改优先显示语言,即可将首选语言由英文变成中文。然后此时注意,如果想要写英文文章的话就要加后缀,例如有一篇文章的文件名是bulid.md,那他就会自动将其放在中文显示时的博客里,此时如果想要在英文博客中也有其翻译版,需要新建一个bulid.en.md,并在里面填写英文版本的这篇文章,这个过程需要手动完成,虽然有诸多不变,然而有更强的灵活性,比如你可以让中英文博客中显示不同的内容甚至是完全不一样的文章。

写作 链接到标题

基本上,如果熟悉markdown语法的话,就可以进行一些基本的写作啦!

更多功能 链接到标题

  1. 关于如何将博客部署到github上,请看文章:将网站部署到github指南
  2. 关于如何调整pdf嵌入设置,请看文章:嵌入pdf指南