Hugo によるサイト生成

このページには GitLab Pages を使うために静的サイトジェネレーター Hugo の使い方のメモが書いてあります。

Hugo について #

Hugo は、Markdown 形式のテキストファイルを HTML に変換してくれます。 その他、Go 言語で記述されているため他の静的サイトジェネレーターよりも高速であることや、簡単に Markdown の記述形式を拡張ができる (Hugo では shortcode と呼ぶ) ことなどの特徴があります。

Hugo のテーマ #

Hugo はテーマによってサイト全体の見栄えを変えることができますし、自分で テーマを作ることも可能です。

GitLab Pages の Hugo テンプレートプロジェクトには、あらかじめ次の２つのテーマが含まれています。

その他のテーマは こちらから選べます。

Docker を使ってローカル環境でテスト表示 #

GitLab に更新内容を push する前に Docker Compose を使ってローカル環境で表示確認をできるようにします。

Hugo は ウェブサーバーの機能も提供されています。 使い方は簡単で hugo server コマンドを使うだけです。

Docker で利用する場合には、hugo server --bind 0.0.0.0 のオプションを付ける必要があります。 Hugo server はデフォルトでは localhost (127.0.0.1) からしかアクセスできないように IP アドレスバインドをしてサービス提供するため、コンテナーを使う場合、コンテナー内からでしかアクセスできないことを意味します。 そのため、コンテナー外からアクセス可能なように、バインドアドレスを Any (0.0.0.0) に指定する必要があります。

Hugo server は デフォルトでは 1313 ポートを使うため、Docker を使う場合はホストにマッピングする必要もあります。

GitLab Pages にホスティングする際、config.toml の baseurl 設定に URL を記載する必要があります。 これがルートディレクトリーを指す URL でない場合 (GitLab Pages の場合必ずそうなる)、ローカルでテストする際にはディレクトリー構造が異なるため、正しくリンクできません。 そのため、--baseURL オプションで localhost などに更新しておく必要があります。

その他さまざまな コマンドラインオプションがあるのでテスト用に必要なものを付ければよいです。

Docker Compose でこれらをまとめると こちらのようになります。

Tips #

Hugo を使っていて気付いた tips を載せておきます。