先決條件
HB 是一個功能豐富的框架，但同時也具有着一定的複雜性。本文將詳細列出 HB 的環境要求，以便你可以正常地開發和使用 HB 模塊和主題。
必要配置§
hugo.toml
1[build]
2 writeStats = true
tomlhugo.yaml
1build:
2 writeStats: true
yamlhugo.json
1{
2 "build": {
3 "writeStats": true
4 }
5}
json用於收集站點所使用到的 classes、ids 和 tags，以供 PurgeCSS 清除未使用的 CSS。
構建工具§
推薦儘可能地使用以下構建工具的最新版本。
Go§
HB 是一個模塊化的框架，需要安裝 Go 語言以下載和更新 Hugo 模塊。
1sudo pacman -S go
shHugo§
HB 使用 Hugo Pipes 來編譯 SCSS，因此需要擴展版（extended）的 Hugo。
若你位於中國大陸而沒有 VPN 時，你需要先設置 Go 代理服務器。
1go install -tags extended github.com/gohugoio/hugo@latest
shGit§
版本控制系統，可通過下載頁面獲得。
1sudo pacman -S git
shNode.js§
要求 Node.js
16或後續版本。
HB 依賴以下 Node.js 包。
1sudo pacman -S nodejs
sh| 名稱 | 描述 |
|---|---|
| PostCSS CLI | 用於轉變樣式。 |
| RTLCSS | 將 LTR CSS 轉換爲 RTL，如果你沒有 RTL 網站則可選。 |
| Autoprefixer | 解析 CSS 並在 Can I Use 規則中添加對應的前綴。 |
| PurgeCSS | 移除未使用的 CSS。 |
NPM 已被包含於 Node.js 安裝中，你可以選擇局部或全局地安裝這些包。
1npm i -D postcss-cli @fullhuman/postcss-purgecss autoprefixer rtlcss
sh局部安裝將依賴寫入 package.json，以便部署時通過 npm i 安裝這些包，而無需記住這些繁雜的包名。
1sudo npm i -g postcss-cli @fullhuman/postcss-purgecss autoprefixer rtlcss
sh該命令只需執行一次，後續的 HB 站點無需再次執行此命令。
兩者都是有效的，HB 會優先局部查找需要的包。
注意§
publishDir 必須爲 public
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
sh請勿於語言範圍配置中修改 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'
tomlhugo.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
yamlhugo.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}
json請禁用 Cloudflare Rocket Loader§
Cloudflare Rocket Loader 缺少了 DOMContentLoaded 事件，會導致很多模塊失效，即便我們爲此提供了一個補丁，但得不償失，禁用該功能是目前最佳選擇。