次世代 Hugo

無駄を削ぎ、本質を研ぐ

建立 Hugo 開發 Bash Script

Sam Xiao's Avatar 2025-06-27

Hugo 有一些參數特別適合 開發 時使用，但由於參數太多，可將其統一寫在 Bash Script 內，再由 NPM Script 呼叫。

Version

Hugo 0.147

Dev Script

dev.sh

#!/bin/bash

echo "🚀 Starting Hugo development server..."
hugo server \
  --buildDrafts \
  --buildFuture \
  --disableFastRender \
  --bind 0.0.0.0 \
  --port 1313 \
  --noHTTPCache

開發時使用 Hugo 所內建的 Web server：

  • buildDrafts：在 開發 時亦顯示 Front Matter 內 draft: true 的 markdown
  • buildFuture：在 開發 時亦顯示 Front Matter 內 date 為 未來時間 的 markdown
  • disableFastRender：在 開發 時，修改 Partial、Layout、Front Matter 都會重新 render
  • bind：在 開發 時，允許 區網內其他裝置 連進來，特別適合用手機連進來測試
  • port：在 開發 時，Web server 所使用的 port
  • noHTTPCache：在 開發 時，當 config.json 有引用 GitHub 的 Hugo Modules 時，不會使用本地 cache，直接從 GitHub 抓最新版，強制更新 module
$ chmod +x dev.sh
  • chmod +x：設定 dev.sh 有可執行權限

NPM Script

{
  "name": "hugo-theme",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "./dev.sh",
    "build": "./build.sh"
  },
  "devDependencies": {
    "prettier": "^3.5.3",
    "prettier-plugin-go-template": "^0.0.15"
  }
}

Line 5

"scripts": {
  "dev": "./dev.sh",
  "build": "./build.sh"
},
  • dev：開發時執行 dev.sh
  • build：編譯時執行 build.sh

Conclusion

  • 傳統會將 Hugo 參數直接寫在 NPM Script 內，但由於 Hugo 參數太多，建議先寫在 Bash Script 內，再由 NPM Script 呼叫

# Hugo