跳到主要内容
  1. Skills/
  2. 建站/

使用hugo快速建站

·字数 803·2 分钟
hugo howto

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

由于 hugo 使用比较简单,并且静态网站比动态网站的服务器资源要求低,被广泛使用。它可以在几秒钟之内,生成几百、上千的网页。

下载程序 #

  • 从官方指定的地址下载相应版本,https://github.com/gohugoio/hugo/releases
  • 如果你是 macos,又安装了 brew,可以使用命令 brew install hugo 安装。
  • 如果你是 windows,又安装了 scoop,可以使用命令 scoop install hugo-extended 安装,记得是这个 extended 版本。

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

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

> # 进入某个目录
> 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,一个微型的网站就诞生了,很简单有没有。


以上介绍了如何使用 hugo 来创建网站,过程非常简单。当然以上的步骤是不足以建立一个完整的网站的,涉及网页组织、图片、样式、菜单等等各种问题,不过有大量的公开模板可以使用或参考。 上面所列的 hugo 功能,远远只是冰山一角。

如果想更深入的了解 hugo 的使用,请阅读 官方文档 ,或者从本站的 hugo起步教程101 开始入手。

更多相关内容,请阅读 hugo系列文章