Hugoでテーマが反映されない(画面が真っ白のまま)

Hugoではテーマ(theme)を使って簡単にブログやサイトを作成することが可能です。テーマはGitHubなどにたくさん公開されて簡単に導入することが可能です。
しかし、テーマををインストールするのを忘れてしまうと、不具合の原因につながってしまうので注意が必要です。

今回はHugoを使って構築したサイトで、テーマが反映されずに画面が真っ白のまま担ってしまった場合の対処法を説明してきます。

テーマはサブモジュールでインストール

テーマはGitで管理されていることが多いので、そのままインストールしてしまうとHugoのディレクトリを汚染してしまいます。
Hugoでテーマをインストールする際はサブモジュール(submodule)として管理するようにしましょう。そうすることで、本来のHugoディレクトリに影響を与えることなく、テーマのアップデートなどを実行できます。

サイトをクローンしたら画面が真っ白のままになった

Hugoで作成したサイトを別の端末などでクローンした際に、画面が真っ白になってしまうことがあります。この問題に直面した場合は、まずはテーマがインストールされているかを確認しましょう。

インストールされていない場合は、サブモジュール化されたテーマを再度インストールすることで画面が真っ白い状態から正常な表示に変わるかと思います。

サブモジュールのインストールコマンドは下記のようになります。

git submodule update --init --recursive

Hugoのサイトをgit cloneする際は、テーマが反映されない場合が多いので、サブモジュールのインストールも忘れずに行うようにしましょう。

クローンするときに一緒にサブモジュールもインストール

そうは言っても、サブモジュールのインストールを忘れることが多いです。
その場合は、初回git cloneする際にsubmodule(サブモジュール)も一緒にcloneすることで不具合を起こすことなく、表示することができます。

git clone --recursive {クローンしたいリポジトリ}

まとめ

Hugoでテーマが反映されない(画面が真っ白のまま)のときの対応はいかがだったでしょうか。
サブモジュールで管理できるのは便利であると同時に、忘れてしまうとサイトの不具合につながってしまい、別端末で正常に動作していると解決が難しくなってしまうことも多いと思います。
Hugoのサイトをgit cloneする際はサブモジュールでテーマの反映も忘れないようにしておきましょう。

おすすめの書籍

書籍の紹介

デザイナーでもできる初めてのHUGOでのサイト作成 #01

デザイナーでもできる初めてのHUGOでのサイト作成 #01

Hugoで記事を投稿してみよう!Hugoでの記事投稿の仕方。

Hugoで記事を投稿してみよう!Hugoでの記事投稿の仕方。