Hugo -最好用的静态网站生成器

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

为什么选择 Hugo ？

• 快！世界上最快的静态网站生成工具！5秒生成6000个页面！
• 超详细的文档，虽然是英文的
• 活跃的社区
• 更加自由的内容组织方式
• 丰富的主题，目前主题数量已经超过 Hexo

安装 Hugo

1. 二进制安装（推荐：简单、快速）

Windows

• 前往 github.com/gohugoio/hu…
• 下载 hugo_X.XX_Windows-64bit.zip
• 解压得到 hugo.exe
• 将 hugo.exe 所在目录添加至系统环境变量
• 安装完成！

Mac下直接使用 Homebrew 安装：

brew install hugo
复制代码

2. 源码安装

源码编译安装，首先安装好依赖的工具：

• Git

• Go (at least Go 1.11)

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install 
复制代码

go install --tags extended 如果需要 Sass/SCSS 支持.

如果是Windows用户,  `$HOME` 环境变量是 `%USERPROFILE%`
复制代码

提示：个人有时喜欢这样操作，打开文件夹 /src , 在文件夹下右击 选择 git bash here ，git clone https://github.com/gohugoio/hugo.git ,然后 cd hugo ，go install

[安装过程中会报错] go get 报错"https fetch failed: Get https://golang.org/x..."

由于国内连接不上golang.org ，当用go get安装有依赖golang.org的包时会报错Fetching https://golang.org/x，如果不用代理的话就需要手动下载了。

在$GOPATH/src路径下创建golang/x文件夹并下载想要的包，在windows下以上面报错为例。以上报错无法获取https://golang.org/x/net text image sync现在我们来手动获取。

打开Git Bash

mkidr -p ~/go/src/golang.org/x  //注意路径
cd ~/go/src/golang.org/x
git clone https://github.com/golang/net.git
git clone https://github.com/golang/text.git
git clone https://github.com/golang/image.git
git clone https://github.com/golang/sync.git
复制代码

这样我们再go get时就成功了。

验证安装是否成功

hugo version
复制代码

其他系统请参考官方文档——安装

创建站点

hugo new site yannotes.cn
cd yannotes.cn
复制代码

在执行完 hugo new site 命令后你会得到一个包含以下文件的目录 :

├── archetypes/
├── config.toml
├── content/
├── data/
├── layouts/
├── static/
├── resources/
├── public/
└── themes/
复制代码

• archetypes: 储存.md的模板文件，类似于hexo的scaffolds，该文件夹的优先级高于主题下的/archetypes文件夹
• config.toml: 配置文件
• content: 储存网站的所有内容，类似于hexo的source
• data: 储存数据文件供模板调用，类似于hexo的source/_data
• layouts: 储存.html模板，该文件夹的优先级高于主题下的/layouts文件夹
• static: 储存图片,css,js等静态文件，该目录下的文件会直接拷贝到/public，该文件夹的优先级高于主题下的/static文件夹
• themes: 储存主题
• public: 执行hugo命令后，储存生成的静态文件

添加主题（皮肤）

到 皮肤列表 挑选一个心仪的皮肤，比如你觉得 Hyde 皮肤不错，找到相关的 GitHub 地址，创建目录 themes，在 themes 目录里把皮肤 git clone下来：

git clone https://github.com/spf13/hyde.git themes/hyde

# 编辑你的 config.toml 配置文件使用该主题
echo 'theme = "hyde"' >> config.toml
复制代码

themes：even ： github.com/olOwOlo/hug…

git clone https://github.com/olOwOlo/hugo-theme-even themes/even
复制代码

添加文章

• 创建一个 about 页面：

$ hugo new about.md
复制代码

about.md 自动生成到了 content/about.md ，打开 about.md 看下：

+++
date = "2018-12-02T01:46:53+08:00"
draft = true
title = "about"

+++
正文内容
复制代码

内容是 Markdown 格式的，+++ 之间的内容是TOML 格式的，根据你的喜好，你可以换成 YAML 格式（使用 --- 标记）或者 JSON格式。

• 创建第一篇文章，放到 post 目录，方便之后生成聚合页面。

$ hugo new post/first.md
复制代码

它会在站点的根目录下的 content 目录下, 创建 post/first.md 目录和文件的.

打开编辑 post/first.md ：

---
date: "2018-12-02T01:46:53+08:00"
title: "first"

---
### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

复制代码

本地运行Hugo

在你的站点根目录执行 Hugo 命令进行调试：

$ hugo server --theme=hyde --buildDrafts --watch
复制代码

使用 --watch参数可以在修改文章内容时让浏览器自动刷新。

浏览器里打开： http://localhost:1313

• 导航目录的处理

[[menu.main]]
  name = "Home"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "Archives"
  weight = 20
  identifier = "archives"
  url = "/archives/"
[[menu.main]]
  name = "Tags"
  weight = 30
  identifier = "tags"
  url = "/tags/"
复制代码

这些就是站点的导航配置管理. url = "/tags/" 表示是在站点根目录下的 content/tags/ 目录, 其他类似, 一一对应即可.

添加评论系统

gitment

在使用 gitment 过程中, 关键是 repo 参数的值问题,它是你的仓库名称(不是完整路径)~, 比如我这里是~

louyan.github.io

部署

假设你需要部署在 GitHub Pages 上，首先在GitHub上创建一个Repository，命名为：louyan.github.io （louyan替换为你的github用户名）。

在站点根目录执行 Hugo 命令生成最终页面：

$ hugo --theme=hyde --baseUrl="http://louyan.github.io/"
复制代码

如果一切顺利，所有静态页面都会生成到 public 目录，将pubilc目录里所有文件 push到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/louyan/louyan.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
复制代码

浏览器里访问：http://louyan.github.io/

这个网站 YAN的札记 就是我使用hugo生成的。

---

关于hugo更详细的资料，也可参考：Hugo 从入门到会用