hugo 的优势
- 构建速度真的很快
- 使用 LiveReload 明显可以感觉受到，基本每次保存就马上刷新
- 修改大多数文件都可以直接预览，hexo 和 jekyll 都需要重启 server
- 主题多
- 但是写法和 hexo 与 jekyll 相差比较大，上手可能会比较慢
- 基础功能直接集成
- 网站地图
- 别名重定向
- 阅读分钟、字数统计
- Disqus
- 谷歌分析
- RSS
- 多语言官方文档比较详细
- 其他大家都有的优势
- 跨系统，支持 macOS、Windows、Linux
- 在很多平台托管网站：gitlab、github、Netlify、AWS、Azure、Cloudflare
安装 Hugo
- MacOS 安装过程需要使用
终端.app可在启动器中找到 - Windows 安装过程需要使用
cmd可Win + R键入 cmd 启动 cmd （也可以使用 PowerShell）
检查 hugo 是否安装
安装完后检查安装版本（有即是安装成功）
hugo version
&返回信息每个人电脑可能略有不同 hugo v0.117.0+extended darwin/amd64 BuildDate=unknown VendorInfo=macports
MacOS 方式1：使用 Homebrew 进行安装
brew install hugo
MacOS 方式2：使用 MacPorts 进行安装
sudo port install hugo
MacOS 方式3：使用 go get 进行安装
go get -u -v github.com/gohugoio/hugo
Windows 方式1：使用 Chocolatey 安装
choco install hugo-extended
- 安装 Chocolatey https://chocolatey.org/
Windows 方式2：使用 Scoop 安装
scoop install hugo-extended
- 安装 Scoop https://scoop.sh/
Windows 方式3：使用 Winget 安装
winget install Hugo.Hugo.Extended
- 安装 Winget https://learn.microsoft.com/en-us/windows/package-manager/
本地快速创建站点命令脚本
- 请先安装 hugo
- 以下命令会会在终端当前路径创建一个
my1px的文件夹并开始安装hugo - 并且自动下载和使用
paper主题 - 并运行
hugo new site my1px
cd my1px
git init
git submodule add https://github.com/nanxiaobei/hugo-paper.git themes/paper
echo "theme = 'paper'" >> hugo.toml
hugo server
本地创建站点项目
- 便于管理请先在终端进入特定目录
- 下面命令中的 my1px 是创建站点项目的文件夹名字，可以修改
hugo new site my1px
&返回以下信息表示安装成功 Congratulations! Your new Hugo site is created in…
安装主题
先初始化 git
git init
然后可以去 Github：hugo-theme 找一个喜爱的主题，下面以 为例，进行安装
可以直接复制 Code 按钮里面的 .git 地址或者提取主题页面 README.md 文档中的 git clone 链接，替换下面的 git 链接
git submodule add https://github.com/kishaningithub/hugo-creative-portfolio-theme.git themes/ananke
&下载完后会返回以下类似内容（最后一行） Resolving deltas: 100% (343/343), done.
配置主题参数
config.toml 文件中存放了主题的相关配置，按需调整即可
发布内容
可在 /content/posts/ 创建 .md 文档
如果目录不存在，请手动创建。
文章放在其他路径下，一般主题都不会显示
本地运行 Hugo
hugo server -D
运行成功会返回一个链接，浏览器打开链接即可看到自己的本地站点（每个人生成的链接可能略有不同） Web Server is available at http://localhost:1313/ ….
在 server 后面加 -D 会解析草稿，草稿文章在头部用draft: true注明
调试主题查看实时预览（修改后立即看效果）
hugo server --disableFastRender
Hugo 本地生成 HTML
hugo
Front Matter
Hugo 的文章、页面 支持使用 TOML、YAML、JSON 格式写 Front Matter
除了一般常用的 title data 还有很多内置的参数，以下为 hugo Front Matter 不完全参数（YAML 格式）。
---
title: "文章标题"
description: "文章的描述信息"
tags: [ "标签1", "标签2", "标签3" ]
categories: [ "分类1", "分类2" ]
keywords: [ "Hugo", "keyword" ]
date: 2023-04-06
lastmod: 2023-12-23
# CJKLanguage: Chinese, Japanese, Korean
isCJKLanguage: true
# 如果draft为true，除非使用 --buildDrafts 参数，否则不会发布文章
draft: false
# 设置文章的过期时间，如果是已过期的文章则不会发布，除非使用 --buildExpired 参数
expiryDate: 2020-01-01
# 设置文章的发布时间，如果是未来的时间则不会发布，除非使用 --buildFuture 参数
publishDate: 2020-01-01
# 排序你的文章
weight: 40
# 使用这两个参数将会重置permalink，默认使用文件名
url:
slug:
# 别名将通过重定向实现
aliases:
- 别名1
- /posts/my-original-url/
- /2010/01/01/another-url.html
# type 与 layout 参数将会改变 Hugo 寻找该文章模板的顺序，将在下一节细述
type: review
layout: reviewarticle
# 三个比较复杂的参数
taxonomies:
linkTitle:
outputs:
# 实验性的参数
markup: "md"
# 你还可以自定义任何参数，这些参数可以在模板中使用
include_toc: true
show_comments: false
---
部分信息源自： https://olowolo.com/post/hugo-quick-start/
自动生成 slug
通过修改 archetypes/default.md 中 slug 参数的值，预设我们通过 hugo new 新文章.md 命令新建文章时自动生成 slug
使用时间戳作为文章的 slug
- 缺点，同一时间创建多个文章 slug 会重复
slug: "{{ (time .Date).Unix }}"
使用文件路径文件名生成 md5 作为文章的 slug
根据路径生成 md5 ，长度为 32 位，所以不同路径相同文件名是不会重复的。
- 举例
hugo new 像素指南1px.run.md→ c992ae376e54ee77dc1db8c9011b587dhugo new test/像素指南1px.run.md→ 86a2881f399837db73cb2bad9ae4b876
slug: {{ .UniqueID }}
32位太长减小长度
根据路径生成 md5 默认有32位，以下代码默认取前6位，这样做虽然 slug 重复的概率还是极小，但是还是加大了重复的概率
slug: {{ substr (.UniqueID) 0 6 }}
使用文件路径文件名生成 md5 作为文章的 slug
- 缺点，同一时间创建多个文章如果文件名相同 slug 会重复
时间 + 文章名生成字符串后 md5 加密后取 5-12 位，则长度为8位。代码中 4 代表从第5位开始取，8表示长度 8位。
slug: {{ substr (md5 (printf "%s%s" .Date (replace .TranslationBaseName "-" " " | title))) 4 8 }}
主题模板自定义
自带 Front Matter 参数如何在模板调用
. + 参数名 的组合，参数名第一个字母必须大写，用{{ }}包含起来，如:
标题
{{ .Title }}
简介描述
{{ .Description }}
hugo 文章页面中自定义 Front Matter 如何使用在模板调用
以下示例，在 posts 文件夹中的文章的 Front Matter 新增了一个 image 参数，用作文章的封面或者内容插图。
如果有配置 image 就显示图片，如果没有配置就不添加图片
{{ if .Params.image }}
<img src="{{ .Params.image }}" alt="{{ .Title }}">
{{ else }}
{{ end }}