快速上手

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

在本教程中,你将学会:

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

先决条件

技巧
如果这是你第一次使用 Hugo,我们强烈建议你通过阅读这篇 入门文档 来更多地了解它。

在开始本教程之前,你必须:

  1. 安装 Hugo(扩展版,v0.112.0 或更高版本)
  2. 安装 Git

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

创建网站

命令

验证你是否安装了 Hugo v0.112.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 的开发服务器。

添加内容

给你的网站添加新页面。

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 中的 .Scratch.Store 来实现一些特性, 非常建议你为 hugo server 命令添加 --disableFastRender 参数来实时预览你正在编辑的文章页面。

基本配置下的预览
基本配置下的预览

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

注意
Hugo 的渲染引擎符合 Markdown 的 CommonMark 规范
除此之外,FixIt 主题还支持一些 扩展 Markdown 语法

发布网站

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

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

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

1
hugo

我们的大多数用户使用 CI/CD 工作流程部署他们的网站,通过推送1到他们的 GitHub 或 GitLab 存储库会触发构建和部署。流行的提供商包括 Vercel2Netlify3AWS AmplifyCloudCannonCloudflare PagesGitHub pagesGitLab pages

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

寻求帮助

所有的反馈都是欢迎的!详见 议题讨论 或者加入 QQ 群:814031017


  1. Git 存储库包含整个项目目录,通常不包括 public 目录,因为站点是在推送后构建的。 ↩︎

  2. 如何使用 Vercel 部署 Hugo 站点 ↩︎

  3. 在 Netlify 上部署 Hugo ↩︎

相关内容

Buy me a coffee~
Lruihao 支付宝支付宝
Lruihao 微信微信
0%