注意: 这篇快速入门介绍了 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