如何在 Linux 上使用 Hugo 静态站点生成器

静态网站易于创建且使用起来非常快。如果你学习使用 Hugo，你可以在 Linux 上生成基于主题的静态网站。创建网站再次变得有趣！

雨果网站生成器

静态站点是不会动态创建或修改网页的站点。没有后台数据库、电子商务处理或 PHP。所有网页都是完全预制的，可以非常快速地提供给访问者。

但这并不意味着静态网站一定很无聊。他们可以使用 HTML 提供的所有内容，外加层叠样式表 (CSS) 和 JavaScript。他们还可以轻松地让图像轮播和网页在背景图像上滑动。

Hugo 站点生成器使用模板和您创建的任何内容来生成完整的网站。然后，您可以将其放在托管平台上，并立即拥有一个实时网站。

Hugo 对您创建的页面和博客条目使用 markdown。 Markdown 几乎是最简单的标记语言，它使您的网站维护变得简单。

Hugo 的配置文件使用 Tom’s Obvious, Minimal Language (TOML) 和 YAML Ain't Markup Language (YAML)，它们同样简单。另一个好处是 Hugo 的速度非常快——一些网站加载时间不到一秒。它有许多模板供您选择，并且一直在添加更多模板，因此上手很容易。只需选择一个模板并添加一些内容即可。

Hugo 还充当您计算机上的微型 Web 服务器。您可以在设计和创建网站时以及添加新帖子时看到网站的实时版本。每次您在编辑器中“保存”时，它也会自动更新，因此您可以立即在浏览器中看到更改的效果。

托管您的网站

在托管您的静态网站时，您的选择太多了。大多数公司都提供免费托管供个人或开源使用。当然，您也可以选择正规的网络托管公司，例如以下任何一家：

• 特技飞行
• 亚马逊 S3
• 蔚蓝
• 云端
• 梦想主办
• 火力基地
• GitHub 页面
• GoDaddy
• 谷歌云存储
• 英雄联盟
• GitLab 页面
• 网络化
• 机架空间
• 激增

安装雨果

除了 Hugo，您还需要安装 Git。 Git 已经安装在 Fedora 32 和 Manjaro 20.0.1 上。在 Ubuntu 20.04 (Focal Fossa) 上，它被自动添加为 Hugo 的依赖项。

要在 Ubuntu 上安装 Hugo，请使用以下命令：

sudo apt-get install hugo

在 Fedora 上，您需要键入：

sudo dnf install hugo

Manjaro 的命令是：

sudo pacman -Syu hugo

使用 Hugo 创建网站

当我们要求 Hugo 创建一个新站点时，它会为我们创建一组目录。这些将包含我们网站的不同元素。但是，这不是将上传到您的托管平台的最终网站。这些目录将包含主题、配置文件、内容和图像，当我们要求 Hugo 构建实际网站时，这些目录将用作输入。

这就像源代码和编译程序之间的区别。源代码是编译器用来生成最终产品的东西。同样，Hugo 获取这些目录的内容并生成一个工作网站。

我们要运行的命令将创建一个与您要创建的站点同名的目录。该目录将在您运行命令的目录中创建。

因此，移动到您要在其中创建网站的目录。我们正在使用我们的主目录，因此我们键入以下内容：

hugo new site geek-demo

这将创建一个“geek-demo”目录。我们键入以下内容以切换到该目录并运行 ls：

cd geek-demo/

ls

我们看到“config.toml”配置文件和已创建的目录。不过，这些实际上是空的，因为这只是网站的脚手架。

初始化 Git 并添加主题

我们需要添加一个主题，以便 Hugo 知道我们希望完成的网站看起来像什么。为此，我们必须初始化 Git。在您站点的根文件夹（包含“config.toml”文件的文件夹）中，运行以下命令：

git init

您可以选择数百个主题，每个主题都有一个描述它的网页。您可以运行主题演示并找出下载它的命令。我们将使用一个名为 Meghna 的工具。

要将该主题整合到我们的网站中，我们需要切换到“Themes”文件夹并运行 git clone 命令：

cd themes

git clone https://github.com/themefisher/meghna-hugo.git

Git 在运行过程中会显示一些消息。完成后，我们使用 ls 查看包含主题的目录：

ls

雨果主题包括一个工作示例网站。您必须将该默认站点复制到您网站的目录中。

首先，返回您网站的根目录。我们正在使用 -r（递归）cp 选项来包含子目录，并使用 -f（强制）选项来覆盖任何现有文件:

cd ..

cp themes/meghna-hugo/exampleSite/* -rf .

在本地启动您的网站

我们已经做了足够的工作来在本地启动一个新网站。它仍将包含占位符文本和图像，但这些只是外观上的变化。让我们首先验证技术位是否有效。

我们告诉 Hugo 运行它的网络服务器并使用 -D（草稿）选项来确保任何可能被标记为“草稿”的文件都包含在网站中：

hugo server -D

下图显示了我们的 hugo 命令的输出。

我们被告知 Hugo 在 142 毫秒内构建了该站点（我们确实说它很快，对吧？）。它还告诉我们按 Ctrl+C 停止服务器，但暂时让它运行。

打开浏览器并前往 localhost:1313 查看您的网站。

修改默认站点内容

当它像这样运行时，Hugo 会从内存中为网页提供服务。它没有在硬盘驱动器上创建网站，而是在 RAM 中创建工作副本。不过，它正在监视硬盘驱动器上的文件和图像。如果其中任何一个发生更改，它会在您的浏览器中刷新站点——您甚至不必按 Ctrl+F5。

打开另一个终端窗口并导航到您网站的根目录。在编辑器中打开“config.toml”文件。将“baseURL”更改为您的网站将托管的域，并将“标题”更改为您网站的名称。保存您的更改，但让编辑器保持打开状态。

Hugo 检测到“config.toml”文件发生了变化，因此它读取这些文件、重建站点并刷新浏览器。

您现在应该会在浏览器选项卡中看到您为站点选择的名称。获得有关已保存更改的即时视觉反馈可显着加快定制网站的过程。

所有的主题都是不同的，但我们发现我们以前很容易遵循这些主题。网站的不同部分都有明显的名称，每个部分的设置也是如此，因此您更改的内容总是很明显。

而且，一旦您保存更改，您就会在浏览器中看到您所做的更改。如果您不喜欢它，只需撤消更改并重新保存即可。

控制网站的各种配置文件都专用于一项工作，并以有意义的方式标记。追踪它们并不困难，因为它们在目录中的位置不多。通常，它们位于“数据”文件夹中。

因为我们使用的是双语模板，所以我们的英文配置文件位于“En”子目录中。

如果您在编辑器中打开 Data > En > banner.yml 文件，您将看到管理网站横幅区域的设置集合。

当您更改“标题”和“内容”设置时，您会更改标题页上的文本。

我们还更改了“标签”设置，因此按钮文本显示为“查找更多”。对于您的网站，您可能也想更改图像。

保存更改后，您就会在浏览器中看到它们。

更改网站的其他元素

您可以用类似的方式更改所有其他元素。只需找到适当的配置文件并更改设置和文本以满足您的需要。

您还需要更改图像。默认图像将在配置文件中引用。您可以轻松找到并查看原始图像以查看其尺寸。

图像放置在“静态>图像”目录中，其中包含网站不同部分的子目录。将任何网站图标和徽标直接放在“静态 > 图片”目录中。

添加新的博客内容

到目前为止，我们已经着眼于改变已经存在的东西。但是，我们如何添加新的博客文章？ Hugo 使用称为“原型”的概念来创建新内容。如果我们不为我们的博客条目创建一个原型，那么每次我们要求 Hugo 创建一个新的博客条目时，都会为我们创建一个默认文件。

这很好，但是有了原型，我们可以节省一些精力，并确保提前为我们输入尽可能多的前端内容。

在此主题中，博客条目位于内容 > 英语 > 博客中。如果我们在编辑器中打开一个现有的博客条目——比如“simple-blog-post-1.md”——我们可以看到前面的内容。

我们需要复制该部分，编辑当前条目，以便它可以用作原型模板，然后将其保存在“原型”文件夹中。如果我们将其命名为“blog.md”，它将自动用作新博客条目的模板。

在 gedit 中，我们可以这样做：

gedit content/english/blog/simple-blog-post-1.md

突出显示包括两条虚线的顶部部分，然后按 Ctrl+C 复制它。按 Ctrl+N 开始一个新文件，然后按 Ctrl+V 粘贴您复制的内容。

现在，进行以下更改，并确保在每行的冒号 (:) 后留一个空格：

• Title：将其更改为 \{{ replace .Name \-" | title }}\（包括引号） .每篇新博文的标题都会自动插入。它由您传递给 hugo new 命令的文件名组成，我们将看到。
• 日期：将其更改为{{ .Date }}。创建博客的日期和时间将自动输入。
• Image_webp：这是指向 webp 格式的博客标题图片的路径。如果主题找不到，它将使用下一行中的图像。
• 图片：这是 JPEG 格式的博客标题图片的路径。您不妨将这些指向默认图像。然后，所有博客文章都将有一个权宜之计图像，甚至在您查找、调整大小或保存自定义图像之前也是如此。完成后，您可以轻松编辑文件名以匹配您的自定义图像。
• 作者：将此更改为您的姓名。
• 描述：您在此处输入每个帖子的简短描述。如果将其更改为空字符串 (\\)，则无需编辑旧文本即可为每个新博客键入说明。

将这个新文件保存为“archetypes/blog.md”，然后关闭 gedit。每当您想创建新的博客条目时，Hugo 都会使用这个新的原型。

请注意，我们的文件应该有一个“.md”扩展名，因为我们将使用 markdown 来编写我们的博客条目：

hugo new blog/first-new-blog-post-on-this-site.md

现在，我们要在编辑器中打开我们的新博客条目：

gedit content/english/blog/first-new-blog-post-on-this-site.md

我们的新博文在 gedit 中打开。

已为我们添加了以下所有前面的内容：

• 标题：这是从文件名中推导出来的。如果需要任何调整，您可以在此处进行编辑。
• 时间和日期：这些是自动添加的。
• 默认图片：您可能希望找到相关的免版税图片。将其放入静态 > 图像 > 博客。您必须在此处键入图像的实际文件名。
• 作者：您的名字是自动添加的。
• 描述：已编辑。

使用 markdown 编写博客，并使用标题、粗体、斜体、图像、链接等的标准标记。每次保存文件时，Hugo 都会重建网站并在浏览器中更新它。

下图显示了我们的新博客条目如何出现在主页上。

下图显示了新博客条目在其自己的页面上的外观。

写完博客文章后，保存更改，然后关闭编辑器。您也可以关闭浏览器，因为我们将停止 Hugo 服务器。

在运行 Hugo 服务器的终端窗口中，按 Ctrl+C。

建设网站

在您网站的根目录中，发出以下命令来构建您的网站：

hugo

Hugo 构建网站并列出其创建的页面和其他组件的数量。创建我们的花费了 134 毫秒。

Hugo 在您网站的根目录中创建一个名为“Public”的新目录。在“公共”目录中，您会找到传输到托管平台所需的所有文件。

请注意，您必须将“Public”目录中的文件和目录上传到您的托管平台，而不是“Public”目录本身。

现在你知道了基础知识

每个主题都需要一些探索才能弄清楚如何让它看起来像你想要的那样，但这是有趣的部分！考虑到 Hugo 能够在浏览器窗口中立即呈现更改，任何事情都不会花太长时间。

您可能会发现编写文本以及查找和修剪图像是整个过程中耗时最长的部分。

Hugo 文档站点也很有帮助，但范围很广。希望这个基本的演练足以让您入门。

如果您使用 Git 和 Github、GitLab 或 BitBucket，也有适用于这些平台的集成。他们监视您的远程 Hugo 存储库，并在您向其推送更改时重建您的实时站点。