Hugo Abc

116 阅读3分钟

本文主要介绍如何使用 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 来负责。