营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

Hugo 是用 Go(又名 Golang)编写的静态站点生成器 (SSG),Go(又名 Golang)是一种高性能编译编程语言,通常用于开发后端应用程序和服务。

今天,Hugo 能够在几秒钟内生成大多数网站(每页 <1 毫秒)。 这就解释了为什么 Hugo 将自己标榜为“世界上最快的网站构建框架”。

在本文中,我们将了解 Hugo 的历史、是什么让它如此之快,以及如何开始构建自己的 Hugo 静态站点。

什么是雨果? 为什么它很受欢迎?

Hugo 主页的屏幕截图。
Hugo 的网站主页。

Steve Francia 最初于 2013 年开发了 Hugo 静态站点生成器,Bjørn Erik Pedersen 于 2015 年接任该项目的首席开发人员。 Hugo 是一个开源项目,这意味着任何人都可以查看和改进其代码。

作为一个静态站点生成器,Hugo 获取 Markdown 内容文件,通过主题模板运行它们,并生成您可以轻松在线部署的 HTML 文件——并且它非常快速地完成所有这些。

到 2021 年,将有数十个(如果不是数百个)静态生成器。 每个静态站点生成器都有其吸引力。 Jekyll 在 Ruby 开发人员中很受欢迎,虽然它不如其他选项快,但它是最早被广泛采用的静态站点生成器之一。 Gatsby 是另一种流行的 SSG,非常适合开发功能动态的静态可部署站点。

那么,有这么多 SSG,是什么让 Hugo 脱颖而出?

Hugo 将自己标榜为“世界上最快的网站构建框架”⚡️ 所以如果您正在寻找一种快速构建静态网站的方法,请从这里开始 ⬇️点击推文

雨果很快

就原始性能而言,Hugo 是世界上最好的静态站点生成器。 与 Jekyll 相比,Forestry 显示 Hugo 的速度快了 35 倍。 类似地,Hugo 可以在 10 秒内渲染一个 10,000 页的网站,而 Gatsby 需要半个多小时才能完成这项任务。 Hugo 不仅在构建时间方面是最快的 SSG,而且安装速度也很快。

Hugo 作为一个独立的可执行文件发布,不像 Jekyll、Gatsby 和其他需要使用包管理器安装依赖项的 SSG。 这意味着您可以立即下载和使用 Hugo,而无需担心软件依赖性。

在 Hugo 中模板化很容易

在 SSG 行话中,“模板化”是指在 HTML 页面中为动态内容插入添加占位符的过程。 要访问页面的标题,您可以使用 {{ .Title }} 多变的。 因此,在 Hugo HTML 模板中,通常会看到 {{ .Title }} 包裹在 H1 标签中,如下所示:

<h1>{{ .Title }}</h1>

在构建时,Hugo 会自动抓取内容文件中的标题并在两者之间插入标题 <h1> 标签。 Hugo 具有多种内置模板变量,您甚至可以编写自定义函数来在构建时处理数据。 对于模板,Hugo 使用 Go 的内置 html/templatetext/template 图书馆。 这有助于减少应用程序膨胀,因为 Hugo 不需要为模板安装第三方库。

这是一个例子 index.html 来自流行的 Ananke 主题的主页模板。 如您所见,它类似于带有一些附加模板代码的标准 HTML 文件:

TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

如何安装雨果

Hugo 作为编译后的可执行文件发布,这意味着您无需下载和管理许多依赖项即可开始使用。 它适用于 macOS、Windows 和 Linux。

如何在 macOS 和 Linux 上安装 Hugo

macOS 和 Linux 的推荐安装方法需要 Homebrew,一个用于安装和更新应用程序的包管理器。 如果您还没有安装 Homebrew,您可以通过在终端中运行以下命令来安装它:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装 Homebrew 后,运行以下命令安装 Hugo:

brew install hugo

如何在 Windows 上安装 Hugo

对于 Windows 用户,可以使用 Chocolatey 或 Scoop 包管理器安装 Hugo。 由于安装 Chocolatey 和 Scoop 的说明比 Homebrew 复杂一些,我们建议在此处和此处参考他们的官方文档页面。

安装 Chocolatey 或 Scoop 后,您可以使用以下命令之一(取决于您的包管理器)安装 Hugo:

choco install hugo-extended -confirm
scoop install hugo-extended

如何验证 Hugo 是否正确安装

要验证 Hugo 是否已正确安装,请运行以下命令:

hugo version

此终端命令应输出有关当前安装的 Hugo 版本的信息,如下所示:

hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Hugo 命令和配置

在我们开始使用 Hugo 创建静态站点之前,让我们先熟悉一下它的各种 CLI 命令和配置文件参数。

Hugo CLI 命令

  • hugo check – 运行各种验证检查
  • hugo config – 显示 Hugo 站点的配置
  • hugo convert – 将内容转换为不同的格式
  • hugo deploy – 将您的站点部署到云提供商
  • hugo env – 显示 Hugo 版本和环境信息
  • hugo gen – 提供对各种发电机的访问
  • hugo help – 显示有关命令的信息
  • hugo import – 允许您从其他位置导入站点
  • hugo list – 显示各种内容类型的列表
  • hugo mod – 提供对各种模块帮助程序的访问
  • hugo new – 让您为您的网站创建新内容
  • hugo server – 启动本地开发服务器
  • hugo version – 显示当前的 Hugo 版本
WordPress花园建议你也读一下这篇文章  重要提示和最佳实践 [Podcast]

Hugo CLI 还具有多种标志来指定某些命令的附加选项。 要查看完整的 Hugo 标志列表(有很多),我们建议使用 hugo help 命令显示所有可用标志的列表。

Hugo 配置文件

Hugo 的配置文件支持三种格式:YAML、TOML 和 JSON。 同样,Hugo 配置文件是 配置文件, 配置文件, 或者 配置文件, 你可以在一个 Hugo 项目的根目录中找到它。

Hugo 配置文件的图像
雨果配置文件。

YAML 格式的典型 Hugo 配置文件如下所示:

DefaultContentLanguage: en

theme:

- kinsta-static-site

contentdir: content

layoutdir: layouts

publishdir: public

paginate: 5

title: Kinsta Static Site

description: "This is a static site generated with Hugo!"

permalinks:

post: :slug/

page: :slug/

tags: "tag/:slug/"

author: "author/:slug/"

如果您以前使用过 WordPress 或其他 CMS,那么您可能会觉得某些配置选项很熟悉。 例如, kinsta-static-site 是网站主题的名称, Kinsta Static Site 是 SEO 元标题,并且 paginate (每页的帖子数)是 5.

Hugo 有数十种配置选项,您可以在 Hugo 官方文档中探索所有这些选项。 如果您在开发 Hugo 站点时需要进行任何全局配置更改,您很可能需要编辑此配置文件。

如何创建一个雨果网站

现在我们已经了解了如何安装和使用 Hugo CLI 以及 Hugo 配置文件的基础知识,让我们创建一个新的 Hugo 站点。

要创建 Hugo 站点,请使用以下命令(随意更改 我的雨果网站 如果您愿意,可以转到其他内容):

hugo new site my-hugo-site

创建一个新的 Hugo 静态站点
创建一个新的 Hugo 站点。

接下来,导航到站点文件夹,您应该会看到以下文件和文件夹: 配置文件 文件, 原型 文件夹, 内容 文件夹, 布局 文件夹, 主题 文件夹, 数据 文件夹,和 静止的 文件夹。 让我们快速浏览一下这些文件和文件夹是什么。

Hugo 的 config.toml 文件

正如我们在上面强调的,Hugo 的主要配置文件包含您站点的全局设置。

Hugo 的原型文件夹

原型 文件夹是您存储 Markdown 格式的内容模板的地方。 如果您的站点具有多种内容格式,则原型特别有用。 使用 Hugo 原型,您可以为网站上的每种内容类型创建模板。 这使您可以使用所有必要的配置设置预填充生成的 Markdown 文件。

例如,如果您有一个 播客 用于显示您的播客剧集的内容类型,您可以在 archetypes/podcast.md 内容如下:

---

title: "{{ replace .Name "-" " " | title }}"

date: {{ .Date }}

description: ""

season:

episode:

draft: true

---

使用此播客原型,您可以使用以下命令创建新帖子:

hugo new podcast/s1e6_interview-with-kinsta-ceo.md

现在,如果您打开新创建的帖子,您应该会看到:

---

title: "Interview with Kinsta CEO"

date: 2021-05-20T13:00:00+09:00

description: ""

Season: 1

episode: 6

draft: true

---

如果没有原型,您将不得不为您创建的每个新帖子手动指定前端参数。 虽然原型起初可能看起来很复杂且不必要,但从长远来看,它们最终可以为您节省大量时间。

Hugo 的内容文件夹

内容 文件夹是您的实际帖子内容所在的位置。 Hugo 支持 Markdown 和 HTML 格式,Markdown 因其易用性而成为更受欢迎的选择。 除了作为帖子的一般存储空间外,您还可以使用 内容 文件夹以进一步组织帖子内容。

Hugo 对待每个顶级目录中的 内容 文件夹作为内容部分。 Hugo 中的内容部分类似于 WordPress 中的自定义帖子类型。 例如,如果您的站点有帖子、页面和播客,则您的内容文件夹将包含 帖子, , 和 播客 这些不同帖子类型的内容文件所在的目录。

Hugo 的布局文件夹

布局 文件夹包含定义站点结构的 HTML 文件。 在某些情况下,您可能会看到一个没有 布局 文件夹,因为它不必位于项目的根目录中,而是可以驻留在主题文件夹中。

与使用 PHP 进行模板化的 WordPress 主题类似,Hugo 模板由基本 HTML 和由 Golang 内置的附加动态模板组成 html/templatetext/template 图书馆。 生成站点 HTML 标记所需的各种 HTML 模板文件位于 布局 文件夹。

Hugo 的主题文件夹

对于更喜欢以独立方式存储模板文件和资产的站点,Hugo 支持 主题 文件夹。 Hugo 主题与 WordPress 主题相似,因为它们存储在主题目录中并包含主题运行所需的所有模板。

虽然一些 Hugo 用户更喜欢将与主题相关的文件保存在项目的根目录中,但将这些文件存储在 主题 文件夹允许更容易的管理和共享。

雨果数据文件夹

雨果的 数据 文件夹是您可以存储生成站点页面所需的补充数据(JSON、YAML 或 TOML 格式)的位置。 数据文件适用于较大的数据集,因为这些数据集直接存储在内容或模板文件中可能很麻烦。

例如,如果您想创建一个从 1960 年到 2020 年的美元通货膨胀率列表,则需要大约 80 行来表示数据(每年一行)。 无需将此数据直接放在内容或模板文件中,您可以在 数据 文件夹并用必要的信息填充它。

WordPress花园建议你也读一下这篇文章  SEO经理做什么的? | 博客

雨果静态文件夹

雨果的 静止的 文件夹是您存储不需要任何额外处理的静态资产的地方。 这 静止的 文件夹通常是 Hugo 用户存储图像、字体、DNS 验证文件等的地方。 当一个 Hugo 站点生成并保存到一个文件夹中以便于部署时,该站点中的所有文件 静止的 文件夹按原样复制。

如果您想知道为什么我们没有提到 JavaScript 或 CSS 文件,那是因为它们通常在站点开发期间通过管道进行动态处理。 在 Hugo 中,JavaScript 和 CSS 文件通常存储在 主题 文件夹,因为它们需要额外的处理。

如何为 Hugo 站点添加主题

下载和安装预制主题是开始使用 Hugo 的好方法。 Hugo 主题有各种形状和大小,其中许多可在…

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com