Quick Start
通过漂亮的Ananke主题来创建一个Hugo站点。
这篇Quick Start是在macOS上操作的。在其他操作系统上安装Hugo的方法,请参见此链接。
运行此Quick Start中的代码时,最好电脑上已安装了Git。
通过其他方法学习Hugo,例如书籍或视频教程等,请参见此链接。
第1步:安装Hugo
Homebrew和MacPorts是macOS的两个软件包管理器,可以通过brew.sh和macports.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账号的话:
- 如果你没有安装git,可以直接从https://github.com/budparr/gohugo-theme-ananke/archive/master.zip下载最新版本的主题压缩包。
- 然后解压缩.zip文件,生成一个“gohugo-theme-ananke-master”文件夹。
- 重命名该文件夹为“ananke”,并拷贝到"themes"文件夹内。
最后,将这个主题的名字写入站点配置文件中:
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属性来修改)。