次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 WebStorm 開發 Hugo (Modern CSS)

Sam Xiao's Avatar 2025-12-26

WebStorm 目前並沒有原生支援 Hugo，須另外安裝 Smart Hugo plugin，且不再使用 Prettier 與 Stylelint，直接使用 WebStorm 內建功能，打造 Zero Dependency 與 No Node.js 開發環境。

Version

WebStorm 2025.3

Smart Hugo

hugo01

Settings -> Plugins

  • 安裝 Smart Hugo plugin

Smart Hugo 付費版有更完整功能，這裏主要是讓 WebStorm 認識 Go template 語法

Resource Root

hugo04

Settings -> Directories

  • 將 assets 目錄 指定成 Resource Root

Disable Prettier

hugo03

Settings -> Languages & Frameworks -> JavaScript -> Prettier

  • Disable Prettier：On

Disable Stylelint

hugo04

Settings -> Languages & Frameworks -> Style Sheets -> Stylelint

  • Enable：Off

Enable EditorConfig

hugo12

System -> Editor -> Code Style

  • Enable EditorConfig support：On

HTML Style

hugo06

Settings -> Editor -> Code Style -> HTML -> Tabs and Indent

  • Tab size：2
  • Indent：2
  • Continuation indent：2

hugo07

Settings -> Editor -> Code Style -> HTML -> Other

  • Do not indent children of：head, tbody, tfoot
  • Keep white spaces inside：span, pre, textarea

CSS Style

hugo10

Settings -> Languages & Frameworks -> Style Sheets -> Dialects

  • Project CSS Dialect：W3C

hugo08

Settings -> Editor -> Code Style -> Style Sheets -> CSS -> Tabs and Indent

  • Tab size：2
  • Indent：2
  • Continuation indent：2

hugo09

Settings -> Editor -> Code Style -> Style Sheets -> CSS -> Arrangement

  • Custom order

hugo11

Settings -> Editor -> Inspections -> CSS

  • Property is incompatible with selected browsers：On
  • Unused selector：On

Editor Config

root = true

# 針對所有檔案的預設設定
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# 強制針對 HTML 和 Go Template 檔案使用 2 空格
[*.{html,htm,tmpl}]
indent_style = space
indent_size = 2
  • 強制 Go Template 語法 indent 為 2

Actions on Save

hugo05

Settings -> Tools -> Actions on Save

  • Reformat code：Changed lines

Git

.gitignore

# Hugo
public
resources
.hugo_build.lock

# Editor
.idea

# macOS
.DS_Store

將 .gitignore 建立在 Hugo 專案的 根目錄 下。

  • public : final HTML/CSS/JavaScript for production
  • resources：hugo server 時所建立的暫存目錄
  • .hugo_build.lock : Hugo build 所建立的 lock 檔
  • .idea : WebStorm 的暫存檔存放目錄
  • .DS_Store : macOS 的資源檔

Shell Script

#!/bin/bash

COMMAND=$1

case "$COMMAND" in
  "dev")
    echo "🚀 Starting Hugo Development Server..."
    hugo server --disableFastRender --renderToMemory
    ;;

  "build")
    echo "📦 Building Static Site..."
    hugo --cleanDestinationDir --minify
    echo "✅ Build complete in ./public"
    ;;

  "serve")
    echo "🌐 Serving ./public folder via Python..."
    cd public && python3 -m http.server
    ;;

  *)
    echo "❌ 使用方式錯誤。請輸入以下指令之一："
    echo "   ./run.sh dev    - 啟動開發預覽"
    echo "   ./run.sh build  - 建置生產版本"
    echo "   ./run.sh serve  - 預覽 public 資料夾 (Python)"
    exit 1
    ;;
esac
  • 使用 Shell Script 取代 NPM Script

Conclusion

  • Smart Hugo 雖非 JetBrains 官方 Plugin，但其表現比 Go Template Plugin 好，是專為 Hugo 所設計，免費版已經非常好用
  • WebStorm 可以設定出比 Prettier 更細膩的 HTML 與 CSS 格式
  • WebStorm 對 CSS 的檢查不輸給 Stylelint，也可以對
  • 原本因為 VS Code 對於 Node.js 生態系的 Prettier 與 Stylelint 支援完整，WebStorm 在 Hugo 主題開發上日漸式微，但若使用 Vanilla CSS 搭配 Zero Dependency 與 No Node.js，則必須靠 WebStorm 內建功能彌補 Prettier 與 Stylelint 缺憾，VS Code 在這點無法與 WebStorm 抗衡

# CSS # Hugo # WebStorm