Skip to main content
  1. 经验技巧分享/
  2. Hugo 使用指南/

hugo 起步 | hugo 101

·357 字
howto

hugo 是一个静态网站生成器,可以帮助你生成一个网站。

hugo 把网站内容看成数据,把页面结构看成模板。就这样,利用编程技术中的模板技术,将文章内容做为数据传入模板引擎,由模板引擎渲染生成最终的网页文件,并按一定的规律来组织这些生成的网页文件,就可以组成一个网站了。

由于 hugo 使用比较简单,并且静态网站比动态网站的服务器资源要求低,被广泛使用。当然推动 hugo 被用户快速接受的,是它本身具有非常快速的生成速度,一般几百上千的网页可以在几秒钟之内生成。

hugo 使用 golang 开发的一个命令行程序,所有的功能,都包含在一个可执行程序中。

下载程序 #

可从官方的开源代码上下载已经编译好的版本,https://github.com/gohugoio/hugo/releases。 如果你本身是 golang 开发者,可以自己编译。

若你使用 macos,又安装了 brew,可以使用brew安装,命令如下:

> brew install hugo

若你使用 windows,又安装了 scoop,可以使用 scoop 安装 hugo,命令如下:

>scoop install  hugo-extended
```,记得是这个 *extended* 版本,因为有些模板需要编译 sass 。

## 快速生成一个网站工程目录 , hugo 101

感受一下,使用 *hugo* 如何创建一个新网站。

```sh
> # 进入某个目录
> cd ~
> # 创建网站目录
> hugo new site mysite
> cd mysite
> # 创建一个模板目录,结果在 mysite/themes 下
> hugo new theme mytheme
> # 创建一篇文章
> hugo new helloworld.md

修改以下几处地方,让 hugo 帮助生成一个最小化的网站文章。

上面 hugo new theme mytheme 生成的是一个空的模板结构,需要添加以下内容。同时,由于当前是在本地开发,默认生成的网站配置文件 config.toml 需要调整一下。

  1. 修改配置文件
  2. 空模板添加内容
  • 首先修改 config.toml
# baseURL = "http://example.com/"
# 将 baseURL 改为 "/"
baseURL = "/"
languageCode = "en-us"
title = "My New Hugo Site"
  • 修改下主页模板

mysite/themes/mytheme/layouts/index.html

{{ define "main" }}
hello, {{ .Title }}
{{ end }}
  • 修改内容页模板

mysite/themes/mytheme/layouts/_default/single.html

{{ define "main" }}
hi, I'am "{{ .Title }}"
{{ end }}

以上三处地方修改完毕,在 mysite 目录执行

# 
> hugo server -D --theme=mytheme
...
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

通过浏览器访问 127.0.0.1:1313127.0.0.1:1313/helloworld,看看是不是可以正常显示内容

生成可发布的静态网页文件 #

# 在mysite 目录下执行
> hugo --theme=mytheme
...
Start building sites …

                   | EN
-------------------+-----
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 50 ms

以上命令所生成的文件在 mysite/public 目录下,这个目录下的内容可以直接使用 http server 服务器工具(如apache,nginx)来提供服务。

若服务器环境不在本地,是远程服务器,可以将 mysite/public 目录上传到服务器上,然后使用 http server 来提供网页访问服务。

本站使用 nginxhttp web server,如何使用 nginx 来快速创建一个可用环境,可参考本站文章

关于如何将 mysite/public 上传到服务器,其实方法非常多,不喜欢操作命令行的同志,请使用 ftp 桌面工具。不排斥命令行的同志,可以使用 sftp、scp、rsync 等,如果你的工作环境是 linux 或 macos,那么这些工具都无须额外安装。 本站使用 rsync 来实现本地文件目录与远程 linux 服务器同步。很简单,具体操作见

若调试好命令太长不好记,可借助 make 来管理。

使用公开模板 #

hugo 在全球范围内有广泛的用户,所以模板不会少,若不想自己动手,可以使用别人的,官方有个公共的 模板列表 ,收集来自全球的分享模板,安装模板的过程也非常简单,基本每个模板都有介绍如何安装。

> # 使用git或wget 把别人的模板工程下载到 themes目录
> cd mysite/themes
> # git or wget theme
> # 在启动 hugo 时指定使用的模板,模板名称就是 themes 目录下的文件夹名称
> hugo server --theme=XXX
> # 使用指定的模板生成可发布的静态网页
> hugo --theme=XXX

延伸阅读 #

如果想深入的使用 hugo,或者要自己定制 hugo 模板,那么需要阅读官方的文档。使用别人的模板时,需要认真看是否有详细使用说明,因为 hugo 非常灵活,除了一些约定(比如模板查找规则)与内置的变量结构,公共模板经常会自定义一些变量,这些是官方文档里不会体现的。

官方文档地址, document

以下是 hugo 涉及到的技术,如果只是想写写文章,不搞技术的,

  • 认真了解模板中涉及到的变量,一般别人的模板都会有说明,如果没有说明的,用起来会很别扭,文章中忘记设置自定义变量值有时会引起网页不正常

若是想深入到修改别人的模板,或者自己建模板的,涉及以下方面的技术:

  • html
  • js
  • css
  • golang html/txt template,因为 hugo 使用到了 golang 的模板引擎