如何在Ubuntu上安装和使用Hugo

介绍

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。Hugo这样的选择允许您简化堆栈，编写友好的markdown，处理更新和自定义内容，从而生成网站。

在本教程中，我们将介绍如何在Ubuntu服务器上安装和使用Hugo。这将允许我们配置静态站点，创建内容，并在同一服务器上发布或部署到生产位置。

PS:本文内容较多，如果您仅仅想快速配置Hugo，请移步Hugo官方文档。

准备

一台已经设置好可以使用sudo命令的非root账号的Ubuntu服务器，并且已开启防火墙。没有服务器的同学可以在这里购买，不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验，学会安装后在购买服务器。

安装最新版本的Hugo

Hugo不在Ubuntu的默认存储库中。GitHub上提供了各种体系结构和发行版的软件包。

找到您的系统架构

在开始之前，我们应该检查一下Ubuntu机器的架构，以便我们确保下载正确的软件包。在您的服务器上，输入：

uname -i

如果您看到以下内容，则表明您正在运行64位 Ubuntu安装：

x86_64

相反，如果你的输出看起来像这样，那就意味着你正在使用Ubuntu的32位版本：

i686

我们将在下面使用此信息。

下载并安装Hugo包

访问Hugo发布页面，找到最新版本的Hugo。如果向下滚动浏览功能公告文本，则应找到名为“下载”的部分。

接下来，我们需要复制相应安装包的链接位置。正确的包将取决于您在上面找到的服务器体系结构。

• 如果您使用的是64位版本的Ubuntu，请右键单击以amd64.deb结尾的链接并复制链接位置。
• 如果您使用的是32位版本的Ubuntu，请右键单击以i386.deb结尾的链接并复制链接位置。

在您的服务器上，以具有sudo权限的用户身份登录，进入您具有写入权限的目录。使用wget命令并粘贴您复制的链接位置去下载Hugo：

cd ~
wget https://github.com/spf13/hugo/releases/download/v0.14/hugo_0.14_amd64.deb

现在，您可以通过输入以下内容来安装dpkg包：

sudo dpkg -i hugo*.deb

通过要求Hugo打印其软件版本来测试安装是否成功：

hugo version

Hugo应该打印其当前的软件版本：

Hugo Static Site Generator v0.14 BuildDate: 2015-05-25T21:29:16-04:00

安装Hugo的支持软件

现在应该安装主要的Hugo应用程序。但是，我们应该安装一些额外的软件来帮助我们启动和运行。

安装Hugo主题

主要的Hugo包不包括任何主题。Hugo主题定义了如何为用户呈现网站内容。获取Hugo主题的最简单方法是克隆Hugo主题git存储库，它提供了许多预配置的主题。我们需要为此过程安装git。

我们可以在Ubuntu的默认存储库中找到git。更新本地包索引，然后输入以下命令安装git：

sudo apt-get update
sudo apt-get install git

接下来，我们可以克隆Hugo主题库。GitHub上的存储库是按照每个单独的主题组织的子模块。

因为子模块会使我们网站的实际内容的版本控制变得非常复杂，所以我们实际上只是将主题克隆到我们的主目录。然后，我们可以创建指向站点目录中主题的符号链接。如果我们有多个站点，这也将允许我们轻松共享主题目录。

通过输入以下内容将主题存储库克隆到您的主目录：

git clone --recursive https://github.com/spf13/hugoThemes ~/themes

安装Pygments Syntax Highlighter

这为将在我们呈现的页面上包含的任何代码块提供服务器端语法突出显示逻辑。我们可以使用Python的包管理器pip轻松安装Pygments。

我们可以通过输入以下内容从默认存储库获取pip：

sudo apt-get install python-pip

一旦安装完成，我们可以通过输入以下命令来安装Pygments：

sudo pip install Pygments

如果我们选择，这将允许我们在我们的帖子内容中包含支持300多种语言的语法高亮代码块。您可以在项目页面上找到更多信息。

启用Hugo Bash自动完成功能

在开始使用我们的第一个站点之前，我们要做的最后一件事是生成Hugo的bash自动完成功能。我们可以通过输入以下内容来执行。

sudo hugo gen autocomplete

之后，我们可以获取系统范围的完成配置，以便我们当前的shell可以使用自动完成功能，而无需注销并重新登录：

. /etc/bash_completion

现在，如果您输入hugo，然后按几下TAB键，您将看到Hugo知道的命令：

hugo [TAB][TAB][TAB]

benchmark        config           gen  help             new              undraft
check            convert          gendoc           list             server           version

创建您的第一个站点

现在我们已经成立，我们可以继续创建我们的第一个Hugo网站。Hugo有一个生成器，可以创建它需要运行的文件和目录的框架。

我们可以通过输入以下内容在您的主目录中创建一个新站点

hugo new site ~/my-website

进入你的新Hugo网站并浏览：

cd ~/my-website
ls -F

您将看到用于构建Hugo站点的目录结构和主配置文件：

archetypes/  config.toml  content/  data/  layouts/  public/  static/

让我们继续，将我们克隆的~/themes目录链接到我们的新站点。为了使此链接更灵活地进行可能的部署，我们将创建一个相对符号链接。如果将Hugo存储库部署到远程服务器，则只需确保将themes目录再次克隆到Hugo的父目录中：

ln -s ../themes .
ls -l

total 28
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 archetypes
-rw-rw-r--  1 demouser demouser  210 Nov  5 11:55 config.toml
drwxrwxr-x  3 demouser demouser 4096 Nov  5 11:38 content
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 data
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 layouts
drwxrwxr-x 13 demouser demouser 4096 Nov  5 11:25 public
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 static
lrwxrwxrwx  1 demouser demouser    9 Nov  5 14:21 themes -> ../themes

如您所见，我们当前目录中的themes目录实际上只是指向我们克隆到主目录的主题存储库的链接。

将您的站点提交到源代码管理

在配置我们的设置并创建一些内容之前，我们应该将我们的新站点变成Git存储库。

确保您在站点目录中并通过输入以下内容初始化新的get存储库：

cd ~/my-website
git init

Initialized empty Git repository in /home/demouser/my-website/.git/

接下来，设置将代码提交到存储库所需的基本git配置项。 最简单的方法是使用git config --global命令。我们需要设置我们的名称和电子邮件地址，以便git可以正确地将我们的信息记录为提交者：

git config --global user.name "Your Name"
git config --global user.email "user@email.com"

默认情况下，git不会将任何空目录提交到存储库。Hugo有时要求这些目录存在，即使它们中没有任何内容。要解决此问题，我们可以在每个空目录中包含一个隐藏的.gitkeep文件。这足以让git提交目录而不会影响Hugo的实际功能。

我们可以通过输入以下命令将隐藏的.gitkeep文件添加到我们的每个顶级目录（除了实际的.git隐藏目录）之外：

for DIR in `ls -p | grep /`; do touch ${DIR}.gitkeep; done

通过输入以下内容，我们可以看到隐藏的.gitkeep文件已添加到我们的所有目录中

./data/.gitkeep
./layouts/.gitkeep
./archetypes/.gitkeep
./static/.gitkeep
./content/.gitkeep

我们还希望确保我们渲染的网站内容不会添加到源代码管理中。实际的HTML，JavaScript和CSS资产应该在每次部署时新生成，而不是保存在源代码控制本身中。我们可以通过将该位置添加到.gitignore文件来告诉git忽略生成内容的公共目录：

echo "public" >> .gitignore

现在，我们添加当前目录中的所有内容站点框架提交到存储库：

git add .
git commit -m 'Initial commit, pre-configuration.'

调整站点的初始配置

让我们调整Hugo的主要配置文件，以设置Hugo构建我们网站的方式。在编辑器中打开config.toml文件：

nano config.toml

在里面，你会发现我们需要调整的一些项目：

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

如文件后缀所示，此文件使用TOML语言编写。这是一种主要使用键，值和节的简单配置语言。

我们应该改变的第一个项目是baseurl。将其更改为引用服务器的域名或公共IP地址。您还应该编辑分配给title的值。这用于设置您网站的标签或窗口标题，并在页面上用于特定主题：

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"

首先，我们可以设置首选的文本编辑器。这样，当我们生成新页面时，页面模板将在我们的编辑器中打开，准备工作。我们还应该设置默认主题。我们将使用一个名为“nofancy”的主题开始。您可以稍后在命令行上覆盖它以测试替代项，然后在找到适合您的配置文件时编辑配置文件。我们还将设置我们首选的代码块样式：

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"
newContentEditor = "nano"
theme = "nofancy"
pygmentsStyle = "native"

您可以在此页面上找到有关可用设置的更多信息。现在，保存并关闭文件。

让我们在继续之前提交配置更改：

git add .
git commit -m 'Initial configuration complete'

为您的网站创建新页面

我们现在准备开始创建网站内容了。Hugo中的内容使用易于使用的标记语言编写。页面元数据在每个页面的特殊部分中提供，称为“前端内容”，使用与主配置文件相同的配置语法。

我们可以使用hugo new命令生成新内容，然后使用命令后跟我们要生成的内容的路径。默认情况下，Hugo内容是用Markdown编写的。为了让Hugo能够从我们的Markdown页面正确生成HTML，我们需要创建以.md扩展名结尾的文件。

创建关于页面

将从主页链接到的页面以及页面所需的相对路径在很大程度上取决于您的主题。我们的“nofancy”主题有一个“关于”页面的链接。让我们从创建该页面开始：

hugo new about.md

将在名为about.md的内容目录中创建一个新页面。由于我们在配置文件中设置了newContentEditor选项，因此应该使用首选编辑器自动打开该文件。它应该看起来像这样开始：

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "about"
​
+++

页面的设置和元数据在页面的“前端内容”中配置，该部分在两侧标记为“+++”。默认情况下包含的前端内容通常由您正在使用的主题定义。

我们当前的主题包括生成页面的前面三个项目。您可以根据需要调整这些或添加其他项目。 Hugo可用的一般变量可以在这里找到。您选择的主题也可能使用自己的前端变量。在Hugo主题库中查看主题的README，以获取有关主题的详细信息。

一些重要的一般性事项是：

• date：用于对内容进行排序的日期
• description：页面内容的描述
• draft ：如果设置为true，将标记页面未准备好发布
• slug：如果要为内容指定备用URL名称，请设置此项
• publishdate：如果您只想在特定日期之后构建页面，则可以将其设置为将来的日期
• title：页面标题

现在，让我们编辑“关于”页面的标题：

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"
​
+++

现在，我们可以在底部“+++”下面添加Markdown文本。这将被翻译为正文HTML文本。我们将添加一些段落，一个标题。

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"
​
+++
​
Hello and welcome to my site!
​
## A Bit About Me
​
I like alpacas and I'm a fan of static sites.
​

完成后，保存并关闭文件。

创建你的第一篇文章

我们在内容目录的根目录中创建了about.md页面。但是，我们的大多数帖子最好保存在post子目录中（有些主题会在posts子目录中查找帖子）。让我们在“posts”目录中创建第一篇文章。Hugo将在生成页面时自动创建所需的任何主要目录：

hugo new post/My-First-Post.md

如果我们在Markdown文件名中使用破折号，它们将被转换为自动填充标题的空格：

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"
​
+++
​

我们将在此处添加一个代码示例，以便您可以看到Pygments工具提供的突出显示的代码。为此，我们将代码放在两个高亮显示标记之间，而不是使用常规的Markdown三重反引号来封装代码块：

{{< highlight language >}}
​
code_goes_here
​
{{< /highlight >}}

在我们的页面中，完成的内容将如下所示：

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"
​
+++
​
This is my first post on the site.  I hope that you like it!
​
## Welcome Function
​
Here is a little Python function to welcome you:
​
{{< highlight python >}}
def hello_world():
    print "Hello there!"
{{< /highlight >}}

完成后保存并关闭文件。如果以后需要编辑这些页面，可以在Hugo站点的content目录中找到它们。

让我们将新页面提交到我们的git存储库：

git add .
git commit -m 'First pages of our site'

建立和服务网站

Hugo可以获取Markdown文件，应用配置和主题中定义的设置，并呈现将向访问者显示的实际HTML页面。要构建您的网站，您只需输入：

hugo

这将生成您的页面并将所有呈现的内容放入服务器上的public目录中。如果您愿意，可以将此目录的内容传输到Web服务器以部署和提供内容。

注意：每次构建后，ugo都不会清理输出目录。这意味着过去的内容可能会从之前的版本中保留在公共目录中。Hugo开发人员建议您在每次构建后删除public目录，以便可以全新地重新创建内容。

Hugo还包括一个自己的Web服务器。这是一个不错的测试工具。要使您的页面在Hugo服务器上可用，请使用hugo server命令。这将呈现您的页面，然后启动Web服务器。

我们将使用--bind选项指定我们希望在所有接口上使该站点可用。我们还需要包含--bindUrl选项。我们在配置文件中设置了它，但在当前版本的Hugo中服务器没有选择它。将其设置为您网站的域名或IP地址：

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/

如果您在任何页面中设置draft == true，或者将日期设置为某些内容的未来时间，则可以通过分别包含-D和-F标志来构建和预览这些页面：

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ -D -F

现在，如果您在Web浏览器中访问服务器的域名或IP地址并将:1313端口规范附加到最后，您将看到您呈现的站点：

http://your_domain_or_IP:1313

我们可以点击我们的第一篇文章来查看我们呈现的Markdown。我们的Pygments样式已应用于代码块：

如果我们点击“关于”链接，我们将进入“关于我”页面：

如您所见，我们的主题相当基本，但它的功能与我们预期的完全相同。

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge

请记住，每个主题都有自己对目录结构和配置设置的期望。您可能需要调整一些内容才能使每个新主题正常工作。

如果您希望使用Hugo像传统Web服务器一样在端口80上提供内容，则必须在命令行中添加--port选项。您还必须在命令前加上sudo，因为1024以下的端口仅限普通用户使用：

rm -r public
sudo hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge --port=80

您现在应该可以在浏览器窗口中访问您的站点，而无需附加端口号。在使用sudo运行Hugo服务器之后，您还必须使用sudo为rm命令做好准备

sudo rm -r public

结论

Hugo静态站点提供了比传统CMS站点更少资源的替代方案。大多数用户不需要数据库驱动的内容，也不使用内容管理系统提供的额外功能。使用Hugo，您可以专注于创建内容而不是管理复杂的系统。更多Linux教程请前往腾讯云+社区学习更多知识。

参考文献：《How To Install and Use Hugo, a Static Site Generator, on Ubuntu 14.04》