Hugoテーマ設定方法 - Themes

テーマのダウンロード

HugoでWebサイトを生成するときは、見た目の基本テーマを設定する必要がある。テーマを設定せずにhugoコマンドでWebサイトを出力しても、真っ白なページが表示される。テーマは自分で作成することもできるが、Hugo Themesというページに他の人が既に作成したテーマが公開されているため、まずはここからダウンロードして使用するとよい。使い方はテーマごとに少しずつ異なるため、詳しい内容は各テーマの説明(README.md)を読むことを勧める。

テーマZIPファイルをダウンロードする方法

たとえば、下の“Beautiful Hugo”というテーマが気に入った場合は、下のDownloadボタンを押す。

一般的にはGitHubサイトへ移動するため、“Code"を押し、“Download zip"ボタンを押してテーマをダウンロードする。

ダウンロードしたテーマはプロジェクトのthemesディレクトリに入れる。ここではthemes/beautifulhugoディレクトリに入れればよい。

テーマをGitから取得する方法

テーマはGitHub上で管理されているため、Gitコマンドを使用できる環境であれば、次のようにgit cloneで取得するのが簡単である。もちろん、まずリポジトリのURLを知っている必要がある。URLはGitHubでCodeボタンを押して表示されるURLをコピーすればよい。

$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo

もし自分のサイトをGitで管理している場合は、次のようにテーマをGitサブモジュールとして取り込むのがよい。Gitサブモジュールのコマンド(git submodule)は少し難しいが、テーマをサブモジュールとして管理すると、テーマ側の更新を適切に反映できる。

テーマをサブモジュールとして取得する

$ git submodule add https://github.com/halogenica/beautifulhugo.git beautifulhugo

テーマの更新を取得するとき

$ git submodule update --remote --recursive

必要な場合のテーマ別設定

テーマによっては外部コンポーネントに依存しており、初期設定が必要なものもある。テーマで次のように関連モジュールをインストールするよう求められた場合は、そのまま次のコマンドを実行しておく。

$ npm install
$ npm run build

参考までに、npmはNode.js用のパッケージマネージャーであり、Node.jsをインストールすると一緒にインストールされる。

使用するテーマを指定する

テーマはthemesディレクトリに複数ダウンロードできる。その中で現在使用したいテーマは、Hugo設定ファイルで次のように設定する。

config.toml

theme = "beautifulhugo"

テーマを設定した後、hugoコマンドでWebサイトを生成してみる。設定したテーマを基に、アップロード用のHTML、CSS、JSなどのファイルがpublicディレクトリに出力される。

$ hugo

hugo serverコマンドは、Webサーバーを起動するときにconfig.tomlで設定したテーマを使用する。

hugoコマンドを実行するときに、-tオプションで使用するテーマを指定することもできる。

$ hugo -t theme_name         // サイトを出力する場合
$ hugo server -t theme_name  // Webサーバーを起動する場合