Hugo快速入门

学习创建一个 Hugo 网站。

Hugo快速入门(Windows)

学习在几分钟内创建一个 Hugo 网站。 在本教程中,您将:

创建站点 添加内容 配置站点 发布网站 先决条件

参考内容

在开始本教程之前,必须

  • 安装 Hugo(扩展版,v0.112.0 或更高版本)
  • 安装 Git
  • 您还必须能够自如地从命令行工作。

创建站点

如果您是 Windows 用户:

  • 不要使用命令提示符
  • 不要使用 Windows PowerShell
  • 从 PowerShell 或 Linux 终端(如 WSL 或 Git Bash)运行这些命令 PowerShell 和 Windows PowerShell 是不同的应用程序。

验证您是否已安装 Hugo v0.112.0 或更高版本。hugo version

c:\hugo\Sites\afeiroom>hugo version
hugo v0.125.1-68c5ad638c2072969e47262926b912e80fd71a77+extended windows/amd64 BuildDate=2024-04-18T08:21:19Z VendorInfo=gohugoio

运行这些命令以创建具有 stack 主题的 Hugo 站点,站点名称为 afeiroom。

c:\hugo\Sites>hugo new site afeiroom		# 创建 afeiroom 站点项目
Congratulations! Your new Hugo site was created in c:\hugo\Sites\afeiroom.
……
c:\hugo\Sites>cd afeiroom			# 进入站点项目文件夹

c:\hugo\Sites\afeiroom>git init			# 初始化一个空的git本地仓库
Initialized empty Git repository in C:/hugo/Sites/afeiroom/.git/

在 master 分支上,您可以找到主题的最新源代码。要使用最新版本,您可以通过在 Hugo 站点的根目录中运行以下命令来克隆存储库:themes/hugo-theme-stack

注意:拉取主题前,先关掉 翻墙代理,不然 git 总是连接错误。

# stack 主题设置感觉好麻烦,暂时不用这个了!!!
c:\hugo\Sites\afeiroom>git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack	# 去官网拉取stack主题
Cloning into 'themes/hugo-theme-stack'...
remote: Enumerating objects: 5065, done.
remote: Counting objects: 100% (336/336), done.
remote: Compressing objects: 100% (197/197), done.
remote: Total 5065 (delta 185), reused 245 (delta 132), pack-reused 4729
Receiving objects: 100% (5065/5065), 1.23 MiB | 2.12 MiB/s, done.
Resolving deltas: 100% (3226/3226), done.

如果您已经在为您的站点使用 Git,您可以通过在 Hugo 站点的根目录中运行以下命令将主题添加为子模块:

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

# 拉取 relearn z主题到站点 themes/hugo-theme-relearn 文件夹下
C:\hugo\Sites\afeiroom>git clone https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn
Cloning into 'themes/hugo-theme-relearn'...
remote: Enumerating objects: 529211, done.
remote: Counting objects: 100% (268379/268379), done.
remote: Compressing objects: 100% (8080/8080), done.
remote: Total 529211 (delta 260515), reused 267938 (delta 260184), pack-reused 260832
Receiving objects: 100% (529211/529211), 374.98 MiB | 1.52 MiB/s, done.
Resolving deltas: 100% (326161/326161), done.

在站点配置文件中追加一行,指示当前主题。echo theme = ‘hugo-theme-relearn’ » hugo.toml

c:\hugo\Sites\afeiroom>echo theme = 'hugo-theme-relearn' >> hugo.toml

启动 Hugo 的开发服务器以查看站点。hugo server -D

c:\hugo\Sites\afeiroom>hugo server -D
Watching for changes in c:\hugo\Sites\afeiroom\{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in c:\hugo\Sites\afeiroom\hugo.toml, c:\hugo\Sites\afeiroom\themes\hugo-theme-stack\config.yaml
Start building sites …
hugo v0.125.1-68c5ad638c2072969e47262926b912e80fd71a77+extended windows/amd64 BuildDate=2024-04-18T08:21:19Z VendorInfo=gohugoio


                   | EN
-------------------+-----
  Pages            |  8
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  1
  Aliases          |  3
  Cleaned          |  0

Built in 242 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

用浏览器打开 http://localhost:1313/ 就可以在本地浏览默认的页面了。

按下可停止 Hugo 的开发服务器。Ctrl + C

添加内容

将新页面添加到您的网站。hugo new content posts/my-first-post.md

C:\hugo\Sites\afeiroom>hugo new content posts/my-first-post.md
Content "C:\\hugo\\Sites\\afeiroom\\content\\posts\\my-first-post.md" created

Hugo 在目录content/posts中创建了my-first-post.md文件 。使用编辑器打开该文件。

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

请注意,前面的值是 draft = true。默认情况下,Hugo 不会在您构建网站时发布草稿内容。详细了解草稿内容、未来内容和过期内容。

在帖子正文中添加一些 Markdown,但不要更改draft值。

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

保存文件,然后启动 Hugo 的开发服务器查看站点。您可以运行以下任一命令以包含草稿内容。

hugo server --buildDrafts
hugo server -D

在终端中显示的 URL 中查看您的站点。在继续添加和更改内容时,使开发服务器保持运行。

如果对新内容感到满意,请将 front matter 参数设置为 。draftfalse

Hugo 的渲染引擎符合 Markdown 的 CommonMark 规范。CommonMark组织提供了一个有用的实时测试工具,由参考实现提供支持。

配置站点

使用编辑器,打开项目根目录中的网站配置文件 (hugo.toml)。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

进行以下更改:

为您的生产站点设置baseURL。此值必须以协议开头,以斜杠结尾,如上所示。

设置languageCode为您的语言和地区。

为您的生产站点设置title

启动 Hugo 的开发服务器以查看您的更改,记住包含草稿内容。

hugo server -D

大多数主题作者都提供配置指南和选项。有关详细信息,请务必访问主题的存储库或文档站点。 New Dynamic是Ananke主题的作者,提供配置和使用的文档。他们还提供了一个示范点。

发布网站

在此步骤中,您将发布站点,但不会部署它。

当您发布站点时,Hugo 会在项目根目录中的目录中创建整个静态站点。这包括 HTML 文件和资产,例如图像、CSS 文件和 JavaScript 文件。public

发布网站时,通常不希望包含草稿、未来或过期内容。命令很简单。

hugo

若要了解如何部署站点,请参阅托管和部署部分。

寻求帮助

Hugo 的论坛是一个由用户和开发人员组成的活跃社区,他们回答问题、分享知识并提供示例。快速搜索超过 20,000 个主题通常可以回答您的问题。在提出第一个问题之前,请务必阅读有关请求帮助的信息。

其他资源

有关帮助您学习 Hugo 的其他资源,包括书籍和视频教程,请参阅外部学习资源页面。