最近「Hugo」を使ったWebサイトの制作を行いました。
Hugoを使うのは初めてだったのですが
色々と便利な機能が多かったので、今回はHugoの便利機能について紹介したいと思います。
Hugo（ヒューゴ）はGo言語で記述された静的サイトジェネレータで、「静的CMS」とも呼ばれます。
https://gohugo.io/ （公式サイト）
Hugo自体はGo言語で作られていますが、サイトの作成ではGo言語の知識は不要です。
テーマはHTML・CSS・JSなどで書き、記事（ページ）はマークダウンで書きます。
Hugoでのサイト制作では、Hugo本体の他にターミナルや git などを利用します。
Hugo本体はPCのOSに合わせて公式の手順でインストールしてください。
https://gohugo.io/getting-started/installing/
※テーマ開発でSASS・SCSSを利用したい場合は「extended」バージョンのHugoを利用する必要があります。
Hugoでサイトを制作する際に、基本のセットアップを行います。
まずはターミナルで、サイトのファイルを置きたい場所で下記のコマンドを実行します。
> hugo new site hogehoge
その後、Hugoコマンドで基礎ファイルを作成します。
「hogehoge」の部分はサイト名など任意の名前を指定してください。
このコマンド1つで基本的なファイルが全て作成されます。
セットアップはこれで完了です。
HugoではWordpressのように「テーマ」を利用してサイトの見た目を設定します。
https://themes.gohugo.io/
HugoではGitで取得できるテーマが公開されています。
その中から好きなテーマを取得するか、自分で作成することも可能です。
> cd hogehoge
> git init
> git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
上の例では、「ananke」というテーマを取得します。
1行目：セットアップコマンドで作成したサイトのディレクトリに移動
2行目：gitのセットアップ
3行目：URLを指定してテーマファイルを追加
という流れになります。
その後、セットアップで自動作成された hogehoge/config.toml ファイルにtheme = "ananke" を追記します。
以上で使用するテーマの指定は完了です。
テーマはいくつも同時に持つことができます。
使用したいテーマを変更したいときは、config.toml のテーマ指定の部分を違うテーマ名に変更するだけでOKです。
config.toml に使用する言語を指定することで多言語ページも作成できます。
日英のサイトなどを作りたいときに便利です。
config.toml の defaultContentLanguage の部分を ja に変更し、サイトの言語を日本語にします。
次に、同じく config.toml に下記の設定を加えます。
英語版のサイト名などを指定することができます。
[languages]
[languages.ja]
languageName = "Japanese"
title = "hogehogeのページ"
[languages.en]
languageName = "English"
title = "hogehoge pages"
設定はこれで完了。
実際の記事（ページ）は content ディレクトリ以下に .mdファイル （マークダウンファイル）で作成します。
「content/index.md」→「public/index.html」hugo でビルドを実行すると、 .mdファイルはテンプレートを通して上記のようにhtmlファイルに生成されます。
このファイルはトップページになります。
このファイルを「content/index.ja.md」という名前にして、もう一つ「content/index.en.md」を作成して、ビルドを実行すると…
index.ja.md は「public/index.html」に
index.en.md は「public/en/index.html」というファイルになります。
ファイル名で日本語ページなのか英語ページなのかを判断できるうえ、
ビルド後のディレクトリを自動で作ってくれるので階層を気にする必要が無いのが便利です。
また、利用しているテーマが多言語に対応している場合
日本語と英語を切り替えるボタンなどを自動で表示してくれるものもあります。
こちらはテーマが対応している場合のみですが、多言語対応のテーマでは i18n を利用できる場合もあります。
例えば、
「themes/テーマ名/i18n/ja.toml」と「themes/テーマ名/i18n/en.toml」があった場合に、それぞれの .toml ファイルに下記の様に記載します。
[news]
other = "ニュース"
↑i18n/ja.toml
[news]
other = "News"
↑i18n/en.toml
そして、テーマ内のテンプレートから {{ i18n "news" }} と呼び出すと
XX.ja.md、XX.en.md でそれぞれの言語にあわせて「ニュース」「News」の表記を分けてビルドしてくれます。
この設定はグローバルメニューの多言語化などに便利です。
Hugoにはローカルサーバの機能が搭載されています。
> hugo server
ターミナルで上記のコマンドを実行すると、サーバが起動します。
サーバが起動したら http://localhost:1313/ でブラウザで表示を確認することができます。
こちらはプレビューとして利用することができます。
.md ファイルを更新して、保存した瞬間にプレビューが更新されるのでいちいちブラウザを更新させる必要がありません。
Hugoはインストールや、ターミナル、gitなどのツールも使うため
少し敷居が高いかもしれませんが使い方がわかるとあっという間にサイトを作成するとができるようになります。
私も今後もHugoを使いこなせるよう、たくさんの案件に取り入れていきたいツールでした。