Hugoの環境構築

2026年7月3日

Hugoは、「世界最速のウェブサイト構築フレームワーク」を掲げる、Go言語製の静的サイトジェネレーター（SSG）です。公式のクイックスタートを実践しながら、インストールからサイトビルドまでやってみましょう。

Hugoとは？

「静的」というのは、あらかじめコンテンツを作成しておき、サイト訪問時にそれをそのまま表示するサイトです。反対に、サイト訪問時にリクエストを受けてからコンテンツを生成するようなタイプは「動的」と呼ばれ、WordPressなどが該当します。

静的サイトを導入する理由として、以下のようなメリットが挙げられます。

ページの表示が速い
データベース不要で、始めやすい
管理画面がなく、リスクが減る
マークダウンファイルでコンテンツを管理できる

Hugoの使い方のチュートリアルは、公式クイックスタートを参照すると分かりやすいです。サイト（プロジェクト）の作成からサイトのビルドまでの一連の流れが整理されています。

Hugoのインストールからサイトビルドまで

Hugo、Git、Go言語をインストールしておこう

クイックスタートを始めるにあたり、インストールしておくべきものがあります。Hugo、Git、Go言語です。

Hugoには、４つのエディションがあります。ビルドしたサイトをクラウドに直接デプロイするなら「extended/deploy」、それ以外なら「extended」を選択しておけばいいと思います。

「standard」と「extended」の違いは、組み込みのLibSassを使えるかどうかです。現在はLibSassが非推奨になり、DartSassを代わりに使うことが推奨されています。DartSassは自前で用意する必要がありますが、どのエディションのHugoでも使えます。つまり、「extended」を選ぶ理由は機能のためではなく既存テーマとの互換性のためですね。

HugoはGo言語で開発されていますが、通常のサイト運営でGo言語やGo言語の知識が必要になることはありません。しかし、Go Moduleという仕組みを使えるとのちのち再利用・配布がしやすくなります。Go言語をインストールするかどうかは、お好みでいいでしょう。

サイト作成、そしてビルド

Hugoは活発にアップデートされており、古いバージョンでは使えない機能があるので、最新のものをインストールしましょう。

好きなディレクトリで以下のコマンドを実行すると、サイトを作成・テーマ作成・ビルドができます。クイックスタートでは「Ananke」というテーマを導入していますが、ここでは新しいテーマを作成します。

hugo new project Your-Project-Name
cd Your-Project-Name
hugo new theme Your-Theme-Name

「hugo new theme」は、プロジェクトの「themes」フォルダ内に最低限動くテーマのひな型を作成してくれます。プロジェクトのhugo.tomlを開き、「theme = ‘Your-Theme-Name’」を追加しておきましょう。

baseURL = 'https://example.org/'
locale = 'en-US'
title = 'My New Hugo Project'

theme = 'Your-Theme-Name'  <-  追記

ここまで設定できれば、ひとまずビルドが可能になります。以下のコマンドで、開発用サーバーを起動します。

hugo server

ブラウザを開き、「http://localhost:1313」にアクセスしてみましょう。サイトが表示されたはずです。hugo.tomlのtitleに自分のサイト名を入れてみると、自動で更新されます。なんとなく、Hugoの使い方が分かってきたのではないでしょうか。

実際にサーバーへデプロイする場合は、「hugo」コマンドを使用します。「public」の中のファイルたちを、サーバーへアップロードすれば完了です。