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

5,737

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. 源码安装

源码编译安装,首先安装好依赖的工具:


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 hugogo 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:evengithub.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.iolouyan替换为你的github用户名)。

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

$ hugo --theme=hyde --baseUrl="http://louyan.github.io/"

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

$ 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 从入门到会用