目录

Hugo系列(1) - 简单入门与搭建

背景

使用Hexo搭建个人博客也有两年多时间了,当文章数量达到上百篇之后,开始发现Hexo生成文章的效率越来越慢,直到每次生成都需要至少五分钟的时间。我发现生成效率和文章涉及到的分类和标签有很大关系,由于文章数量多,每篇文章又都关联了若干个分类和标签,再加上我使用了压缩样式的插件,最终导致极其低下的生成效率。

在经过一段时间的考量后,决定将Hexo博客迁移到Hugo。Hugo是用go语言开发的,在用法上和Hexo类似,可以简单地把Hugo当成go语言版的Hexo,但是它拥有更快的生成效率。下面是官网的原话:

The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

安装

和Hexo不同,Hugo安装非常简单,只需要去Hugo Release下载操作系统对应的二进制文件即可(hugo或者hugo.exe)。

对于Windows平台,一般是一个zip文件,解压后里面有个hugo.exe文件。将该文件所在目录添加到环境变量path里,即可在cmd里通过hugo version检测是否能正常运行hugo命令。

如下是我安装的hugo版本:

1
2
>hugo version
Hugo Static Site Generator v0.74.2-48565DE6 windows/amd64 BuildDate: 2020-07-17T17:22:50Z

其他平台的安装方法可以参考官方文档:Install Hugo

创建站点

首先需要创建一个新的个人站点:

1
hugo new site blog

blog就是你的博客站点所在的目录,也是这个站点的根目录,创建站点后目录结构如下:

1
2
3
4
5
6
7
archetypes/
content/
data/
layouts/
static/
themes/
config.toml

下面简单介绍下Hugo根目录下的各个文件目录的作用:

  • archetypes存放创建文件时使用的模板,可以自定义front matter属性。
  • assets存放需要被Hugo Pipes处理的文件,且只有使用了.Permalink或者.RelPermalink的文件才能被发布到public目录。 注意,默认不会创建assets目录。
  • config是配置文件,可以有JSONYAML或者TOML三种格式,默认使用根目录下的config.tomlconfig.yamlconfig.json中的某一个。可以通过--config来配置读取一个或多个配置文件,如:hugo --config a.toml,b.toml,c.toml注意,默认不会创建config目录。
  • content存放的各种md文件用于部署站点,该目录下可以自行创建若干个子目录来便于对文章进行分类,这些子目录被称为section
  • data目录存放的是用于定义变量的模板文件,相当于Java里的常量类,这些文件有JSONYAML或者TOML三种格式,会在生成站点时被使用到。一般用不到该功能,具体用法可以参考:data templates
  • layouts目录存放的模板文件用于渲染html页面,模板里可以定义不同页面的html代码。
  • static目录存放的是静态内容:图片、CSS、JavaScript等。
  • resources目录用于缓存某些文件来提高生成效率。 注意,默认不会创建resources目录。

添加主题

为新站点添加一个主题,以我使用的LoveIt主题为例,先将主题代码放置到themes目录下:

1
2
3
cd blog
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

接着修改config.toml

1
theme = "LoveIt"

这里的LoveIt对应themes目录下的主题的文件夹名字。

新建文章

新建一篇文章:

1
hugo new posts/first.md

该命令会在content/posts目录下生成first.md文件,打开进行编辑:

1
2
3
4
5
6
7
8
---
title: "First"
date: 2020-09-08T21:57:28+08:00
draft: true
---
## First

First blog.

两行---里的属性是front matter,用来设置当前文章的属性配置。front matter的内容可以使用3种不同的格式来定义,两行---之间对应的是YAML格式,两行+++之间对应的是TOML格式,{}之间对应的是JSON格式。

建议用YAML格式来定义,这样从Hexo迁移到Hugo的成本会更低。

下面是官方文档提供的3种不同格式的front matter的样例,有兴趣的可以了解下。

TOML Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
+++
title = "spf13-vim 3.0 release and new website"
description = "spf13-vim is a cross platform distribution of vim plugins and resources for Vim."
tags = [ ".vimrc", "plugins", "spf13-vim", "vim" ]
date = "2012-04-06"
categories = [
  "Development",
  "VIM"
]
slug = "spf13-vim-3-0-release-and-new-website"
+++
Content of the file goes Here

YAML Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
---
title: "spf13-vim 3.0 release and new website"
description: "spf13-vim is a cross platform distribution of vim plugins and resources for Vim."
tags: [ ".vimrc", "plugins", "spf13-vim", "vim" ]
lastmod: 2015-12-23
date: "2012-04-06"
categories:
  - "Development"
  - "VIM"
slug: "spf13-vim-3-0-release-and-new-website"
---

Content of the file goes Here

JSON Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
    "title": "spf13-vim 3.0 release and new website",
    "description": "spf13-vim is a cross platform distribution of vim plugins and resources for Vim.",
    "tags": [ ".vimrc", "plugins", "spf13-vim", "vim" ],
    "date": "2012-04-06",
    "categories": [
        "Development",
        "VIM"
    ],
    "slug": "spf13-vim-3-0-release-and-new-website",
}

Content of the file goes Here

启动Hugo服务

输入命令:

1
hugo server -D

在本地启动服务后可以在 http://localhost:1313/ 访问个人站点。该命令仅用于本地调试,支持热修改,也就是说在启动服务时修改文章会实时生效,但是该命令不会真正生成静态文件。

生成静态页面

输入命令:

1
hugo -D

默认会在站点根目录的public/目录下生成对应的静态页面,可以通过在命令行指定-d或者--destination参数来改变静态页面的存放路径,也可以通过在配置文件中设置publishDir来指定。

该命令生成的静态页面文件是用来部署到pages服务的,比如GitHub pages或者Coding pages等。

另外,hugo允许对生成的静态页面设置特殊的参数,比如在文章的front matter里设置参数:draft, publishdateexpirydate。如下:

1
2
3
4
5
6
7
---
title: "First"
date: 2020-09-08T21:57:28+08:00
draft: true
publishdate: 2020-09-18T21:57:28+08:00
expirydate: 2020-09-28T21:57:28+08:00
---

draft: true表明该文章是草稿,如果在启用服务时不指定参数-D--buildDrafts,或者在配置文件config.toml中配置buildDrafts = true,则会在生成文章时忽略草稿。如果不想指定该参数就生成文章,需要改为draft: false或者将其删去。

publishdate: 2020-09-18T21:57:28+08:00表示将来发布的时间,如果不指定参数-F--buildFuture,或者在配置文件config.toml中配置buildFuture = true,则无法在规定的日期之前生成该文章。

expirydate: 2020-09-28T21:57:28+08:00表示过期时间,如果不指定参数-E--buildExpired,或者在配置文件config.toml中配置buildExpired = true,则无法在规定的日期之后生成该文章。

参考链接