本文へスキップ

Development

Hugo と Docker ではじめる

Docker コンテナを使って Hugo の静的サイトをセットアップする方法を解説します。ローカルへのインストールは不要です。分離された再現性のある環境で Hugo サイトを作成、開発、ビルドする方法をステップバイステップで紹介します。

4 分で読めます

Docker コンテナ

Docker Hub から Docker コンテナを pull します。

docker pull registry.gitlab.com/pages/hugo/hugo_extended:latest

タグ

Docker コマンドのたびに完全な URL を指定しなくて済むように、便宜上エイリアス（タグ）を作成しておきましょう。

docker tag registry.gitlab.com/pages/hugo/hugo_extended:latest hugo_extended

詳しくは docker tag を参照してください。

新しいサイトの作成

Hugo コンテナを使って、新しいサイトの作成を始めましょう。

docker run --rm -v ${PWD}:/src hugo_extended hugo new site quickstart
  • docker run Docker に実行させます（新しいコンテナを作成します）。
  • --rm コンテナの実行が終了したらコンテナを削除するよう Docker に指示します。
  • -v ${PWD}:/src ホストマシンのカレントディレクトリを、Hugo コンテナ内の /site フォルダにマウントします。
  • hugo_extended 先ほど pull した Hugo コンテナです。
  • hugo new site <site_name> Hugo の new site サブコマンドを実行します。Hugo コンテナでは、コンテナのメインのエントリーポイントとして hugo コマンドがすでに定義されています。最後の引数は作成するサイトの名前です。

上記のコマンドを実行すると、次のように表示されます。

Congratulations! Your new Hugo site is created in /src/quickstart.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

  1. Hugo はコンテナ内で実行しており、ホストには Hugo をインストールしていません。

  2. ボリュームをマウントしているため、hugo new site の実行で生成されたファイル（成果物）は、コンテナが破棄された後もホスト上に保持され、利用できます。

テーマの追加

テーマを追加する前に、これを本物のプロジェクトとして扱いましょう。

cd quickstart
git init
git add .
git commit -m "initial commit"

Git リポジトリができたので、サブモジュールとしてテーマを追加できます。

git submodule add https://github.com/calintat/minimal.git themes/minimal
git submodule init
git submodule update
echo 'theme = "minimal"' >> config.toml

このテーマが気に入らなければ、https://themes.gohugo.io/ で他のテーマを自由に探してみてください。

この時点で、次のコマンドでサイトを起動できます。

docker run --rm -v ${PWD}:/src -p 1313:1313 hugo_extended hugo server --bind 0.0.0.0
  • docker run Docker に実行させます（新しいコンテナを作成します）。
  • --rm コンテナの実行が終了したらコンテナを削除するよう Docker に指示します。
  • -v ${PWD}:/src ホストマシンのカレントディレクトリを、Hugo コンテナ内の /src フォルダにマウントします。
  • -p 1313:1313 ホストのポート 1313 をコンテナのポート 1313 にポートフォワードします。
  • hugo_extended 先ほど pull した Hugo コンテナです。
  • hugo server --bind 0.0.0.0 hugo server サブコマンドを実行します。コンテナ内で実行する場合は追加の bind オプションが必要です。指定しないと、ローカルのブラウザでサイトを開くことができません。

次のような出力が表示されます。

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 42 ms
Watching for changes in /src/{content,data,layouts,static,themes}
Watching for config changes in /src/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

ブラウザを開いて http://localhost:1313 にアクセスします。

確認が終わったら、ターミナルで Ctrl+C を押して、実行中の Hugo の Docker コンテナを停止します。

変更をコミットする

git add .
git commit -m "add theme submodule"

Docker Compose で効率化する

Docker Compose を使えば、入力の手間を減らし、必要なものをすべて立ち上げることができます。今回はサービスが 1 つだけですが、データベース、ロギングサービス、キーバリューサービス、API サービスが必要な場合を想像してみてください。1 つのコマンドを実行するだけでシステムが準備され、すぐに作業に取りかかれるのはとても快適です。

もう 1 つの理由は、継続的インテグレーションとデプロイです。Docker を使って環境間の一貫性を保つという話をよく耳にするでしょう。つまり、開発環境で動いているものが、設定の違いを除けばインテグレーション環境、ステージング環境、本番環境で動いているものと同じだということです。これは事実ですが、Docker Compose がもたらすもう 1 つの強力な点は、組み合わせ可能なデプロイコマンド群です。これについては後ほど詳しく説明します。

プロジェクトのルートに、次の内容で docker-compose.yml を作成します。

version: "3"
services:
  hugo:
    image: registry.gitlab.com/pages/hugo/hugo_extended:latest
    working_dir: /src
    ports:
      - "1313:1313"
    volumes:
      - ".:/src"
    command: server --bind 0.0.0.0

Hugo の起動

docker-compose up -d hugo

ブラウザを開いて http://localhost:1313 にアクセスします。

変更をコミットする

git add .
git commit -m "add docker-compose"
タグ: #Hugo #Docker #Docker Compose
共有