【Hugo】Docker上でHugo環境を構築する【Compose Watch】

技術記事
【Hugo】Docker上でHugo環境を構築する【Compose Watch】

Hugo環境をDocker上で構築・実行する手順についてまとめます。

関連記事

HugoにDockerを使うメリット

HugoにDockerを使うメリットとしては、主に以下があります。

  • hugo.exeのダウンロードや環境変数の設定が不要
  • どこでも同じ環境（バージョン）を再現できる

ただし、起動がやや重く、Dockerのイメージサイズも大きいため、個人のブログ執筆のような小規模でやる場合だとあまり恩恵は受けられないかなと思います。

構築手順

Docker自体の環境構築についてはここでは割愛します。

Hugoのフォルダ内でDockerfileとcompose.ymlを配置します。Dockerイメージは公式が出しているものがありませんので、今回はサードパーティー製の「hugomods」を使います。

それぞれファイルを以下の通りにします。Hugoのバージョンは最新にします。

Dockerfile
1FROM hugomods/hugo:latest
2
3COPY . /src/
4
5EXPOSE 1313
6
7ENTRYPOINT ["hugo", "server", "--bind", "0.0.0.0", "--port", "1313", "-D", "-F"]
compose.yml
 1services:
 2  hugo:
 3    build: .
 4    ports:
 5      - "1313:1313"
 6    develop:
 7      watch:
 8        - action: sync
 9          path: .
10          target: /src

コンテナ起動時は、ターミナルで以下のコマンドを実行します。ホットリロード機能を実現するためにCompose Watchを利用しています。

ターミナル
1$ docker compose up -d # コンテナ起動
2
3$ docker compose watch # ホットリロード

ローカルでの構築時と同様に、http://localhost:1313/を開くことでサイトプレビューを確認できます。

新規記事を作成する際は以下のコマンドを実行します。

ターミナル
1$ docker compose exec hugo hugo new <file名> # コンテナ内に新規ファイル作成
2
3$ docker compose cp hugo:/src/content/<file名> . # コンテナからローカルにコピー

今回は、Dockerでブログを構築する方法について紹介しました。ローカルにはブログのソースのみ置けば良いというのがDockerの利点ですね。以上で記事を終わりにします。

参考文献