实例讲解如何使用Hugo框架搭建静态网站

实例讲解如何使用Hugo框架搭建静态网站

引用

CSDN

1.

https://blog.csdn.net/weixin_44026962/article/details/135590863

Hugo是目前最受欢迎的静态网站生成器之一，它以其超快的构建速度和强大的模板功能而闻名。本文将手把手教你如何使用Hugo框架搭建一个静态网站，从环境配置到内容管理，再到最终的网站部署，让你轻松掌握这一强大工具。

Hugo网站主页

什么是Hugo框架？为什么它很受欢迎？

Hugo静态网站生成器最初由Steve Francia在2013年开发，自2015年起由Bjørn Erik Pedersen担任首席开发者。作为一个开源项目，任何人都可以查看和改进其代码。

作为一个静态网站生成器，Hugo接收Markdown内容文件，通过主题模板运行，并生成HTML文件，这些文件可以很容易地在网上部署，而且处理速度非常快。

在众多静态网站生成器中，Hugo脱颖而出的原因如下：

• 速度极快：Hugo在性能方面遥遥领先，比Jekyll快35倍，渲染10,000页网站仅需10秒，而Gatsby则需要半个多小时。此外，Hugo的安装也非常迅速，无需依赖包管理器。

• 模板化简单：Hugo使用Go的内置html/template和text/template库进行模板处理，减少了应用程序的臃肿，因为不需要为模板安装第三方库。

如何安装Hugo框架

Hugo支持MacOS、Windows和Linux系统，以独立的可执行文件形式提供，无需下载和管理大量依赖关系。

MacOS和Linux安装

推荐使用Homebrew软件包管理器进行安装。如果尚未安装Homebrew，可以运行以下命令进行安装：

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

安装Homebrew后，运行以下命令安装Hugo：

brew install hugo

Windows安装

Windows用户可以使用Chocolatey或Scoop软件包管理器进行安装。安装完成后，可以使用以下命令安装Hugo：

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

验证安装

要验证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版本

Hugo配置文件

Hugo的配置文件支持YAML、TOML和JSON格式。配置文件通常命名为config.yml、config.toml或config.json，位于Hugo项目的根目录下。

下面是一个典型的YAML格式的Hugo配置文件示例：

DefaultContentLanguage: en
theme:
- wbolt-static-site
contentdir: content
layoutdir: layouts
publishdir: public
paginate: 5
title: Wbolt Static Site
description: "This is a static site generated with Hugo!"
permalinks:
post: :slug/
page: :slug/
tags: "tag/:slug/"
author: "author/:slug/"

如何创建一个Hugo网站

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

要创建一个Hugo站点，可以使用以下命令（可以根据需要更改my-hugo-site为其他名称）：

hugo new site my-hugo-site

创建站点后，导航到网站文件夹，你会看到以下文件和文件夹：config.toml文件、archetypes文件夹、content文件夹、layouts文件夹、themes文件夹、data文件夹和static文件夹。让我们快速浏览一下这些文件和文件夹：

• config.toml文件：包含网站的全局设置。
• Archetypes文件夹：用于存储Markdown格式的内容模板。如果你的网站有多种内容格式，archetype就特别有用。
• Content文件夹：存储真正的帖子内容，支持Markdown和HTML格式。
• Layouts文件夹：包含定义网站结构的HTML文件。
• Themes文件夹：用于存储主题相关的文件。
• Data文件夹：用于存储生成网站页面所需的补充数据。
• Static文件夹：用于存储不需要额外处理的静态资产。

如何向Hugo网站添加主题

下载并安装一个预制的主题是开始使用Hugo的一个好方法。让我们继续，在我们的Hugo网站上安装流行的Hyde主题。

首先，在终端导航到你项目的主题文件夹：

cd <hugo-project-directory>/themes/

接下来，使用Git将Hyde主题克隆到你项目的themes目录中：

git clone https://github.com/spf13/hyde.git

然后，在你的config.toml文件中添加以下一行来激活Hyde主题：

theme = "hyde"

如何预览一个Hugo网站

Hugo提供了一个集成的网络服务器，用于开发目的。要启动Hugo的网络服务器，请在你项目的根目录下运行以下命令：

hugo server -D

然后，Hugo将建立你的网站的页面，并使它们在http://localhost:1313/可用。

如何向Hugo网站添加内容

在Hugo中，没有内置的CMS层来管理内容。相反，你需要按照自己的方式来管理和组织内容。

Hugo的内容部分

在Hugo中，你可以使用内容版块来组织内容。例如，你可以创建一个posts文件夹来存储博客文章。

如何在Hugo中添加文章

在content文件夹中创建一个名为posts的新文件夹。然后，可以使用以下命令创建一个新的帖子：

hugo new posts/2021/2021-08-30-a-sample-post.md

这将创建一个Markdown文件，其中包含一些自动生成的元数据（front matter），例如：

---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---

如何在Hugo中添加一个页面

要创建一个页面，可以在content文件夹中创建一个名为pages的文件夹。然后，使用以下命令添加一个新的“About”页面：

hugo new pages/about.md

自定义网站

如何改变网站标题和描述

在Hyde主题的情况下，网站标题和描述可以在Hugo配置文件（config.toml）中改变。例如：

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Wbolt's Hugo Site"
theme = "hyde"
[params]
description = "Wbolt is a premium managed WordPress hosting company."

如何从文章Feed中删除页面

要改变这种行为，你需要编辑index.html模板中的range函数。例如：

{{ define "main" -}}
<div class="posts">
{{- range where .Site.RegularPages "Section" "posts" -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}

如何在Hugo中使用参数和短代码

参数

参数允许在不同的模板文件中重复使用代码。例如，在Ananke主题的baseof.html文件中，可以看到一个局部文件的例子：

{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" >
{{ end }}
{{ range site.Params.custom_css }}
{{ with partialCached "func/style/GetResource" . . }}{{ else }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}
{{ end }}

短代码

短代码是存放在/layouts/shortcodes文件夹中的HTML文件。例如，创建一个current_year.html短代码：

{{ now.Format "2006" }}

然后可以在文章中使用：

This post was created in the year {{< current_year >}}.

如何在Hugo中向帖子添加图片

设计一个图片管理系统的任务就落在了最终用户身上。一种流行的方法是将图片存储在/static文件夹中，并在文章和页面中使用短码来引用它们。

例如，创建一个img.html短码：

<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}">

然后在文章中使用：

{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}}

如何部署一个Hugo网站

本地生成网站

要完整地生成网站，可以在项目根目录下使用hugo命令。生成完成后，你会在项目目录中看到一个新的public文件夹。

使用GitHub和Netlify自动部署

1. 在GitHub上创建一个新的仓库，并将项目文件移动到该仓库中。
2. 在Netlify仪表板上点击New site from Git，选择GitHub作为持续部署源。
3. 搜索并选择你的Hugo项目仓库。
4. 配置构建命令为hugo，公共目录为public，然后点击Deploy Site。

部署完成后，你可以在Netlify的仪表板上看到一个暂存的URL。点击这个URL来查看部署的网站。

小结

Hugo以其超快的构建速度和强大的模板功能而闻名。通过本教程，你学会了如何配置Hugo，创建一个新项目，添加内容文件，编辑主题文件，并部署一个完成的静态网站。建议阅读Hugo的官方文档，以了解更多关于Hugo及其更高级的功能，如自定义函数、前台事务和CSS/JS buildpacks。