注意: 这篇快速入门介绍了 Hugo v0.11 的特性. 如果你使用早期版本的 Hugo, 你需要现进行 升级

VIDEO https://youtu.be/w7Ft2ymGmfc

第一步 安装 Hugo

前往 Hugo Releases 根据你的操作系统下载合适的版本

先把可执行文件 hugo (windows 下为 hugo.exe) 加入环境变量, 再进行后面的操作.

更多关于 Hugo 的安装请查看 Installing Hugo.

第二步 让 Hugo 为你创建一个网站

Hugo 可以创建一个网站框架:

$ hugo new site path/to/site

剩下的命令我们将在项目目录中进行操作

$ cd path/to/site

新的项目将有如下结构:

 archetypes/
 content/
 data/
 layouts/
 static/
  config.toml

现在网站没有任何内容

第三步 创建内容

如果你使用过其他写博客的平台, 例如 Jekyll Ghost 或者 Wordpress 并且你想迁移到 Hugo, 请查看 migration tools 列表.

Hugo 同样有可以创建一个页面框架:

$ hugo new about.md

content/目录下生成了一个新文件, 文件内容为:

+++
data = "2015-01-08T08:36:54-07:00"
draft = true
title = "about"

+++

注意时间 date 是自动生成当前时间

在 +++ 后面输入 Markdown 格式的内容,如

## A headline

Some Content

为了好玩, 我们来创建另一个内容

$ hugo new post/first.md

新文件将被创建在 contnet/post/first.md.

我们任然没有任何模板来告诉我们如何展现这些内容.

第四步 安装主题

Hugo 拥有大量主题支持. 安装所有最新的 Hugo 主题只需从 GitHub 仓库拉取所有 Hugo 主题 到你的项目目录

$ git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

第五步 运行Hugo

Hugo 自己拥有高性能的 web 服务. 只需的运行 hugo server Hugo将自动找到一个可用的端口为你的内容建立服务:

$ hugo server --theme=hyde --buildDrafts
2 of 2 drafts rendered
0 future content
2 pages created
0 paginator pages created
0 tags created
0 categories created
in 15 ms
Watching for changes in /home/user/exampleHugoSite/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

我们在这里指定了 2 个选项:

• --theme 选择一个主题
• --buildDrafts 因为我们想要显示我们的内容, 所以都设置了草纸状态

查看 Hugo 选项帮助:

$ hugo help

查看 Hugo 服务帮助:

$ hugo help server

第六步 编辑内容

Hugo 不仅仅只是运行一个服务, 同时监听你的文件变化并自动的重建你的网站, Hugo 还将通知你的浏览器自动刷新打开了的页面. 这对手机浏览器同样有效.

通过 ctrl + c 停止 Hugo 进程, 然后输入:

$ hugo server --theme=hyde --buildDrafts
2 pages created
0 tags created
0 categories created
in 5 ms
Watching for changes in exampleHugoSite/content
Serving pages from exampleHugoSite/public
Web Server is available at http://localhost:1313
Press Ctrl+C to stop

打开 你最喜欢的编辑器, 编辑并且保存, Hugo 将自动重现网站并自动率先你浏览器.

将浏览器放到第二个显示器窗口里, 在你保存修改后只需瞥一眼浏览器查看效果, 你不需要切换到浏览器去刷新. Hugo 是非常快的, 通常在你查看浏览器之前新的页面已经显示在浏览起上了.

修改并保存文件. 注意终端的显示:

Change detected, rebuilding site
2015-11-27 15:13 +0100
2 of 2 drafts rendered
0 future content
2 pages created
0 paginator pages created
0 tags created
0 categories created
in 11 ms

第七步 玩一玩

玩是最好的老师.

试着做一做:

• 添加一个新的内容文件
• 常见一个章节
• 修改一个模板
• 使用 TOML front matter 创建一个内容
• 定义自己的 front matter
• 显示 field in the template
• 创建一个新的 new content type