Hugo を使った 個人サイトの作り方 1 インストール編

tech 2303字：読了まで約4分15秒

Hugo アイキャッチ画像

Hugoのインストール

Hugo を利用できるよう、Windows 10 Home にインストールします。

ここで哀しいお知らせです。Hugo は基本的にコマンドライン（ドラマでハッカーがよく入力してる黒背景の窓）で操作します。

Githubからパッケージをダウンロードし、パスを通すという方法もありますが、バージョン管理なども面倒ですし、今回はコマンドラインベースで作業していこうと思います。

コマンドラインは Powershell 7（→Windows に PowerShell をインストールする - PowerShell | Microsoft Learn）を使用します。

※ちなみに次のコマンドでインストールできます

winget install --id Microsoft.PowerShell --source winget

Hugo 公式サイトには以下のような注意があります。

  • コマンドプロンプトを使わないで
  • Windows Powershellを使わないで
  • 後継のPowershellかLinuxのターミナル(WSL等）かGitで

最近まで私はコマンドプロンプトやWindows Powershellでバリバリ作業してましたが、今後は注意が必要だと思います。(2026-01-19 追記）

また、Windowsのバージョンについても追記があります。

Hugo v0.121.1 and later require at least Windows 10 or Windows Server 2016. （Hugo V0.121.1から後のバージョンは少なくとも Windows10 か Windows Server 2016が必要です）

インストールはどちらかのソフトを利用します。

Wingetでインストール

wingetはMicrosoftが開発したWindows向けのパッケージマネージャーです。 コマンドプロンプトやPowershellからコマンド入力だけでソフトのインストールを行うことができます。プリインストールされていると思います。 コマンドプロンプトを管理者権限で起動し、以下のコマンドを入力します。

winget install Hugo.Hugo.Extended
WingetでHugo Extendedをインストール

Yを押すとインストールが始まります。再起動しろと言われるので言う通りにしましょう。

Scoopでインストール

または、ソフト管理マネージャー Scoopをインストールします。 Scoopはいちいちインストールに管理者権限を必要としないのでラクです。

Powershell を開いて、以下の三行コマンドを入力します。Scoopの公式サイトに書いてあるのをそのままコピペしてきました。


cd C:\
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

Cドライブ直下に移動し、Scoopインストールを行うというコマンドです。 あとは自動的に進みます。Scoop was Installed Successfully!とコマンドプロンプトが喜んだら無事に終了です。

さて、肝心の　Hugo をインストールします。二種類ありますが基本的には Hugo Extended を選びます。

  1. CSS拡張のSASSが利用可能になる（一部テーマでは必須らしい）
  2. 新しい画像圧縮方式のWebPを使用できる。

の二点が特色です。

注意

Google Cloud Storage や AWS S3 、また Azure Storage container に直接デプロイしたい場合は、「extended/deploy edition」を選びましょう。

仕方ないので、パッケージを直接 Latest Release からDLします。Wingetでは「Hugo (Deploy)」でインストールできるようです。

このシリーズではFTPソフトを用いてレンタルサーバーに置く方法で公開するので、以降は説明しません。

コマンドラインに以下のコマンドを打ちます。

scoop install hugo-extended

hugo-extended’ (0.109.0) was installed successfully!

コマンドプロンプトが緑文字で喜びを訴え、これでHugo 本体のインストールは終了しました。

新しいサイトの作成

続けて、コマンドラインで cd [任意の作業用フォルダの場所] と入力し、作業用フォルダに移動します。（説明のため、C:\newsite\sitenameとしようと思います） そしてコマンドラインで以下を実行します。

hugo new site [サイト名]

コマンドプロンプトがまたもや喜びます。

「Congratulations! Your new Hugo site is created in C:\newsite\sitename.」

ディレクトリやファイルなど、基本的なサイトの雛形が作成されました！

ディレクトリ構造

ディレクトリ構造は以下のようになっています。

C:\NEWSITE\SITENAME
│  hugo.toml(config.toml)　※サイト全体の設定ファイル。v0.110.0から名称変更。
├─archetypes　※マークダウンファイル新規作成用テンプレートが入っている。
│      default.md
├─assets　※SASSファイル等を利用するときはここに入れる。
├─content ※コンテンツ本体となるmarkdownファイルを入れる。./content/post/指定テーマもある。
├─data　※サイト全体から参照できるデータファイルを入れる。簡易データベース。
├─layouts ※テーマを改造したい場合、themesフォルダ内部を直接編集せず、ここにコピーしたファイルを改定する。
├─public　※公開用ファイルがHugoによって作られる。中身をサーバーにアップロードすることでサイトが公開される。
├─static　※画像、CSS、Javascriptなどリソースを入れていく。Hugoによって./public/以下にコピーされる。
└─themes　※外観や構成などを制御するテーマファイルを入れる。

インストールが完了し、次からは具体的な作業に入っていきます。

Hugoでサイトを表示するためのテーマ利用に便利なので、GitをインストールしGithubアカウントも作っておくといいかと思います。Gitについて説明し始めると大幅に脱線するので本シリーズでは省略します。

関連記事