先决条件

2022年12月19日 1 分钟阅读配置构建工具文档 NPM Go Hugo Git Node.js PurgeCSS RTLCSS Autoprefixer PostCSS

HB 是一个功能丰富的框架，但同时也具有着一定的复杂性。本文将详细列出 HB 的环境要求，以便你可以正常地开发和使用 HB 模块和主题。

赞助

成为我们的资助者或赞助商，以支持我们的工作。

本页内容

赞助商

必要配置

hugo.toml

1[build]
2  writeStats = true

hugo.yaml

1build:
2  writeStats: true

hugo.json

1{
2   "build": {
3      "writeStats": true
4   }
5}

build.writeStats

用于收集站点所使用到的 classes、ids 和 tags，以供 PurgeCSS 清除未使用的 CSS。

构建工具

推荐尽可能地使用以下构建工具的最新版本。

Go

HB 是一个模块化的框架，需要安装 Go 语言以下载和更新 Hugo 模块。

Arch Linux 安装 Go

1sudo pacman -S go

Dart Sass

详情请参阅Dart Sass 安装。

Hugo

HB 使用 Hugo Pipes 来编译 SCSS，因此需要扩展版（extended）的 Hugo。

通过 Go 安装 Hugo

若你位于中国大陆而没有 VPN 时，你需要先设置 target="_blank" rel=“noopener noreferrer”>Go 代理服务器。

1go install -tags extended github.com/gohugoio/hugo@latest

Git

版本控制系统，可通过下载页面获得。

Arch Linux 安装 Git

1sudo pacman -S git

Node.js

要求 Node.js 16 或后续版本。

HB 依赖以下 Node.js 包。

Arch Linux 安装 Node.js

1sudo pacman -S nodejs

名称	描述
PostCSS CLI	用于转变样式。
RTLCSS	将 LTR CSS 转换为 RTL，如果你没有 RTL 网站则可选。
Autoprefixer	解析 CSS 并在 Can I Use 规则中添加对应的前缀。
PurgeCSS	移除未使用的 CSS。

我们提供了一个元包，其包含了上述所有必要的包。

1npm i @hbstack/node-packages

注意

`publishDir` 必须为 `public`

~~它受到关于共享 PurgeCSS 配置的 HB 实现的限制。~~

该限制已于 v0.7.2 修复。

Hugo Server 生产模式的必要参数

若需要在生产模式下使用 Hugo Server，需要指定 --disableFastRender 和 --renderToDisk，否则 PurgeCSS 和 PostCSS 会出现意想不到的问题。

1hugo server \
2  --disableFastRender \
3  --renderToDisk \
4  -e production \
5  -b http://localhost:1314 \
6  -p 1314

请勿于语言范围配置中修改 `hb` 和 `hugopress` 参数

HB 依赖于模块间配置的深度合并，然而语言范围的参数将会覆盖覆盖模块的配置，而非深度合并，这将导致各种意想不到的问题。比如以下的配置示例是不允许的。

hugo.toml

 1[language]
 2  [language.en]
 3    [language.en.params]
 4      [language.en.params.hb]
 5        foo = 'bar'
 6      [language.en.params.hugopress]
 7        foo = 'bar'
 8  [language.zh-hans]
 9    [language.zh-hans.params]
10      [language.zh-hans.params.hb]
11        foo = 'bar'
12      [language.zh-hans.params.hugopress]
13        foo = 'bar'

hugo.yaml

 1language:
 2  en:
 3    params:
 4      hb:
 5        foo: bar
 6      hugopress:
 7        foo: bar
 8  zh-hans:
 9    params:
10      hb:
11        foo: bar
12      hugopress:
13        foo: bar

hugo.json

 1{
 2   "language": {
 3      "en": {
 4         "params": {
 5            "hb": {
 6               "foo": "bar"
 7            },
 8            "hugopress": {
 9               "foo": "bar"
10            }
11         }
12      },
13      "zh-hans": {
14         "params": {
15            "hb": {
16               "foo": "bar"
17            },
18            "hugopress": {
19               "foo": "bar"
20            }
21         }
22      }
23   }
24}

请禁用 Cloudflare Rocket Loader

Cloudflare Rocket Loader 缺少了 DOMContentLoaded 事件，会导致很多模块失效，即便我们为此提供了一个补丁，但得不偿失，禁用该功能是目前最佳选择。

查看源码编辑页面历史

2024年11月21日星期四 2022年12月19日星期一

简介

安装

浏览用户手册