hugo 起步 | hugo 101 · 今日 | 有悟

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 需要调整一下。

修改配置文件

空模板添加内容

首先修改 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:1313、127.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 来提供网页访问服务。

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

使用nginx创建web网页服务

nginx 来自战斗民族的软件产品，用于在服务器上搭配http服务，性能表现非常优秀，在全球范围内打遍天下无敌手。只要是搞建站建设、系统建设的人，无人不晓。

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

使用 rsync 实现文件同步

本文介绍本地文件向远程文件上传文件、并可以保持同步的简单方法，这些工具都是 linux 服务器支持的。

这在需要服务器间传递、同步数据，或者在本地向远程服务器上传同步网站页面代码时，非常简单高效。

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

项目工程中如何使用make来管理常用的命令

本文目的不在于，比较命令管理器的优缺点，而是告诉你，巧用工具，可以让事件更简单。

前端开发工程师，使用 npm 来对前端工程进行依赖管理，这没什么好说的。package.json 中包含的 scipts 段，就是把经常使用到的执行命令管理起来，方便执行。

那如果不是前端工程或者相应的工程开发没有这种工具怎么办？

使用公开模板 #

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

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

下载程序 #

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

使用公开模板 #

延伸阅读 #