如何在 Linux 上使用 Hugo 静态站点生成器
已发表: 2022-01-29
静态网站易于创建且使用速度极快。 如果你学会使用 Hugo，你可以在 Linux 上生成基于主题的静态网站。 创建网站再次变得有趣！
雨果网站生成器
静态网站是一种不会动态创建或修改网页的网站。 没有后台数据库、电子商务处理或 PHP。 所有网页都是完全预先构建的，可以非常快速地提供给访问者。
但这并不意味着静态网站一定很无聊。 他们可以使用 HTML 提供的所有内容，以及级联样式表 (CSS) 和 JavaScript。 他们还可以轻松地让图像轮播和网页在背景图像上滑动。
Hugo 网站生成器使用模板和您创建的任何内容来生成完整的网站。 然后，您可以将其放置在托管平台上并立即拥有一个实时网站。
Hugo 对您创建的页面和博客条目使用降价。 Markdown 几乎是最简单的标记语言，它使您的网站维护变得简单。
Hugo 的配置文件采用 Tom's Obvious, Minimal Language (TOML) 和 YAML Ain't Markup Language (YAML)，同样简单。 另一个好处是 Hugo 的速度非常快——一些网站的加载时间不到一秒。 它有许多模板可供您选择，并且一直在添加更多模板，因此很容易上手。 只需选择一个模板并添加一些内容即可。
Hugo 还充当您计算机上的小型 Web 服务器。 您可以在设计和创建网站时以及在添加新帖子时查看网站的实时版本。 每次您在编辑器中“保存”时，它也会自动更新，因此您可以立即在浏览器中看到更改的效果。
托管您的网站
当谈到托管您的静态网站时，您会被宠坏的选择。 大多数公司提供免费托管供个人或开源使用。 当然，您也可以选择正规的网络托管公司，例如以下任何一家：
- 特技飞行
- 亚马逊 S3
- 天蓝色
- CloudFront
- 梦想主机
- 火力基地
- GitHub 页面
- 去吧爸爸
- 谷歌云存储
- Heroku
- GitLab 页面
- 网络化
- 机架空间
- 涌
相关：如何在 Google 的 Firebase 托管平台上免费托管静态网站
安装雨果
除了 Hugo，你还需要安装 Git。 Git 已经安装在 Fedora 32 和 Manjaro 20.0.1 上。 在 Ubuntu 20.04 (Focal Fossa) 上，它被自动添加为 Hugo 的依赖项。
要在 Ubuntu 上安装 Hugo，请使用以下命令：
sudo apt-get install hugo
在 Fedora 上，您需要输入：
须藤 dnf 安装雨果
Manjaro 的命令是：
sudo pacman -Syu hugo
使用 Hugo 创建网站
当我们要求 Hugo 创建一个新站点时，它会为我们创建一组目录。 这些将包含我们网站的不同元素。 但是，这不是将上传到您的托管平台的最终网站。 这些目录将保存主题、配置文件、内容和图像，当我们要求它构建实际网站时，Hugo 将用作输入。
这就像源代码和编译程序之间的区别。 源代码是编译器用来生成最终产品的东西。 同样，Hugo 获取这些目录的内容并生成一个工作网站。
我们将要运行的命令将创建一个与您要创建的站点同名的目录。 该目录将在您运行命令的目录中创建。
因此，请移至要在其中创建网站的目录。 我们正在使用我们的主目录，所以我们输入以下内容：
雨果新网站极客演示
这将创建一个“geek-demo”目录。 我们键入以下内容以切换到该目录并运行ls ：
cd极客演示/
ls
我们看到“config.toml”配置文件和已创建的目录。 但是，这些实际上是空的，因为这只是网站的脚手架。
初始化 Git 并添加主题
我们需要添加一个主题，以便 Hugo 知道我们希望完成的站点是什么样子。 为此，我们必须初始化 Git。 在站点的根文件夹（包含“config.toml”文件的文件夹）中，运行以下命令：
混帐初始化
您可以选择数百个主题，每个主题都有一个描述它的网页。 您可以运行一个主题的演示并找出下载它的命令。 我们将使用一个名为 Meghna 的产品。
要将主题合并到我们的网站中，我们需要切换到“主题”文件夹并运行git clone命令：
光盘主题
git 克隆 https://github.com/themefisher/meghna-hugo.git
Git 在执行过程中会显示一些消息。 完成后，我们使用ls查看包含主题的目录：
ls
Hugo 主题包括一个工作示例网站。 您必须将该默认站点复制到您网站的目录中。
首先，返回您网站的根目录。 我们使用-r （递归） cp选项来包含子目录，并使用-f （强制）选项来覆盖任何现有文件：
光盘..
cp 主题/meghna-hugo/exampleSite/* -rf 。
在本地启动您的网站
我们已经做的足够多，可以在本地启动一个新网站。 它仍将包含占位符文本和图像，但这些只是表面上的更改。 让我们首先验证技术位是否有效。
我们告诉 Hugo 运行它的 web 服务器并使用-D (draft) 选项来确保任何可能被标记为“draft”的文件都包含在网站中：
雨果服务器-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”——我们可以看到前面的内容。
我们需要复制该部分，编辑当前条目以便将其用作原型模板，然后将其保存在“Archetypes”文件夹中。 如果我们将其命名为“blog.md”，它将自动用作新博客条目的模板。
在gedit中，我们可以这样做：
gedit 内容/英文/博客/simple-blog-post-1.md
突出显示包括两条虚线的顶部，然后按 Ctrl+C 复制它。 按 Ctrl+N 开始一个新文件，然后按 Ctrl+V 粘贴您复制的内容。
现在，进行以下更改，并确保在每行的冒号 (:) 后留一个空格：
- 标题：将其更改为
"{{ replace .Name "-" " " | title }}"（包括引号）。 每个新博客文章的标题都会自动插入。 正如我们将看到的，它由您传递给hugo new命令的文件名组成。 - 日期：将其更改为
{{ .Date }}。 将自动输入创建博客的日期和时间。 - Image_webp：这是指向 webp 格式的博客标题图像的路径。 如果主题找不到，它将使用下一行中的图像。
- 图像：这是 JPEG 格式的博客标题图像的路径。 您不妨将这些指向默认图像。 然后，所有博客文章都会有一个权宜之计图片，甚至在您找到、调整大小或保存自定义图片之前。 完成此操作后，您可以轻松地编辑文件名以匹配您的自定义图像。
- 作者：把这个改成你的名字。
- 描述：您在此处键入每个帖子的简短描述。 如果您将其更改为空字符串 (
"")，您可以为每个新博客键入描述，而无需编辑旧文本。
将这个新文件保存为“archetypes/blog.md”，然后关闭gedit 。 每当你想创建一个新的博客条目时，Hugo 现在都会使用这个新的原型。
请注意，我们的文件应该有一个“.md”扩展名，因为我们将使用 markdown 来编写我们的博客条目：
雨果新博客/first-new-blog-post-on-this-site.md
现在，我们想在编辑器中打开我们的新博客条目：
gedit 内容/english/blog/first-new-blog-post-on-this-site.md
我们的新博文在gedit中打开。
已为我们添加了以下所有头条内容：
- 标题：这是从文件名推导出来的。 如果需要任何调整，您可以在此处进行编辑。
- 时间和日期：这些是自动添加的。
- 默认图片：您可能希望找到相关的免版税图片。 将其放入静态 > 图像 > 博客。 您必须在此处输入图像的实际文件名。
- 作者：你的名字是自动添加的。
- 说明：已编辑。
使用 markdown 编写博客，并对标题、粗体、斜体、图像、链接等使用标准标记。 每次保存文件时，Hugo 都会重建网站并在浏览器中更新。
下图显示了我们的新博客条目在主页上的显示方式。
下图显示了新博客条目在其自己的页面上的外观。
写完博客文章后，保存更改，然后关闭编辑器。 您也可以关闭浏览器，因为我们将停止 Hugo 服务器。
在运行 Hugo 服务器的终端窗口中，按 Ctrl+C。
建立网站
在您网站的根目录中，发出以下命令来构建您的网站：
雨果
Hugo 构建了网站并列出了它创建的页面数量和其他组件。 创建我们的需要 134 毫秒。
Hugo 在您网站的根目录中创建了一个名为“Public”的新目录。 在“Public”目录中，您会找到需要传输到托管平台的所有文件。
请注意，您必须将“公共”目录中的文件和目录上传到您的托管平台，而不是“公共”目录本身。
现在你知道了基础知识
每个主题都需要进行一些探索才能弄清楚如何让它看起来像你想要的那样，但这就是有趣的部分！ 鉴于 Hugo 能够在浏览器窗口中立即呈现更改，没有什么需要太长时间。
您可能会发现编写文本以及查找和修剪图像是该过程中耗时最长的部分。
Hugo 文档站点也很有帮助，但内容广泛。 希望这个基本的演练足以让您入门。
如果您使用 Git 和 Github、GitLab 或 BitBucket，也有适用于这些平台的集成。 他们监视您的远程 Hugo 存储库并在您向其推送更改时重建您的实时站点。