- /
- Skills/
- 建站/
- 使用hugo快速建站/
使用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 也需要调整一下。
- 修改配置文件
- 空模板添加内容
- 首先修改 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,一个微型的网站就诞生了,很简单有没有。
以上介绍了如何使用 hugo 来创建网站,过程非常简单。当然以上的步骤是不足以建立一个完整的网站的,涉及网页组织、图片、样式、菜单等等各种问题,不过有大量的公开模板可以使用或参考。 上面所列的 hugo 功能,远远只是冰山一角。
如果想更深入的了解 hugo 的使用,请阅读 官方文档 ,或者从本站的 hugo起步教程101 开始入手。
更多相关内容,请阅读 hugo系列文章