次世代 Hugo

Claude Code for WebStorm 初體驗

2026-05-08T23:59:13.000Z

在 WebStorm 內使用 Claude Code。

Version

WebStorm 2026.1.1
Claude Code [Bete]

Claude Code Plugin

安裝 Anthropic 官方的 plugin

開啟 terminal，輸入 claude
Claude Code 順利與 WebStorm 接上

Conclusion

安裝 Plugin 之前必須先安裝 Claude CLI
Claude Code 尚未以 GUI 支援 WebStorm，目前僅提供 WebStorm 與 Cluade CLI 整合

Reference

Moska, Claude Code JetBrains Integration

Claude Desktop 初體驗

2026-05-08T15:46:36.000Z

以 Desktop 方式使用 Claude Code。

Version

Claude Desktop 1.6

Homebrew

$ brew install --cask claude

使用 Homebrew 安裝 Claude Desktop

Claude Desktop

執行 Claude Desktop

以 Google Account 登入 Claude

Welcome

Claude Desktop 設定成功

Preference

Appearance：System
Chat font：System
Response completions：On
Code notifications：On
Code permission requests：On
Emails from Claude Code on the web：On
Dispatch messages：On

General Desktop Settings

Run on startup：Off
Quick access shortcut：No shortcut
Voice shortcut：No shortcut
Menu bar：Off
Keep computer awake：Off

Claude CLI 初體驗

2026-05-03T08:05:37.000Z

以 CLI 方式使用 Claude Code。

Version

Claude CLI 2.1.118

Homebrew

$ brew install --cask claude-code

使用 Homebrew 安裝 Claude CLI

Claude CLI

$ claude

進入專案目錄，輸入 claude 執行 Claude CLI

Theme

選擇 Dark mode

Claude Account

選擇 Claude account with subscription

Continue with Google：以 Google ID 登入

登入 Claude 帳號成功

Trust Folder

Yes, I trust this folder：讓 Claude CLI 管理此專案目錄

Welcome

Claude CLI 設定成功

Conclusion

CLI 為 Claude Code 的基礎，可在此學到 Claude Code 核心技術

支援 Pointfree 的 Function

2026-05-01T15:51:44.000Z

Hugo 並不是所有 Function 都支援 Pointfree，本文整理常用支援 Pointfree 的 Function。

Version

Hugo 0.161.1

文字與內容處理

這是 Pipeline 最常用的場景，用於鏈接多個過濾器。

markdownify()：將字串轉為 HTML
findRE() / replaceRE()：正規表達式搜尋與替換
humanize()：將字串轉為易讀格式
lower() / upper() / title()：大小寫轉換
truncate()：截斷文字

資源與圖片處理

Hugo 的資源管道 (Hugo Pipes) 完全建立在 Pipeline 基礎上。

resources.Get()：獲取資源
fingerprint()：加入雜湊值 (用於快取清除)
minify()：壓縮 HTML/CSS/JavaScript
toCSS()：將 SASS/SCSS 編譯為 CSS
Resize() / Fill() / Fit() / Filter()：圖片縮放

集合與排序

對頁面群組或陣列進行篩選。

where()：過濾集合
sort()：排序
first() / last()：取前 N 個或後 N 個項目
group()：分組

安全與編碼

為了防止 XSS 攻擊或符合 URL 格式。

safeHTML()：宣告字串為安全 HTML (不進行轉譯)
safeJS()：處理 Javascript
urlize()：將字串轉換為 URL 友善格式。
base64Encode() / base64Decode()：Base64 編碼轉換

邏輯判斷與預設值

default()：當值為空時給予預設值

Hugo 之 4 大特色

2026-05-01T15:12:01.000Z

相較於其他 SSG，Hugo 有 4 大特色。

Version

Hugo 0.161.1

快

無論其他 SSG 再怎麼進化，其最大的問題就是隨著 markdown 檔案越來越多，編譯成 HTML 的速度會斷崖式地變慢，尤其以 Node.js 為基礎的 SSG 最為明顯。Hugo 能發揮 CPU 多核心的優勢，不用擔心 markdown 檔案數量問題。

完整 Toolchain

其他 SSG 大都要依賴 Webpack、Vite、NPM 之類工具，或一堆 plugin 解決 HTML/CSS/JavaScript 整合問題；Hugo 則內建完整 Toolchain，連 Tailwind CSS 也是原生支援。

Function Pipeline

Hugo 是少數直接支援 Function Pipeline 的 SSG，雖然不是所有的 function 都支援 pipeline，但常用的 function 都可直接使用 pipeline，非常難得。

Context

Hugo 繼承於 Go 的 text/template，可直接使用 . 存取目前 context，這使得 codebase 非常精簡，為 Hugo 一大特色。

Conclusion

很多人嫌 Hugo 的 Go Template 語法怪異，學習門檻高，這是以 JavaScript 的角度來思考，若以 Go 的角度，Hugo 其實最接近 Go 習慣，還支援難得的 Function Pipeline
儘管 Hugo 的 DX 稍差，但 SSG 最重要的就是速度，這才是 Hugo 最大特色

我的 WebStorm 基本設定

2026-04-22T03:08:58.000Z

本文記錄我的 WebStorm 基本設定。

Version

ＷebStorm 2026.1

Shell Script Name

Update the tool automatically：On
Shell script name：ws

Appearance

Theme：Darcula
Use custom font
- 13：Dialog 16
- 15：Dialog 17
- 16：Dialog 18

Compact Mode

Compact mode：On

Editor Font

Font：Fira Code
Size：
- 13：22.0
- 15：21.0
- 16：23.0
Line height：1.2
Main weight：Medium
Fallback font：Menlo

Backgroud Color

Background：#2B2B2B

Console Font

Use console font instead of the default：On
Font：Menlo
Size：
- 13"：20
- 15"：21
- 16"：23
Line height：1.0

Code Folding

General
- File header：On
- Imports：On
- Documentation comments：On
- Method bodies：Off
- Custom folding regions：On

Appearance

Use block caret：On
Highlight occurrences of selected text：On
Show hard wrap and visual guides (configured in Code Style options)：On
Show line numbers：Absolute
Show method separators：On
Show whitespaces：On
- Leading：On
- Inner：On
- Trailing：On
- Selection：On
Show indent guides：Off
Show CSS color preview as background：On

Show breadcrumbs：On
- Placement：Bottom
Languages
- CSS
- HTML
- JavaScript
- JSON
- Sass
- SCSS
- YAML

Editor Tabs

Tab placement：None

Gutter Icons

Show gutter icons：Off

Sticky Lines

Show sticky lines while scrolling：Off

Appearance

Compact Mode：On
Toolbar：Off
Navigation Bar：Top
Tool Window Bars：Off
Status Bar：Off

Active Editor

Show Whitespace：On
Show Line Numbers：On
Show Import Popups：On
Show Breadcrumbs：On

Project Options

Behavior
- Enable Preview Tab：On
- Open Files with Single Click：On
- Open Directories with Single Click：On
- Always Select Openned File：On

Appearance
- Excluded Files：Off
- Scratches and Consoles：Off

Inlay Hints

Code vision：Off
Parameter names：Off
Types：Off
Values：Off
Method chains：Off
Other：Off

Tool Windows

Commit：⌘ 0
Project：⌘ 1
Bookmarks：⌘ 2
TODO：⌘ 6
Problems：⌘ 7
Terminal：⌘ 8
Git：⌘ 9

Keymap

Go to File：⌘ P

Plugins

Claude Code
GitHub Copilot

Deployment：Disable all

IDE Localization：Disable all

JavaScript Debugger：On
JavaScript Intention Power Pack：On
Node.js：On

Keymap：Disable all

Gherkin：Off

Remote Development：Disable all

CSS：On
Sass：On

EJS：On

UI：Disable all

Git：On
GitHub：On

File Watchers：Off
IDE Features Trainer：Off
Qodana：Off

使用 WebStorm 開發 Hugo (Modern CSS)

2026-04-21T23:56:13.000Z

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

Version

WebStorm 2026.1

Smart Hugo

Settings -> Plugins

Smart Hugo：支援 Go Template

TOML：支援 Hugo 設定檔格式

Project Directories

Settings -> Directories

Resource Root：
- assets：放置 CSS、JavaScript 與 JSON
Excluded：
- .idea：WebStorm 的暫存檔存放目錄
- public：hugo build 之後的 HTML/CSS/JavaScript
- resources：hugo server 時所建立的暫存目錄
Exclude Files：
- .hugo_build.lock：Hugo build 所建立的 lock 檔

Project 不顯示 Excluded

Disable Prettier

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

Disable Prettier：On

Disable Stylelint

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

Enable：Off

Enable EditorConfig

System -> Editor -> Code Style

Enable EditorConfig support：On

HTML Style

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

Tab size：2
Indent：2
Continuation indent：2

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

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

CSS Style

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

Tab size：2
Indent：2
Continuation indent：2

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

Custom order

Settings -> Editor -> Inspections -> CSS

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

Editor Config

.editorconfig

root = true# 針對所有檔案的預設設定[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true# 強制針對 HTML 和 Go Template 檔案使用 2 空格[*.{html,htm,tmpl}]indent_style = spaceindent_size = 2

強制 Go Template 語法 indent 為 2

Actions on Save

Settings -> Tools -> Actions on Save

Reformat code：Changed lines

Git

.gitignore

# Hugopublicresources.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

run.sh

#!/bin/bashCOMMAND=$1case "$COMMAND" in  "dev")    echo "🚀 Starting Hugo Development Server..."    hugo server --disableFastRender    ;;  "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 "❌ Incorrect usage. Please enter one of the following commands:"    echo "   ./run.sh dev    - Start development preview"    echo "   ./run.sh build  - Build production version"    echo "   ./run.sh serve  - Preview the public folder"    exit 1    ;;esac

使用 Shell Script 取代 NPM Script

$ chmod +x ./run.sh

給予 run.sh 執行權限

Conclusion

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

使用 Excluded 隱藏檔案目錄與停止索引

2026-04-17T16:13:27.000Z

實務上很多目錄與檔案是由工具所建立與使用，我們並不會參與編輯，或者該檔案太多，會花費很多時間建立索引，可將這些檔案或目錄設定為 Excluded，將可隱藏並停止建立索引。

Version

WebStorm 2026.1

Excluded

選擇檔案或目錄，右鍵 Mark Directory As -> Excluded 設定為 Excluded

Hugo

.idea：WebStorm 所用，不必顯示
.vscode：VS Code 所有，不必顯示
node_modules：NPM 套件所用，不必顯示
public：hugo build 所產生的 HTML/CSS/JavaScript 放在此目錄，不必顯示
resources：hugo server 將 asset 放在此目錄，不必顯示
hugo_build.lock：hugo build 執行時所產生的 lock 檔，不必顯示
bun.lock：bun 執行時所產生 .lock 檔，不必顯示

Hexo

.deploy_git：hexo deploy 所使用目錄，不必索引與顯示
.idea：WebStorm 所用，不必顯示
node_modules：NPM 套件所用，不必顯示
public：hexo generate 所產生的 HTML/CSS/JavaScript 放在此目錄，不必索引與顯示
sources：Markdown 與圖片所用，不必索引與顯示

Appearance

Current Project -> Appearance

Excluded Files：Off：Project 不顯示 Excluded 的目錄與檔案

Directories

Settings -> Directories

Excluded：將 node_modules、public、resources 加入
Exclude files：.vscode;*.lock

僅顯示能編輯的 目錄 與 檔案，讓整個專案看起來更清爽

Conclusion

本文以 Hugo 專案為例，其他 Framework 專案可自行設定要隱藏的目錄與檔案
也以 Hexo 專案為例，將 Markdown 等目錄排除，可大幅縮短建立索引時間

將 Theme 架構轉移成 Themeless 架構

2025-12-13T02:54:24.000Z

原本使用 Theme 開發，或想將別人開發的 Theme 改成 Themeless 架構，只需做少許的改變即可。

Version

Hugo 0.152.2

Directories

將原本主題下的以下目錄直接轉移到專案根目錄。

layouts：最重要的核心，HTML Template
static：外部 CSS、外部 JS, 外部圖片等靜態檔案
assets：使用 Hugo Pipes 處理 CSS、SCSS 或 JavaScript
archetypes：Content Template
i18n：多語言設定檔
data：自訂資料檔

Configuration

hugo.toml

baseURL = 'https://example.org/'languageCode = 'en-us'title = 'My Site'[params.css]files = [  "css/vars.css",  "css/reset.css",  "css/baseof.css",  "css/home.css",  "css/single.css",  "css/list.css",  "css/_partials/header.css",  "css/_partials/footer.css",  "css/page/about.css",]

Line 1

baseURL = 'https://example.org/'languageCode = 'en-us'title = 'My Site'

將原本 theme 那一行刪除，因為已經不需要設定主題了

Line 4

[params.css]files = [  "css/vars.css",  "css/reset.css",  "css/baseof.css",  "css/home.css",  "css/single.css",  "css/list.css",  "css/_partials/header.css",  "css/_partials/footer.css",  "css/page/about.css",]

將原本主題內 hugo.toml 或 theme.toml 或 config.toml 的 params 部分搬到專案自己的 hugo.toml

Remove Theme

檔案與設定都搬過來後，可直接刪除 themes 目錄

Conclusion

若只是一個人開發，其實 Themeless 架構是最舒服的，不會有 layout override 問題，也不會有專案與主題都有 configuration 問題，適合需要 長期維護與 高度客製化 網站

使用 IdeaVim 支援 Vim 模式

2025-08-24T09:49:41.000Z

Vim 優點在其高效的 鍵盤 控制，可完全不需 滑鼠 或 觸控板 介入。JetBrains 亦官方提供 IdeaVim Plugin，讓我們在 WebStorm 也能使用 Vim 模式。

Version

WebStorm 2025.2
IdeaVim 2.27.2

IdeaVim

安裝 IdeavVim Plugin，為 JetBrains 官方所提供

Hybrid Line Number

Settings -> Editor -> General -> Appearance

Show line numbers：Hybrid

同時顯示 絕對 與 相對 行數，方便 Vim 直接跳轉到指定行數

Conclusion

WebStorm 無法同時顯示兩行 Line Number，但可透過 Hybrid 同時顯示 絕對 與 相對 行數

使用 WebStorm 開發 Hugo

2025-08-19T15:57:28.000Z

WebStorm 目前並沒有原生支援 Hugo，必須另外安裝 Smart Hugo plugin，但原生支援 Prettier 美化 HTML/SCSS/JavaScript，與 Stylelint 加強 CSS 檢查與排序。

Version

WebStorm 2025.2

Node.js

Settings -> Languages & Frameworks -> Node.js

設定 Node.js 路徑

一定要設定，否則 Prettier 與 Stylelint 在 WebStorm 將無法執行

Smart Hugo

Settings -> Plugins

安裝 Smart Hugo plugin

CSS

Settings -> Directories

將 CSS 的 根目錄 指定成 Resource Root

Prittier

$ npm install -D prettier $ npm install -D prettier-plugin-go-template$ npm install -D prettier-plugin-toml

prettier：美化 HTML/SCSS/JavaScript
prettier-plugin-go-template：Prettier plugin：美化 Go template
prettier-plugin-toml：Prettier plugin：美化 TOML

.prettierrc

{  "bracketSameLine": true,  "htmlWhitespaceSensitivity": "ignore",  "semi": false,  "singleQuote": true,  "arrowParens": "avoid",  "plugins": [    "prettier-plugin-go-template",    "prettier-plugin-toml"  ],  "overrides": [    {      "files": [        "*.html"      ],      "options": {        "parser": "go-template"      }    }  ]}

Line 2

"bracketSameLine": true,"htmlWhitespaceSensitivity": "ignore","semi": false,"singleQuote": true,"arrowParens": "avoid",

bracketSameLine: true：HTML 的多 attribute 造成 tag 變成多行時，> 不換行
htmlWhitespaceSensitivity: ignore：HTML 忽略 white space 不換行
semi: false：JavaScript 支援 ASI，結尾不加分號
singleQuote: true：JavaScript 的 String 使用 單引號，但 HTML 與 SCSS 仍維持 雙引號
arrowParens: avoid：JavaScript 的 function 只有一個參數時不加 ()

Line 7

"plugins": [  "prettier-plugin-go-template",  "prettier-plugin-toml"],

plugins：設定 Prettier plugin
- prettier-plugin-go-template：美化 Go template
- prettier-plugin-toml：美化 TOML

Line 11

"overrides": [  {    "files": [      "*.html"    ],    "options": {      "parser": "go-template"    }  }]

將 .html 視為 Go template 處理

.prettierignore

node_modulespublic*.min.css*.mim.js

設定 Prettier 忽略的檔案類型與目錄：

node_modules：忽略 NPM 套件的目錄
public：忽略 Hugo 編譯後檔案的目錄
*.min.css：忽略已經壓縮的 CSS
*.min.js：忽略已經壓縮的 JavaScript

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

Manual Prettier configuration
- Prettier package：指定 node_modules 下的 prettier
- Path to .prettierignore：自動偵測 .prettierignore
- Run on Reformat Code action：On
- Run for files：**/*.{html,css,js,toml}
- Run on save：On
- Prefer Prettier configuration to IDE code style：On

Run for files 的 html、css、js 與 toml 之間 不要有空格

package.json

"scripts": {  "prettier": "prettier --write '**/*.{html,css,js,toml}'"}

prettier：一次處理專案內所有 HTML/SCSS/JavaScript/TOML

Stylelint

$ npm install -D stylelint$ npm install -D stylelint-config-standard$ npm install -D stylelint-config-clean-order

stylelint：檢查 CSS
stylelint-config-standard：Stylelint plugin：標準 CSS 規則
stylelint-config-clean-order：Stylelint plugin：CSS 樣式排序規則

.stylelintrc

{  "extends": [    "stylelint-config-standard",    "stylelint-config-clean-order"  ],  "rules": {    "max-nesting-depth": [      1,      {}    ],    "selector-class-pattern": [      "^[a-z]+(?:__[a-z0-9]+)?(?:--[a-z0-9]+)?$",      {        "message": "Expected class selector to follow BEM"      }    ]  }}

extends：沿用規則
- stylelint-config-standard：標準 CSS 規則
- stylelint-config-clean-order：樣式排序規則
rules：建立自訂規則
- max-nesting-depth：巢狀最多只能一層
- selector-class-pattern：BEM 命名規則

.stylelintignore

node_modulespublicstatic

設定 Stylelint 忽略的檔案類型與目錄：

node_modules：忽略 NPM 套件的目錄
public：忽略 Hugo 編譯後檔案的目錄
static：忽略 static 目錄下 CSS

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

Enabled：啟用 Stylelint
Stylelint package：指定 node_modules 下的 stylelint
Configuration file：自動偵測 .stylelintrc
Run for files：**/*.{css}
Run stylelint --fix on save：on

package.json

"scripts": {  "stylelint": "npx stylelint '**/*.{css,}' --fix"}

stylelint：一次處理專案內所有 CSS

Git

.gitignore

# Hugopublicresources.hugo_build.lock# Editor.idea.vscode/*!.vscode/settings.json!.vscode/extensions.json# NPMnode_modules# macOS.DS_Store

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

public : final HTML/CSS/JavaScript for production
resources：hugo server 時所建立的暫存目錄
.hugo_build.lock : Hugo build 所建立的 lock 檔
.idea : WebStorm 的暫存檔存放目錄
.vscode：VS Code 的暫存檔存放目錄
!.vscode/settings.json：VS Code workspace 的 user setting 要進 Git
!.vscode/extensions.json：VS Code workspace 的推薦 extension 要進 Git
node_modules : NPM 套件存放目錄
.DS_Store : macOS 的資源檔

Conclusion

Smart Hugo 雖非 JetBrains 官方 Plugin，但其表現比 Go Template Plugin 好，是專為 Hugo 所設計
Prettier 本身並不支援 Go template 與 TOML，必須另外安裝 prettier-plugin-go-template 與 prettier-plugin-toml
WebStorm 原生已經支援 Prettier，只需加以設定即可
Stylelint 可對 CSS 與 BEM 做檢查，並對屬性加以排序
WebStorm 原生已經支援 Stylelint，只需加以設定即可

顯示 Hugo 編譯過的網站

2025-08-19T11:19:31.000Z

Hugo 內建的 Web Server 只能用在 開發階段，無法用在編譯後的 HTML/JavaScript/CSS，需要透過其他 Web Server。

Version

Hugo 0.148.2

NPM Script

package.json

{  "name": "hugo-theme",  "version": "1.0.0",  "scripts": {    "dev": "hugo server --disableFastRender",    "build": "hugo --cleanDestinationDir --minify",    "prettier": "prettier --write '**/*.{html,css,js,toml}'",    "stylelint": "npx stylelint '**/*.{css}' --fix",    "serve": "npx serve public"  }}

第 9 行

"serve": "npx serve public"

npx：一次性執行 serve，不必手動安裝到 global
serve public：使用 serve web server 執行 public 目錄下的 HTML/CSS/JavaScript

Conclusion

npx 讓我們不用事先安裝一些套件到 global，要用時會自動下載

disableFastRender 全站渲染

2025-08-19T11:16:26.000Z

hugo server 預設會以 FastRender ，只渲染 有修改 部分，但這只適合 Content Creator，並不適用於 Theme Creator。

Version

Hugo 0.148.2

Disable Fast Render

$ hugo server --disableFastRender

disableFastRender：hugo server 將不只渲染有修改部分，任何修改都將引起全站渲染

Hugo for Development

$ hugo server --disableFastRender --renderToMemory

開發模式建議參數：

disableFastRender：有修改將整個網站重新渲染，避免開發階段有些變更無法立即顯示
renderToMemory：將 HTML/CSS/JavaScript 渲染到記憶體

Conclusion

若是使用其他人所建立的 Theme，自己只是建立 Markdown 的 Content Creator，則適合使用 Fast Render
若是自己建立 HTML/CSS/JavaScript 的 Theme Creator，則不適合使用 Fast Render，因為會發現有些改變並不會立即渲染

cleanDestinationDir 編譯前先刪除 public 目錄

2025-08-19T10:58:07.000Z

Hugo 編譯時，預設不會先刪除 public 目錄，這導致若你原本刪除了一些 Markdown 或重新命名，將會繼續留在 public 目錄下，可加上 cleanDestinationDir 參數讓 Hugo 在編譯前先刪除 public 目錄。

Version

Hugo 0.148.2

Delete Public Folder

$ rm -r public && hugo

手動刪除 public 目錄並令 Hugo 編譯

Clean Destination Dir

$ hugo --cleanDestinationDir

cleanDestinationDir：Hugo 編譯前先刪除 public 目錄

Hugo for Production

$ hugo --cleanDestinationDir --minify

生產模式建議參數：

cleanDestinationDir：先刪除 public 目錄
minify：壓縮 HTML

Conclusion

cleanDestinationDir 與 minify 是生產模式下常用的參數組合

renderToMemory 渲染到記憶體

2025-08-19T02:36:00.000Z

hugo server 預設會將 HTML/CSS/JavaScript 渲染到 public 目錄下，可加上 renderToMemory 渲染到記憶體，將可加快渲染速度。

Version

Hugo 0.148.2

Render To Memory

$ hugo server --renderToMemory

renderToMemory：hugo server 將 HTML/CSS/JavaScript 渲染到記憶體，而非 public 目錄

Hugo for Development

$ hugo server --disableFastRender --renderToMemory

開發模式建議參數：

disableFastRender：有修改將整個網站重新渲染，避免開發階段有些變更無法立即顯示
renderToMemory：將 HTML/CSS/JavaScript 渲染到記憶體

Conclusion

renderToMemory 勢必消耗更多記憶體，若本身記憶體不大，則不建議使用此參數

Hugo 常用的 NPM Script

2025-08-19T02:17:02.000Z

Hugo 有一些參數特別適合 開發 與 編譯 時使用，可將最 常用 參數直接寫在 NPM Script。

Version

Hugo 0.148.2

NPM Script

{  "name": "hugo-theme",  "version": "1.0.0",  "license": "MIT",  "scripts": {    "dev": "hugo server --disableFastRender --renderToMemory",    "build": "hugo --cleanDestinationDir --minify",    "serve": "npx serve public"  }}

Line 6

"dev": "hugo server --disableFastRender --renderToMemory",

開發用 script：

disableFastRender：在 開發 時，修改 Partial、Layout、Front Matter 都會重新 render
renderToMemory：在 開發 時，HTML/CSS/JavaScript 將渲染到 記憶體，而非 public 目錄下加速

Line 7

"build": "hugo --cleanDestinationDir --minify"

編譯用 script：

cleanDestinationDir：在 編譯 前先刪除 public 目錄
minify：在 編譯 時將 HTML/CSS/JavaScript 加以壓縮

Line 8

"serve": "npx serve public"

顯示編譯過的網站：

npx：類似 npx 一次性執行 serve，不必手動安裝到 global
serve public：使用 serve web server 執行 public 目錄下的 HTML/CSS/JavaScript

Conclusion

NPM Script 適合參數不多，若參數過多就必須使用 Bash Script
雖然本文僅列少數參數，但基本上 開發 與 編譯 也都夠用

限制 SCSS 巢狀結構只能一層

2025-08-19T01:59:12.000Z

雖然 SCSS 的巢狀結構沒有限制層數，但好的 BEM 配合 SCSS 最好只要一層就好，可以透過 Stylelint 加以限制。

Version

Stylelint 16.23.1

Stylelint

.stylelintrc

{  "extends": "stylelint-config-standard-scss",  "plugins": ["stylelint-scss"],  "rules": {    "max-nesting-depth": [      1,      {}    ]  }}

Stylelint 設定檔

Line 4

"rules": {  "max-nesting-depth": [    1,    {}  ]}

max-nesting-depth：
1：設定巢狀結構最多只能 1 層

Conclusion

SCSS 巢狀結構太多層並不好維護，可透過 Stylelint 加以限制

限制 CSS 巢狀結構只能一層

2025-08-19T01:57:11.000Z

雖然 CSS 的巢狀結構沒有限制層數，但好的 BEM 配合 CSS 最好只要一層就好，可以透過 Stylelint 加以限制。

Version

Stylelint 16.23.1

Stylelint

.stylelintrc

{  "extends": "stylelint-config-standard",  "rules": {    "max-nesting-depth": [      1,      {}    ]  }}

Stylelint 設定檔

Line 4

"rules": {  "max-nesting-depth": [    1,    {}  ]}

max-nesting-depth：
1：設定巢狀結構最多只能 1 層

Conclusion

CSS 巢狀結構太多層並不好維護，可透過 Stylelint 加以限制

統一 SCSS 樣式排序

2025-08-19T01:54:39.000Z

若由多人共同開發 SCSS，不同的樣式排序將造成困擾，可透過 Stylelint 將樣式統一排序。

Version

Stylelint 16.23.1
Stylelint-config-clean-order 7.0.0

Stylelint

$ npm install -D stylelint $ npm install -D stylelint-config-clean-order

stylelint：檢查 SCSS
stylelint-config-clean-order：Stylelint plugin：SCSS 樣式排序規則

.stylelintrc

{  "extends": [    "stylelint-config-standard-scss",    "stylelint-config-clean-order"  ],  "plugins": ["stylelint-scss"]}

Stylelint 設定檔

Conclusion

stylelint-config-clean-order 已經幫我們設定好排序的規則，因此不用再設定任何 rule

統一 CSS 樣式排序

2025-08-19T01:51:31.000Z

若由多人共同開發 CSS，不同的樣式排序將造成困擾，可透過 Stylelint 將樣式統一排序。

Version

Stylelint 16.23.1
Stylelint-config-clean-order 7.0.0

Stylelint

$ npm install -D stylelint $ npm install -D stylelint-config-clean-order

stylelint：檢查 CSS
stylelint-config-clean-order：Stylelint plugin：CSS 樣式排序規則

.stylelintrc

{  "extends": [    "stylelint-config-standard",    "stylelint-config-clean-order"  ]}

Stylelint 設定檔

Conclusion

stylelint-config-clean-order 已經幫我們設定好排序的規則，因此不用再設定任何 rule

次世代 Hugo

Claude Code for WebStorm 初體驗

Version

Claude Code Plugin

Conclusion

Reference

Claude Desktop 初體驗

Version

Homebrew

Claude Desktop

Sign In

Welcome

Preference

General Desktop Settings

Claude CLI 初體驗

Version

Homebrew

Claude CLI

Theme

Claude Account

Trust Folder

Welcome

Conclusion

支援 Pointfree 的 Function

Version

文字與內容處理

資源與圖片處理

集合與排序

安全與編碼

邏輯判斷與預設值

Hugo 之 4 大特色

Version

快

完整 Toolchain

Function Pipeline

Context

Conclusion

我的 WebStorm 基本設定

Version

Shell Script Name

Appearance

Compact Mode

Editor Font

Backgroud Color

Console Font

Code Folding

Appearance

Breadcrumbs

Editor Tabs

Gutter Icons

Sticky Lines

Appearance

Active Editor

Project Options

Inlay Hints

Tool Windows

Keymap

Plugins

使用 WebStorm 開發 Hugo (Modern CSS)

Version

Smart Hugo

Project Directories

Disable Prettier

Disable Stylelint

Enable EditorConfig

HTML Style

CSS Style

Editor Config

Actions on Save

Git

Shell Script

Conclusion

使用 Excluded 隱藏檔案目錄與停止索引

Version

Excluded

Hugo

Hexo

Appearance

Directories

Conclusion