zzxworld

使用 Hugo 搭建个人博客网站

Hugo 是一个静态网站生成工具,使用它可以把 Markdown 格式的内容组织起来,生成有结构的 HTML 文件。类似的工具有很多,但 Hugo 在生成速度方面号称是最快的,今天就来体验一下这个 The world's fastest,也就是世界第一快的静态网站工具: Hugo。

安装 Hugo

如果你使用的是 Mac 电脑或是 Linux 系统,安装 Hugo 会非常简单。在 Mac 电脑的 macOS 系统上可以使用 Homebrew 安装 Hugo:

brew install hugo

对于 Linux 系统,使用自带的包管理命令也能直接安装。比如 Debian 和基于它衍生的 Linux(比如 Ubuntu),就可以使用 apt 命令安装:

sudo apt install hugo

在 Arch Linux 上,使用 pacman 命令安装:

sudo pacman -S hugo

如果是 Windows 系统,就稍微麻烦了点。需要手动操作三个步骤:

  1. 下载 Hugo 的可执行文件。
  2. 创建几个 Hugo 文件夹。
  3. 设置运行 Hugo 命令时所需的 PATH 环境变量。

我手头目前也没有可用的 Windows 虚拟机,暂且就不折腾了。Hugo 官方文档提供了详细的操作步骤,可以前往参考一下:《Install Hugo on Windows》。

如果电脑上安装了有 Docker,那就不用考虑这些不同系统导致的安装方式差异了,直接把镜像拉下来即可:

docker pull klakegg/hugo

然后通过 docker 命令来执行 Hugo:

docker run --rm -it -v $PWD:/src klakegg/hugo

创建 Hugo 站点

Hugo 主要通过命令方式来使用。在开始之前,需要先创建站点。比如创建一个命名为 blog 的新网站:

hugo new site blog

上面命令执行后会在当前目录下创建以下文件结构:

blog
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── public
├── static
└── themes

这几个目录和文件的用途如下:

名称 用途说明
archetypes 内容头文件定义目录。
config.toml 网站配置文件。
content 网站内容目录。
data 网站应用所需的 YAML, JSON 或者 TOML 等类型的格式化数据存放目录。
layouts 网站布局模版文件目录。
public 存放网站最终生成的 HTML 文件目录。
static 图片,CSS 和 JavaScript 静态文件目录。
themes 网站样式目录。

配置样式

先进入刚创建的 blog 目录:

cd blog

目前 themes 样式目录还是空的。在使用 Hugo 时,需要提供样式,所以先来解决这个问题。在刚接触 Hugo 的阶段,自己动手写样式还有点难度,建议先从官方的样式库中来挑选一个来用。

我随便选择了一个 beautifulhugo 的样式。点开这个样式的介绍,里面有安装说明。根据安装说明,把它到 themes 目录中:

git clone https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

然后使用下面的命令启动 Hugo 服务:

hugo server -t beautifulhugo

命令中的 -t 选项用来指定要使用的样式,如果下载的样式不一样,记得改后面的样式名称。如果不想每次都在命令中使用这个选项,也可以在 config.toml 配置文件中添加样式配置:

theme = 'beautifulhugo'

这样就只需要用 hugo server 来启动 Hugo 服务了。

命令执行后使用浏览器访问 http://localhost:1313 这个地址,beautifulhugo 样式的界面显示如下:

homepage

撰写内容

有了样式并启动了 Hugo 服务,接下来可以开始写点内容了。使用下面的命令创建一篇文章:

 hugo new posts/hello.md

命令执行后会有如下提示:

Content ".../blog/content/posts/hello.md" created

可以看到,内容创建到了 content 目录下,并且根据我在上面命令中的定义,创建了 posts 目录。接下来只要打开 hello.md 文件,会发现它的默认内容如下:

---
title: "Hello"
date: 2022-11-04T09:26:41+08:00
draft: true
---

这是静态网站生成器都遵循的一种文章格式。在两个 --- 符号之间包裹的是文章的属性信息,分别定义了文章的标题,发布时间和状态。draft: true 表示当前文章是草稿状态,所以在浏览器中暂时还看不到此文章。

在第二个 --- 后另起一行,并输入一些内容。然后把 draft: 后的 true 改为 false 并保存,就能在浏览器界面上看到此文章了。

Screenshot for Hugo Site

部署和发布

上面所有的操作步骤,以及数据都还只是在自己电脑上。当需要把数据上传到服务器上供人访问时,就需要生成可发布数据了。

使用 Hugo 生成发布数据的命令如下:

hugo --baseUrl='https://www.zzxworld.com/'

命令中的 --baseUrl 选项用来设置站点要绑定的域名,这个同样可以在 config.toml 配置文件中设置,然后省略这个选项。命令执行结束后,会发现 public 目录中有了内容。这就是 Hugo 生成的可发布数据。直接把这个目录下的所有文件上传到服务器上,就完成了 Hugo 站点的部署和内容发布操作。