Hugo で作るサイトのテーマ選びのコツ

去年新しく始めたことの一つが静的サイトジェネレーターの Hugo によるサイトを作ることだ。

これまで Hugo のサイトをいくつか作り、テーマをあれこれ試して分かったコツをメモしておこう。

最初にテーマ選びをするときは以下のページから探すことになるはず。

Complete List | Hugo Themes
https://themes.gohugo.io/

各テーマのページで「Demo」というデモページが見られるテーマが最初に感じを確認できるので便利だ。特にモバイルでどう見えるのかはサイトに掲載されたスクリーンショットだけでは分からないことが多い。パソコン、タブレット、モバイルで挙動を確認して良さそうなら使えばいい。

逆にあえてデモがないテーマにいきなり挑戦するのも面白い。

テーマの実体は Github で公開されている。最初にローカルのテーマディレクトリにダウンロードするときは、Github の左上に表示された {ユーザー名}/hogehoge の hogehoge の部分と同じディレクトリ名にしなければいけない。でないとのちのち正しく動かなかない。（あるいは hugo.toml に記述するテーマ名と統一していればディレクトリ名は自由にしていいのかもしれない。）

Github にはテーマのインストールや使い方が詳細に書かれているものが使いやすいだろう。中には前述のデモページをテーマの使い方の解説ページにしているものもある。

テーマはサンプルのサイトとして exampleSite が用意されているものがよい。これを Hugo のプロジェクトルートに上書きすれば、デモページがそのまま再現できる。それを編集することで自分用にカスタマイズするのが簡単だ。

Hugo の設定ファイルは以前は config.yaml だったが、現在のバージョンでは hugo.toml となっている。Github に用意されたものが config.yaml しかない場合があるが、config.yaml でも動くのでそれを使えばいいし、あるいは yaml 記法を toml 記法に変換して hugo.toml に記述すればいい。親切なテーマでは config.yaml と hugo.toml の両方を用意してくれている。

exampleSite の hugo.toml（あるいは config.yaml）をそのまま使えば問題ないはずだが、hugo.toml にどのテーマを使うのかを記述し忘れないようにしよう。でないとビルドした際にサイトに何も表示されない。

【特典付き! 】Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ)