本文主要介绍如何使用 hugo 制作自己的静态网页站点。

1. 安装

各平台的安装都非常方便，针对 mac 系统：

1

brew install hugo

安装后，查看下版本号，检测安装是否成功：

1

hugo version

2. 创建站点

创建一个名字叫做 blog 的站点，开始体验 Hugo 🐶。

1

hugo new site blog

创建站点成功后，进入到 blog 目录，会看到如下的目录信息：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes

在这时候，初始化 git 进行版(博)本(客)控(日)制(志)，是一个非常好的时机。

1
2

git init
git commit -am 'init blog powered by Hugo'

3. 设置主题

新创建的站点，由于缺乏主题信息，无法正常显示。需要为站点添加有一个主题。

所谓主题，就是一套和 Hugo 配合的前端逻辑，主要包括 css，js, 模板，站点配置文件等信息。

这里以本博客选用的 Even 为例。

1

git submodule add git@github.com:olOwOlo/hugo-theme-even.git themes/even

上面的指令会创建一个 git 子模块，内容为 even 主题的源码，源码将会放置到 themes/even 目录中。

主题的设置还差一步，就是告诉 Hugo，咱选用了 even 主题。通常在 config.toml 文件中加上 theme = "even" 即可。但是，第三方库通常会有许多配置，往往参考它的说明文档来设置主题信息会更好。

以 even 为例，它的文档中说：

重要在主题的 exampleSite 目录下有一个 config.toml 文件，将这个 config.toml 文件复制到你的站点目录下，根据自己的需求更改即可。

所以，按照它的提示操作即可。主题提供的 config.toml 文件中，有非常多的可配置信息，可以根据自己的偏好来设置。

4. 启动 Hugo

主题配置好后，启动服务：

1

hugo server

访问 http://localhost:1313/ 即可以看到站点界面了。

Hugo 能够检测本地文件的变动，主动刷新渲染界面（hot reload）😎

5. 创建文章

虽然站点启动了，但是没有任何内容。需要为站点添加文章内容。例如，输入：

1

hugo new post/hugo-abc.md

即可创建一篇名为 hugo-abc 的文章，这个指令会在 content/post/目录下，创建了 hugo-abc.md 文件。

hugo new 具体用法为：hugo new 目录/文件名.后缀名，需要参考主题的说明来确认 目录 名字。

但是此时，浏览器上依然看不到任何信息，这是因为目前 hugo-abc.md 中的头部信息为：

1
2
3
4
5

---
title: "Hugo Abc"
date: 2019-03-11T15:50:14+08:00
draft: true
---

其中 draft: true 表示当前文章是草稿，而 hugo server 是不会渲染草稿。此时，加上 -D 来查看所有的文章，包括草稿。

hugo server -D

此时，应该是可以看到文章了。

6 写作

Hugo 用户通常是使用 markdown 来写作，我们只需要写作，排版工作统统交给 Hugo 和 Theme 来负责。