[Docker知識不要]Docker上でのHugo環境の作り方

Docker上でのHugo環境の作り方

こんにちは、ITエンジニアの田中です！
この記事を読むと下記の事ができるようになります。

• Docker上でHugo環境を作れる。
• Docker上のHugoのコンテナに入り新規記事を作る事ができる。
• Docker上のHugoの簡易サーバーを動かしホストOSのブラウザから閲覧できる。

下記のことが事前に完了していることが前提です。

• Dockerがインストールされている
• ホストOSでgitが使用できる

私の最初の失敗

Docker Hubにある下記のイメージを使用してHugo環境を作成しようとしました。
publysher/hugo

しかし、起動に失敗。理由は多分事前にHugoのコンテンツがなかったことが原因です。
事前に環境がないから作りたいと思っていていたのでハードルが高い。。。。
もっと簡単に作りたい。そして、ローカル環境にgo開発環境を作らないで、かつあたかもローカルで記事を書いたりしたいと思っていました。

事前知識もなくHugo環境をdockerで作れる！方法を見つけたので共有します。

フォルダ構成

docker-compose用の任意箇所にフォルダを作ってください。
フォルダ名をhugoとします。

hugoフォルダ配下に下記のファイルを作成します。
- DockerFile
- docker-compose.yml

Dockerfile内容

下記のDockerfileを作成します。

FROM debian:stretch
LABEL maintainer "you1978 <[e-mail]>"

# Install pygments (for syntax highlighting) 
RUN apt-get -qq update \
    && DEBIAN_FRONTEND=noninteractive apt-get -qq install -y --no-install-recommends python-pygments git ca-certificates asciidoc \
    && rm -rf /var/lib/apt/lists/*

# Download and install hugo
ENV HUGO_VERSION 0.69.2
ENV HUGO_BINARY hugo_${HUGO_VERSION}_Linux-64bit.deb

ADD https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/${HUGO_BINARY} /tmp/hugo.deb
RUN dpkg -i /tmp/hugo.deb \
    && rm /tmp/hugo.deb

# Create working directory
RUN mkdir /usr/share/blog
WORKDIR /usr/share/blog

# Expose default hugo port
EXPOSE 1313

# Automatically build site
ONBUILD ADD site/ /usr/share/blog
ONBUILD RUN hugo -d /usr/share/nginx/html/

# By default, serve site
ENV HUGO_BASE_URL http://localhost:1313
CMD hugo server -b ${HUGO_BASE_URL} --bind=0.0.0.0

docker-compose.yml

下記のdocker-compose.ymlファイルを作成します。

version: '3'
services:
  web:
    build: .
    image: my/hugo
    volumes:
      - ./site:/usr/share/blog
    ports:
      - "1313:1313"
    stdin_open: true
    tty: true

Hugoの新規サイトを作成する

ターミナルにて、Hugoフォルダに移動して、下記のコマンドを実行する。

> docker-compose run -w /usr/share web hugo new site blog 

実行するとHugoフォルダ直下siteというフォルダが作成されています。

Hugoのテーマを適用する

下記のコマンドを使用して
ホストOS上でsiteの下のthemeフォルダに移動します。
今回はanankeというテーマを例として使用します。

> cd site/themes
> git clone https://github.com/budparr/gohugo-theme-ananke.git

下記のファイルを移動させてください.

移動元
site/themes/gohugo-theme-ananke/exampleSite/config.toml

移動先
site/config.toml

config.tomlを開いて、下記の行をコメントアウトしてください。

 # themesDir = "../.."

Hugoイメージの構築

下記のコマンドを実行しHugoイメージを構築します。

docker-compose build

Hugoの起動

下記のコマンドを実行しサイト

docker-compose up -d

サイトにアクセスする

ブラウズを開いて、下記のURLをアドレスバーに入れてください。

http://localhost:1313/

下記の画面が表示されたら成功です。

新しいページを作成する

下記のコマンドを実行すると新しいページが作成されます。

docker-compose run web hugo new post/page2.md

下記のファイルを編集するとサイトも更新されます。
hugo/site/content/page2.md

大きく変更するとサイトが更新されない時があります。
その場合は、コンテイナを再起動してください

docker-compose down
docker-compose up

以上、[Docker知識不要]Docker上でのHugo環境の作り方でした。
コメントお待ちしています。