Hugo

本文介绍如何使用 hugo 搭建站点。

概述

hugo 号称“世界上最快的静态网站生成器”。

使用

为 zsh 安装自动补全：

hugo completion zsh > $(brew --prefix)/share/zsh/site-functions/_hugo

参见 zsh 自动补全

其他 shell 安装参见 hugo completion

查看当前站点的配置：

hugo config --format yaml

更多命令行使用参见 cli

数学公式

如果在文章中用到数学公式，通常有两个方案：

• mathjax
• $\LaTeX$ 推荐收藏 $\KaTeX$ 公式编辑器符号大全 ，每次编写都需要翻阅。完整说明查看 文档。

modules

Hugo modules 是 Hugo 的核心构建组件。module 可以是主项目，也可以是一个小组件，用来提供 Hugo 中定义的 7 种组件类型（static, content, layouts, data, assets, i18n, and archetypes）中的一种或多种。

可以任意组合 module，甚至可以挂载非 Hugo 项目的目录，形成一个虚拟的大联合文件系统。

Hugo module 由 Go module 提供支持。有关 Go module 的更多信息，请参阅：

• https://github.com/golang/go/wiki/Modules
• https://go.dev/blog/using-go-modules

我们可以 通过 module 来使用 theme，比如当前博客主题就是通过 module 挂载的：

[module]
[[module.imports]]
    path = 'github.com/razonyang/hugo-theme-bootstrap'

module:
  imports:
  - path: github.com/razonyang/hugo-theme-bootstrap

{
   "module": {
      "imports": [
         {
            "path": "github.com/razonyang/hugo-theme-bootstrap"
         }
      ]
   }
}

Hugo Modules: everything you need to know!

查看 mounts 的 config：

hugo config mounts

主题

模板

• 理解 template 的 查找顺序 很重要。
• 如果使用 prettier 格式化 go-template 模板文件需要使用 prettier-plugin-go-template 插件：

流行主题

• 官方主题集合
• awesome hugo theme 按照 Github Stars 排名，持续更新。
• bootstrap
• even，经典，但是时间久了没有更新。
• DoIt 是 loveIt 的后续开发。
• FixIt 和 DoIt 有点像，但是个人感觉更好。
• meme
• Docsy A Hugo theme for technical documentation sites
• nexT 非常棒的一个主题，下次尝试。

部署

Build check

Push 到仓库前可以先进行本地 build 来检查是否有错误，避免 Github Action 出错到站站点更新失败，这个功能可以通过 husky 配置为 git hook 来自动化。

npx husky add ./husky/pre-push "hugo && rm -fr public"

GitHub Pages

官方 Host on GitHub pages 介绍如何通过 GitHub Action 而不是以前 branch 的方式来部署。

延伸阅读

• Awesome Hugo 包含与 Hugo 有关的资源清单。