Hugo新手入门简易教程

官网标语：Hugo是世界上最快的构建网站的框架。是否是世界上最快的我不知道，但以我这个站点目前的文章量，生成速度真的是非常快，几乎没感觉到等待。

安装Hugo

Ubuntu安装Hugo：

sudo apt install hugo

以上命令安装的可能不是最新版本，推荐使用snap安装：

sudo snap install hugo

Windows系统安装Hugo：

使用Chocolatey安装：

choco install hugo-extended

或使用Scoop安装：

scoop install hugo-extended

其他操作系统可以参考官网安装：

官网安装说明

注意：Hugo分标准版和带扩展的版本，有些主题使用了Sass，编译Sass需要相应的扩展。

创建网站

执行以下命令即可创建网站Blog：

hugo new site Blog

Hugo目录说明

创建好的站点目录结构如下：

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

各目录功能说明：

  • archetypes：文章模板目录。使用Hugo命令创建新的文章时将使用这个目录中的模板来创建；
  • assets：存放需要Hugo Pipes处理的文件。比如Sass需要编译为CSS，就存放在这里；
  • content：文章、分类、标签等网站内容放在这里；
  • data：存放配置文件，通常为JSON、YAML或TOML格式；
  • layouts：模板文件。这里的模板将覆盖主题中的模板；
  • public：生成的静态网站文件将放在这个目录中；
  • static：这个目录中的文件会在生成网站时直接拷贝到public目录里；
  • themes：主题目录；
  • config：用于存放网站配置文件；
  • config.toml：网站配置文件，可以是YAML格式（.yaml）。

content目录

content目录中的结构一般是这样子：

content/
├── categories/
├── tags/
├── post/
├── 其他自定义目录/

需要注意Hugo生成内容时也是按照这个路径来生成的，但可以配置URL重写规则来改变生成内容的路径。

主题目录

以anatole主题为例，目录结构是这样子：

anatole-master
├── archetypes/
├── assets/
├── exampleSite/
│   └── config
├── layouts/
├── static/
├── layouts/

各目录功能说明：

  • archetypes：文章模板目录；
  • assets：存放需要Hugo Pipes处理的文件；
  • layouts：模板目录；
  • static：静态文件目录，用于存放js、css或字体等。在Hugo生成站点时，这个目录中的内容会被直接拷贝到public目录中；
  • exampleSite：主题演示数据，其中的config目录是重点，你的站点配置文件要参考这里的文件来配置。

事实上，这个主题中只有assets、layouts和static是必须的，其他的可以删除。而config文件，可以放在站点目录config里。

文章模板

默认文章模板是这样子的：

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

文章模板中可以使用Hugo变量来生成内容，比如以下变量表示当前日期：

{{ .Date }}

常用变量：

  • .Date：当前时间；
  • .File.BaseFileName：不带扩展名的文件名称；
  • .File.Filename：文件名称；
  • .File.ContentBaseName：包含文章文件的目录名称。

创建文章

进入Hugo站点目录：

cd Blog

使用文章模板创建新的文章：

hugo new post/hugo-beginner-easy-tutorial/index.md

以上命令会在content/post/目录中新建文件夹hugo-beginner-easy-tutorial，然后在这个文件中创建index.md。可以根据自己的需要来组织内容目录结构，我是将文章配图和文件放在一起，所以使用一个单独的文件夹来保存。

使用VSCode开始撰写文章：

code post/hugo-beginner-easy-tutorial/index.md

生成站点

Hugo生成站点的速度非常快，生成站点命令如下：

hugo
阿里云