使用Hugo搭建网站

Hugo环境配置

点击进入Hugo下载地址，下载最新的release文件。

创建博客网站

准备步骤

在hugo对应的文件夹内打开cmd，输入：

1

hugo new site 你的文件夹名

可以看到多出一个新的空文件夹。进入空文件夹，在cmd中输入：

1

hugo service build

可以看到网站在localhost:1313转发，在浏览器中输入该网址即可看到当前网站的内容。

下载Hugo主题

在Hugo官网上进入 Theme，下载需要的主题文件，解压后放入网站文件夹的theme子文件夹。

接着在下载的主题文件夹中复制content文件夹和hugo.yaml（或hugo.toml）文件，粘贴到你的网站文件夹中。

打开主题的配置文件，找到theme: hugo-theme-stack一行，这里标明所使用主题的名称，须保持名称与主题文件夹的名称相同，否则要修改其一。再次执行hugo service build，即可看到使用了主题的网站。

创建自定义内容

Hugo网站的文章内容均在content文件夹中，每篇文章对应一个子文件夹。

每篇文章均采用Markdown语法书写，通常在文章开头有类似的配置文字：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


---
title: xxxxx            # 文章的标题
description: xxxxx      # 文章的副标题
build:
    list: "never"       # 不在归档列表中显示
date: xxxxx             # 文章的日期
slug: xxxxx             # 文章在静态页面所属的文件夹
categories:
    - xxxxx             # 文章所属类别
---

必须包含这些内容网站才会显示对应文章，正文参照 Markdown 语法规则。

Hugo构建命令

完成网页的编辑后，需执行Hugo的构建命令，方能生成网页文件。

1
2
3


hugo server -D              # 构建本地网页
hugo                        # 构建在线网页
hugo --cleanDestinationDir  # 清理构建文件夹

📝 备注

使用 hugo server -D 命令构建的是本地网页，遇到超链接时会重定向到 localhost:1313/xxx，不能直接部署到GitHub等服务器上，必须再执行一次hugo命令清除本地链接的内容之后，才能正确部署。

参考视频：

在Github上托管网页

Github网站提供了“Github Pages”功能，允许用户为自己的项目部署一个静态网页。

创建网站仓库

注册Github账号，并创建一个新仓库，命名为你的用户名.github.io。

为什么命名为你的用户名.github.io？

Github的Pages分为两种，一种为用户Pages，另一种为项目Pages。用户Pages每个账号只能拥有一个，域名为https://你的用户名.github.io；项目Pages数目不限，域名为https://你的用户名.github.io/你的项目名.

因此，设置仓库名为你的用户名.github.io可以使网站地址更简洁。

生成静态网页文件

在命令行中执行

1

hugo

执行完成后会在工作区文件夹中出现一个public文件夹，进入该文件夹。

上传文件至Github

参见：玩转Github

参考视频：

插入其他资源

插入图片

1

{{< figure src="图片路径" width="宽度" height="高度" title="图片标题" >}}

插入视频

1
2


<!-- 插入Bilibili视频 -->
{{/* < bilibili bv号 分p(可选) */>}}

Hugo网站搭建内部链接

使用相对路径链接

相对路径是根据当前页面的位置来定位目标页面的路径。这是最简单且常用的方式之一。

假设你的网站目录结构如下：

1
2
3
4
5
6


content/
├── about.md
├── blog/
│   ├── post1.md
│   └── post2.md
└── projects.md

在about.md中链接到 blog/post1.md：

1

[访问博客文章](blog/post1)

在 blog/post1.md 中链接到projects.md：

1

[查看项目](../projects)

在 blog/post1.md 中链接到同级的post2.md：

1

[查看另一篇文章](post2)

使用绝对路径链接

绝对路径是从网站的根目录开始的完整路径。这种方式的好处是不受当前页面位置的影响。

假设你的网站根目录是 https://example.com，目录结构同上。

在about.md中链接到 blog/post1.md：

1

[访问博客文章](/blog/post1)

在 blog/post1.md 中链接到 projects.md：

1

[查看项目](/projects)

使用 Hugo 的 ref 和 relref 短代码

Hugo 提供了 ref 和 relref 短代码，可以更智能地处理内部链接。这些短代码会根据页面的路径自动解析链接。

ref 短代码：生成绝对路径链接。

1

[访问博客文章]({{< ref "blog/post1.md" >}})

relref 短代码：生成相对路径链接。

1

[访问博客文章]({{< relref "blog/post1.md" >}})

链接到页面的特定部分

如果你希望链接到页面的某个特定部分（例如某个标题），可以通过锚点（anchor）来实现。

假设post1.md中有一个标题：

1

## 我的博客文章内容 {#my-section}

你可以通过以下方式链接到这个部分：

1

[查看博客文章的特定部分](/blog/post1#my-section)

链接到页面的别名

如果某些页面有别名（例如在 frontmatter 中定义了 aliases），你可以直接使用别名来链接。

假设post1.md的 frontmatter 中定义了别名：

1
2
3
4
5


---
title: "我的博客文章"
aliases:
  - "/old-post1"
---

你可以通过以下方式链接到它：

1

[访问旧的博客文章](/old-post1)