Edited at

[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:jessie

LABEL maintainer "you1978 <you1978@hotmail.com>"

# 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.55.6
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 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の起動

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

docker-compose up -d


サイトにアクセスする

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

http://localhost:1313/

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

page.png


新しいページを作成する

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

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

下記のファイルを編集するとサイトも更新されます。

hugo/site/content/page2.md

大きく変更するとサイトが更新されない時があります。

その場合は、コンテイナを再起動してください

docker-compose down

docker-compose up

以上、[Docker知識不要]Docker上でのHugo環境の作り方でした。

コメントお待ちしています。