Hugo原文链接

Quick Start

通过漂亮的Ananke主题来创建一个Hugo站点。

这篇Quick Start是在macOS上操作的。在其他操作系统上安装Hugo的方法,请参见此链接

运行此Quick Start中的代码时,最好电脑上已安装了Git

通过其他方法学习Hugo,例如书籍或视频教程等,请参见此链接

第1步:安装Hugo

Homebrew和MacPorts是macOS的两个软件包管理器,可以通过brew.shmacports.org来安装。如果你使用的是Windows等其他操作系统,请参见此链接

brew install hugo
# or
port install hugo

要验证Hugo是否已经正确安装,请输入如下命令:

hugo version

第2步:创建一个新站点

hugo new site quickstart

上面的命令会创建一个名叫quickstart的文件夹,并将新站点生成在这个文件夹内。

第3步:添加一个主题

链接themes.gohugo.io是Hugo可用主题的列表地址。这篇Quick Start使用的主题是Ananke主题

首先,从GitHub下载主题并添加到themes文件夹内:

cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

如果你没有GitHub账号的话:

最后,将这个主题的名字写入站点配置文件中:

echo 'theme = "ananke"' >> config.toml

第4步:添加一些内容

你可以手动创建一些内容文件(例如content/<类别>/<文件名>.<后缀>)并在文件开头增加一些元信息。但更好的方法是你通过new命令来自动完成上面的内容(例如增加标题与生成日期等):

hugo new posts/my-first-post.md

如果需要的话,你可以编辑这个新生成的内容文件。它的开头内容类似下面:

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

Draft指明当前文件是否草稿状态。如果是true,则该文件是草稿状态,不会被部署到站点进行展示。一旦你完成了该文件的最终编辑,则可以设置draft: false。更多信息参见此链接

第5步:启动Hugo服务器

现在,启动Hugo服务器,并指定草稿状态的文件也可部署展示:

hugo server -D

你会看到类似如下输出:

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

Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

通过http://localhost:1313/来访问你的新站点

你可以试着修改内容文件,并刷新浏览器来查看改动的内容(有时需要你强制刷新浏览器,一般快捷键是Ctrl-R)。

第6步:定制化主题

你的新站点已经看起来很不错了,但是你可能想在把它推给公众前再做一些小小的修改。

站点配置

使用一个文本编辑器打开config.toml文件:

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

试着将上面的title信息换得更个性化一些吧。另外,如果你已经有一个域名了,可以将域名设置到baseURL属性这里。注意,通过hugo server -D在本地以开发模式启动Hugo时,不需要设置这个值。

**小贴士:**Hugo运行时,站点配置文件的修改或者内容文件的修改,都可以立刻在浏览器展示出来。你唯一需要做的就是刷新浏览器,有时还需要清理一下缓存

Ananke主题的其它配置选项,可以参看主题网站

更加深入的主题定制化,请参看此链接

第7步:构建静态页面

很简单,只需输入:

hugo -D

默认情况下,静态页面会生成在./public/文件夹内(执行命令时可以通过-d/–destination参数来临时改变生成路径,或者直接在站点配置文件中通过publishdir属性来修改)。