Hugo

Hugo は、最も人気のあるオープンソースの静的サイトジェネレーターの 1 つです。その驚異的な速度と柔軟性により、Hugo は Web サイト構築を再び楽しくします。

PurgeCSS は、Hugo Pipes アセット処理を介して Hugo新しいウィンドウで開くで使用できます。

ツール

統計情報の書き込み

config.toml ファイルに、これを追加します

[build]
  writeStats = true

または、config.yaml ファイルを使用している場合は、これを追加します

build:
  writeStats: true

これは、Hugo にビルドの一部としてプロジェクトルートに hugo_stats.json ファイルを書き込むように指示します。これには、*.html テンプレートからのすべてのタグ、クラス、および ID が含まれます。

Node パッケージ

プロジェクトルートに package.json ファイルがまだ存在しない場合（すべてのノードの依存関係を追跡します）、プロジェクトルートディレクトリからこのコマンドを実行して作成します

npm init

必要なだけ情報を入力できます。ファイルが作成されたら、パッケージのインストールを続行できます。

プロジェクトルートからこれを実行して、必要なパッケージをインストールします

npm install postcss postcss-cli @fullhuman/postcss-purgecss --save

パッケージは node_modules というフォルダーにインストールされ、package.json ファイルにも追加されます。

まだない場合は、node_modules/ を .gitignore ファイルに追加します。

PostCSS 設定ファイル

プロジェクトルートに、次の内容の postcss.config.js ファイルを作成します

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./hugo_stats.json"],
  defaultExtractor: (content) => {
    const els = JSON.parse(content).htmlElements;
    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])];
  },
  safelist: [],
});

module.exports = {
  plugins: [
    ...(process.env.HUGO_ENVIRONMENT === "production" ? [purgecss] : []),
  ],
};

各オプションの詳細については、PurgeCSS 設定ドキュメントを参照してください。

注：safelist は（今のところ）空の配列です。HTML テンプレートからの要素のみが抽出されることに注意してください。したがって、JS が要素を追加する場合は、それらをセーフリストに登録する必要があります。

HTML テンプレート

<head> の HTML テンプレートに、これを追加します

{{ $css := resources.Get "css/style.css" | resources.PostCSS }} 
{{ if hugo.IsProduction }} 
    {{ $css = $css | minify | fingerprint | resources.PostProcess }} 
{{ end }}

<link
  rel="stylesheet"
  href="{{ $css.RelPermalink }}"
  {{ if hugo.IsProduction -}} 
    integrity="{{ $css.Data.Integrity }}"
  {{- end }}
/>

これは以下を前提としています

CSS ファイルは assets/css/style.css にあります
このファイルのプロダクションバージョンを縮小してフィンガープリントを作成します

これらの前提が当てはまらない場合は、コードを適宜変更してください。

使用方法

これで使用できるようになりました。

サイトをデフォルトの開発モードで提供します

hugo serve

ブラウザの DevTools を開き、[ネットワーク] タブに移動して、CSS ファイルのサイズを確認します。

次に、Control + C で停止し、サイトを本番モードで提供します

hugo serve --environment production

CSS ファイルのサイズが*はるかに小さくなった*ことに注意してください。

環境

--environment production オプションを渡したくない場合は、この環境変数を設定します

HUGO_ENVIRONMENT=production

参考資料

https://gohugo.io/hugo-pipes/postprocess/新しいウィンドウで開く

# Hugo

# ツール

# 統計情報の書き込み

# Node パッケージ

# PostCSS 設定ファイル

# HTML テンプレート

# 使用方法

# 環境

# 参考資料