Hugo从零开始创建网站
大部分编写的内容不生效的情况，需要重新运行 ./hugo server 命令
静态文件放在 static 目录下
使用 hugo 创建网站一般使用其他人编写的主题；因为 hugo 原生支持的是 sass，不原生支持 Tailwind css
Hugo 中并一个没有像 Nextjs 的 global.css 的文件（global.css 用于定义应用于整个应用程序的全局 CSS 样式规则）
Hugo 的 css 是使用管道函数处理的，或者直接在模板中使用 <link></link> 引入 css 文件
创建项目
在命令行输入 ./hugo new site my_project 便在当前目录创建了 my_project 文件夹
my_project 文件夹中最重要的是 content 目录和 layouts 目录。content 目录用于放入 md 文档，layouts 目录用于编写模板文件
模板文件以 html 作为后缀名，位于 layouts 目录下。比如 layouts/home.html 用来渲染主页，layouts/404.html 用来渲染 404 页面
创建 layouts/home.html 文件：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>{{ .Site.Title }}</title>
</head>
<body>
<h1>欢迎</h1>
</body>
</html>然后在命令行输入 ./hugo server，便可访问主页 http://localhost:1313/
全局布局
全局布局通过 layouts/baseof.html 实现，baseof.html 被称为基本模板
基本模板中的 {{ block "main" . }}{{ end }} 部分会被其他模板中的 {{ define "main" }} {{ end }} 部分替换
假设有该 baseof.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>MySite</title>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>假设有该 home.html：
{{ define "main" }}
<h1>What home</h1>
{{ end }}则访问主页时，渲染出的是 baseof.html 中的 {{ block "main" . }}{{ end }} 替换为 <h1>Home</h1> 后的结果，即：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>MySite</title>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<h1>Home</h1>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>其他模板要应用基本模板必须要包含 define 部分
如果模板不包含 define 部分，则不会应用基本模板
创建md文档
在命令行输入 ./hugo new content content/posts/first.md 或者手动在 content/posts 目录下创建 first.md 文件：
+++
title = 'first'
+++
## Go
great常规内容页面会使用 layouts/page.html 渲染
创建 layouts/page.html 文件，输入如下内容：
// .Title 表示 md 文档中 front matter 中的 title 字段
// .Content 表示 md 文档的内容
{{ define "main" }}
{{ .Title }}
{{ .Content }}
{{ end }}然后便可访问网址 http://localhost:1313/posts/first
也就是说如果创建 content/a.md，那么它的路由就是 http://localhost:1313/a
taxonomy.html
layouts/taxonomy.html 的作用是渲染分类页面
首先在 hugo.toml 中定义分类方式，下面两种分类是默认存在的：
[taxonomies]
category = 'categories'
tag = 'tags'然后创建 taxonomy.html 文件：
{{ define "main" }}
<h1>taxonomy</h1>
{{ end }}此时便可访问网址 http://localhost:1313/categories 和 http://localhost:1313/tags 了
可以在 md 文档的 front matter 中使用上述的分类
+++
categories = ['vegetarian', 'gluten-free']
title = 'Example'
+++然后在 taxonomy.html 文件中：
{{ define "main" }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}此时访问 http://localhost:1313/categories 便会出现 vegetarian 和 gluten-free 的链接
需要创建 term.html 来渲染 vegetarian 和 gluten-free 链接的网站
也可以通过在 hugo.toml 中添加如下内容禁用 taxonomy 和 term 页面
disableKinds = ['taxonomy', 'term']section.html
一个 section 就是 content 目录的第一级目录或者任何包含 _index.md 文件的目录
content/
├── articles/ <-- section (top-level directory)
│ └── article/
│ ├── cover.jpg
│ └── index.md
└── products/ <-- section (top-level directory)
└── product/ <-- section (has _index.md file)
├── benefits/ <-- section (has _index.md file)
│ ├── _index.md
│ └── benefit.md
└── _index.mdarticles/article 目录不是 section，因为它既不是 content 目录的第一级目录也不包含 _index.md 文件
当访问 content/articiles 时会优先使用 layouts/articles/section.html 进行渲染，这就是 section.html 的作用
如果不存在 layouts/articles/section.html，则会使用 layouts/section.html，如果没有 layouts/section.html 则会使用 layouts/list.html
_index.md作用
_index.md 在 Hugo 中扮演着特殊角色。它允许你向 home、section、taxonomy、term 页面添加 front matter 和 content
比如有该目录结构：
content/
├── articles/
│ └── article/
│ ├── cat.md
│ └── _index.md
└── _index.md则在 layouts/articles/section.html 中可以访问 content/articiles/_index.md 中的内容
{{ define "main" }}
{{ .Content }}
{{ end }}而在 layouts/home.html 中则可以访问 content/_index.md 中的内容
内层的page.html
content/books/flower.md 优先使用 layouts/books/page.html 渲染，然后才是 layouts/page.html
_partials
可以将一个较长的模板文件分成几个较小的模板文件
通过 layouts/_partials 目录下的模板实现
比如该 home.html：
{{ define "main" }}
{{ partial "header.html" . }}
<h1>Content</h1>
{{ partial "footer.html" . }}
{{ end }}{{ partial "header.html" . }} 部分会被相应的 layouts/_partials/header.html 中的内容替换
_markup
layouts/_markup 目录下的文件是 render hook 模板
功能是覆盖 Markdown 到 HTML 的转换
比如将 md 文件中的标题转换为 html 的 <h1><span>GOOD</span></h1>，则创建该 render-heading.html 文件：
<h1>
<span>GOOD</span>
</h1>存在下面这些种类的 render hook 模板
比如 render-heading.html 就是用于 <h1> 到 <h6> 的
layouts/
└── _markup/
├── render-blockquote.html
├── render-codeblock.html
├── render-heading.html
├── render-image.html
├── render-link.html
├── render-passthrough.html
└── render-table.html可以为不同的页面类型创建 render hook 模板
layouts/
├── books/
│ └── _markup/
│ ├── render-link.html
│ └── render-link.rss.xml
└── films/
└── _markup/
├── render-link.html
└── render-link.rss.xml_shortcodes
layouts/_shortcodes 目录下的文件是 shortcode 模板
其在 md 文件中被调用
假如有 _shortcodes/audio.html：
{{ with resources.Get (.Get "src") }}
/* <audio controls preload="auto" src="{{ .RelPermalink }}"></audio> */
{{ end }}则可以在 md 文件中调用：
{{ /* < audio src=/audio/test.mp3 > */ }}内容视图模板
内容视图模板（content view template）和 partial 模板相似，不过其可以继承上下文
假设 layouts/page.html：
{{ define "main" }}
{{ .Render "view_card" }}
{{ end }}创建 layouts/view_card.html：
<div>
{{ .Content }}
<p>view_cadsadfrd</p>
</div>也就是说内容视图模板可以使用点.访问上下文，而 partial 模板不行
给md文件指定模板
使用 front matter 中的 layout 指定模板
假设有 content/posts/learn.md 文件：
+++
layout = 'ok'
+++
# learn
learning则该 md 文件会使用 layouts/posts/ok.html 进行渲染
网站标签的小图标
将 favicon.ico 放入 static 文件中便自动生效
使用主题
首先使用该命令添加主题
git submodule add https://github.com/imfing/hextra themes/hextra然后在 hugo.toml 中添加
theme = 'hugo-book'模板应用顺序是 layouts 目录，其次才是主题的 layouts 目录，所以可以在 layouts 目录下编写模板覆盖主题的模板
一些推荐的主题
// hextra 是现代化的网页主题，包含博客和文档以及其他页面，推荐使用
// hugo-PaperMod， hugo-theme-stack 是博客网站，专门用于博客
// hugo-book 是文档网站，专门用于文档
https://github.com/adityatelange/hugo-PaperMod
https://github.com/alex-shpak/hugo-book
https://github.com/CaiJimmy/hugo-theme-stack
https://github.com/imfing/hextra设置网站为中文网站
在 hugo.toml 中设置
defaultContentLanguage = 'zh'
languageCode = 'zh-cn'部署到github上
步骤：https://gohugo.io/host-and-deploy/host-on-github-pages/#procedure