快速上手

学习在几分钟内创建一个 Hugo FixIt 站点。

在本教程中，你将学会：

1. 创建站点
2. 添加内容
3. 配置站点
4. 发布站点

先决条件

在开始本教程之前，你必须安装：

1. Hugo（扩展版，v0.161.0 或更高版本）
2. Dart Sass
3. Git

你还必须熟悉使用命令行。

创建网站

命令

验证你是否安装了 Hugo v0.161.0 或更高版本。

1

hugo version

运行以下命令来创建一个带有 FixIt 主题的 Hugo 网站。下一节将对每个命令进行解释。

1
2
3
4
5
6
7

hugo new site my-blog
cd my-blog
git init
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
echo "theme = 'FixIt'" >> hugo.toml
echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml
hugo server

通过终端中显示的 URL 查看你的站点。按 Ctrl + C 停止 Hugo 的开发服务器。

命令解释

在 my-blog 目录中为你的项目创建 目录结构骨架。

1

hugo new site my-blog

将当前目录更改为项目的根目录。

1

cd my-blog

在当前目录中初始化一个空的 Git 存储库。

1

git init

将 FixIt 主题作为 Git 子模块 添加到你的项目中的 themes 目录。

1

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

在站点配置文件中添加一行，指定当前主题。

1

echo "theme = 'FixIt'" >> hugo.toml

在站点配置文件中添加一行，指定默认的内容语言。

1

echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml

启动 Hugo 的开发服务器以查看站点。

1

hugo server

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

必要配置

为了能完整地使用 FixIt 主题的所有功能，务必在站点配置文件中添加以下内容。

1
2
3
4
5
6
7
8

[markup]
_merge = "shallow"

[outputs]
_merge = "shallow"

[taxonomies]
_merge = "shallow"

以上配置表示继承 FixIt 主题的 markup，outputs 和 taxonomies 配置。

添加内容

给你的网站添加新页面。

1

hugo new content posts/my-first-post.md

Hugo 在 content/posts 目录中创建了该文件，使用编辑器打开文件。

1
2
3
4
5
6

---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

请注意，front matter 中的 draft 值为 true。默认情况下，Hugo 在你构建网站时不会发布草稿内容。详细了解 草稿、未来和过期内容。

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

1
2
3
4
5
6
7
8

---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

博客（英语：Blog）是一种在线日记型式的个人网站，借由张帖子章、图片或视频来记录生活、抒发情感或分享信息。博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。

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

1
2
3

hugo server --buildDrafts
hugo server -D
hugo server -D --disableFastRender

由于本主题使用了 Hugo 中的 .Store 来实现一些特性， 非常建议你为 hugo server 命令添加 --disableFastRender 参数来实时预览你正在编辑的文章页面。

当对新内容感到满意时，将 front matter 中的 draft 值更改为 false，然后保存文件。

Favicon 生成

强烈建议你把你自己的网站图标，browserconfig.xml 和 site.webmanifest 文件放在 /static 目录。

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• browserconfig.xml
• favicon-32x32.png
• favicon-16x16.png
• favicon.ico
• mstile-150x150.png
• safari-pinned-tab.svg

利用 https://realfavicongenerator.net/ 可以很容易地生成这些文件。

发布网站

在此步骤中，你将发布你的网站，但不会 部署 它。

当你发布站点时，Hugo 在项目根目录的 public目录中创建整个静态站点。这包括 HTML 文件以及图像、CSS 文件和 JavaScript 文件等资源。

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

1

hugo

我们的大多数用户使用 CI/CD 工作流程部署他们的网站，通过推送¹到他们的 GitHub 或 GitLab 存储库会触发构建和部署。流行的提供商包括 Vercel²、Netlify³、AWS Amplify、CloudCannon、Cloudflare Pages、 GitHub pages 和 GitLab pages。

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

文档指南

我们强烈建议你花少量时间完整阅读 FixIt 主题的文档，以便你更好地了解如何使用它。

寻求帮助

如果你遇到问题或有任何疑问，请前往我们的 社区 寻求帮助。