hugo 快速入门教程

2019-07-24 14:30:16 hugo

创建项目

cd $HOME
hugo new site pystarter.com

# Congratulations! Your new Hugo site is created in $HOME/pystarter.com.

使用这个命令创建一个空的站点,pystarter.com 是我自己的网站,使用时按照具体需求修改。

修改网站配置

网站的配置都在 config.toml 中,可以在里面配置网站的标题、语言、主题等等。

首先要根据具体情况修改网站的语言和标题:

languageCode = "zh-CN"
title = "PyStarter"

安装主题

新建的空项目中没有主题,可以在主题官网 选择一个合适的主题,这里我们使用官方默认的 Ananke

非常不推荐使用 git submodule 安装主题,感觉这个命令有很大缺陷,添加的时候非常简单,但是后期想移除添加的子模块会很麻烦, 将主题代码 clone 到一个独立的目录中,然后创建软连接,当前这样做有代价,缺点就是在其他机器创建同样的网站测试环境也需要这样手动操作。

将主题下载至独立的目录中,避免使用 git submodule:

cd $HOME
mkdir hugo-themes && cd hugo-themes
git clone https://github.com/budparr/gohugo-theme-ananke.git

回到网站目录中,创建主题软连接,hugo 会在 themes 目录中寻找主题目录:

cd pystarter.com
ln -s $HOME/hugo-themes/gohugo-theme-ananke theme/ananke

最后修改配置文件 config.toml,激活主题:

# 添加这行,激活 ananke 主题
theme = "ananke"

最后别忘了将这个目录加入到 .gitignore 文件中,从版本管理中忽略掉。

预览站点

hugo 内置了一个功能丰富的网络服务器,在网站目录中使用这个命令即可预览该站点:

hugo serve

# Web Server is available at http://localhost:1313/

可以在浏览器中打开这个地址语言网站:http://localhost:1313/,因为我们还没写任何内容,网站只有一个空的布局,没有多余的内容。

平时写文章过程中文件处于草稿状态 draft,并不想让这类文章出现上网站上,所以默认处于草稿状态的文章没有被处理生成, 在本地写文章过程中如果想预览效果,加上开关 -D 就能同时生成草稿状态的文章了:

hugo serve -D

写下第一篇文章

文件写在 content 目录下,当前一个站点除了文章之外,还有其他比如网页等,文件处于 content 目录中的 posts 子目录中,hugo 提供了辅助命令来新建一篇文章:

hugo new posts/hello-world.md

这个命令就会在 content/posts 目录下创建 hello-world.md 文件,文件上半部分是称为 front matter 的 yaml 格式配置,下半部分是 markdown 格式的文章内容。

文章默认是草稿状态 draft: true,如果想要发布,只需要将 front matter 中的 draft 改为 false。

文件保存后 hugo 内置服务器监测到文件有改动,会通知浏览器自动刷新。

至此已经网站已经准备好了,接下来可以优化写文章及部署站点的流程了。