Hugo：Go言語で開発されたオープンソースの静的サイトジェネレーター 105

Hugoとは？

HugoはGo言語で開発された静的サイトジェネレーターで、高速かつ高い柔軟性を備えています。テンプレートシステムと高速なアセット処理パイプラインにより、数秒で完全なWebサイトをレンダリングできます。Hugoは、企業、政府、非営利、教育、ニュース、イベント、プロジェクトのサイト、ドキュメントサイト、画像ポートフォリオ、ランディングページ、ビジネス・プロフェッショナル・個人のブログ、履歴書など、さまざまな種類のWebサイトを生成できます。

Hugoの主な機能

高速なアセット処理パイプライン

• 画像処理：変換、リサイズ、切り抜き、回転、色調整、フィルター適用、テキストや画像のオーバーレイ、EXIFデータの抽出などが可能です。

• JavaScriptバンドル：TypeScriptとJSXをJavaScriptにトランスパイルし、バンドル、ツリーシェイク、圧縮、ソースマップの作成、SRIハッシュの実行を行います。

• Sass処理：SassをCSSにトランスパイルし、バンドル、ツリーシェイク、圧縮、ソースマップの作成、SRIハッシュの実行を行い、PostCSSと統合します。

• Tailwind CSS処理：Tailwind CSSのユーティリティクラスを標準CSSにコンパイルし、バンドル、ツリーシェイク、最適化、圧縮、SRIハッシュの実行を行い、PostCSSと統合します。

柔軟なフレームワーク

• Hugoは多言語対応と強力な分類システムを備えており、ドキュメントサイト、ランディングページ、企業、政府、非営利、教育、ニュース、イベント、プロジェクトのサイトの作成に広く利用されています。

組み込みWebサーバー

• 開発プロセス中にHugoの組み込みWebサーバーを使用することで、コンテンツ、構造、動作、レンダリングの変更を即座に確認できます。

Hugoモジュール

• 公開またはプライベートのGitリポジトリを通じて、他のプロジェクトとコンテンツ、アセット、データ、翻訳、テーマ、テンプレート、設定を共有できます。

Hugoのバージョン

Hugoには3つのバージョンがあります：スタンダード版、エクステンデッド版、エクステンデッド/デプロイ版です。エクステンデッド版とエクステンデッド/デプロイ版では、WebP形式への画像エンコード、組み込みLibSassを使用したSassのCSSへのトランスパイルなどの高度な機能が提供されます。エクステンデッド/デプロイ版は、Google Cloud Storageバケット、AWS S3バケット、Azure Storageコンテナーへの直接デプロイにも対応しています。

Hugoの使い方

1. 新しいサイトを作成

ターミナルを開き、以下のコマンドを実行して新しいHugoサイトを作成します：

hugo new site mynewsite
cd mynewsite

2. テーマを追加

Hugoテーマライブラリからテーマを選び、サイトに追加できます。例としてhydeテーマを取り上げ、Hugoモジュールシステムを使ってテーマをインポートします：

# Hugoモジュールシステムを初期化
hugo mod init github.com/<your_user>/<your_project>
# hugo設定ファイルにテーマをインポート
# hugo.tomlまたはhugo.yamlファイルを編集し、以下の内容を追加
[module]
[[module.imports]]
path = "github.com/spf13/hyde"

3. コンテンツを作成

以下のコマンドで新しい記事を作成します：

hugo new posts/my-first-post.md

次に、生成されたMarkdownファイルcontent/posts/my-first-post.mdを編集し、記事の内容を追加します。

4. 開発とプレビュー

開発プロセス中は、Hugoの組み込みWebサーバーを使用して、コンテンツ、構造、動作、レンダリングの変更をリアルタイムで確認できます。以下のコマンドを実行してサーバーを起動します：

hugo server -D

-Dオプションは草稿の記事を含めることを意味します。ブラウザを開き、http://localhost:1313にアクセスすると、サイトが表示されます。

Github：https://github.com/gohugoio/hugo