本文主要介绍如何使用 hugo 制作自己的静态网页站点。
1. 安装
各平台的安装都非常方便,针对 mac 系统:
|
|
安装后,查看下版本号,检测安装是否成功:
|
|
2. 创建站点
创建一个名字叫做 blog
的站点,开始体验 Hugo 🐶。
|
|
创建站点成功后,进入到 blog
目录,会看到如下的目录信息:
|
|
在这时候,初始化 git
进行版(博)本(客)控(日)制(志),是一个非常好的时机。
|
|
3. 设置主题
新创建的站点,由于缺乏主题信息,无法正常显示。需要为站点添加有一个主题。
所谓主题,就是一套和 Hugo 配合的前端逻辑,主要包括 css,js, 模板,站点配置文件等信息。
这里以本博客选用的 Even 为例。
|
|
上面的指令会创建一个 git
子模块,内容为 even 主题的源码,源码将会放置到 themes/even
目录中。
主题的设置还差一步,就是告诉 Hugo,咱选用了 even 主题。通常在 config.toml
文件中加上 theme = "even"
即可。但是,第三方库通常会有许多配置,往往参考它的说明文档来设置主题信息会更好。
以 even 为例,它的文档中说:
重要在主题的 exampleSite 目录下有一个 config.toml 文件,将这个 config.toml 文件复制到你的站点目录下,根据自己的需求更改即可。
所以,按照它的提示操作即可。主题提供的 config.toml
文件中,有非常多的可配置信息,可以根据自己的偏好来设置。
4. 启动 Hugo
主题配置好后,启动服务:
|
|
访问 http://localhost:1313/
即可以看到站点界面了。
Hugo 能够检测本地文件的变动,主动刷新渲染界面(hot reload)😎
5. 创建文章
虽然站点启动了,但是没有任何内容。需要为站点添加文章内容。例如,输入:
|
|
即可创建一篇名为 hugo-abc
的文章,这个指令会在 content/post/
目录下,创建了 hugo-abc.md
文件。
hugo new
具体用法为:hugo new 目录/文件名.后缀名
,需要参考主题的说明来确认目录
名字。
但是此时,浏览器上依然看不到任何信息,这是因为目前 hugo-abc.md
中的头部信息为:
|
|
其中 draft: true
表示当前文章是草稿,而 hugo server
是不会渲染草稿。此时,加上 -D
来查看所有的文章,包括草稿。
hugo server -D
此时,应该是可以看到文章了。
6 写作
Hugo 用户通常是使用 markdown
来写作,我们只需要写作,排版工作统统交给 Hugo 和 Theme 来负责。