WordPress代替の模索：静的ジェネレーターHUGOの環境をDockerで構築
WordPressは多数のプラグインに依存していて、管理と運用コストが大きいため、代替技術として静的ジェネレーターへの移行を考え始めました。
GatsbyやHexo、Vuepressなど色々あるなーと調べていて、取り急ぎHUGOを試すことに。
実際に試してみて、とても使いやすそうだったので、情報をシェアします。
HUGO
HUGOはGolangベースで作られた静的サイトジェネレーターです。読み方はヒューゴとかユーゴ。
brewで手軽にインストールできるのが○。ビルドされたバージョンがあるので、Mac以外でも簡単に導入できるのが利点です。
WordPressはPHPやMySQLのバージョン管理も考えないといけませんが、静的サイトジェネレーターならバックエンドを考慮する必要がないため、メンテナンスが容易です。
記事の内容はMarkdownで書いて、Githubにプッシュして管理できるのでバックアップも不要。資産を残しやすいメリットがあります。
テーマはWordPressと比べると少ないですが、現段階で300以上あり、素敵なデザインのテーマも揃っているため、チャチャっと構築できます。
まだ競合が少ないので、オリジナルテーマを製作して公開するのもありですね！
環境構築
ローカルでの開発用にdocker。本番環境にNetlifyを使いました。
dockerを使うとHUGOの利点である速度が若干犠牲になります。Homebrewで簡単にインストールできるので、個人用途なら直にホスト側へインストールして使うのが良さそうです。
今回はチームでの記事の投稿・運用を考慮し、どのPCでも瞬時に環境整備できるdockerで環境を構築しました。
ディレクトリ構成
.
├── docker-compose.yml
├── hugo/
├── hugo.dockerfile
└── netlify.toml
マルチコンテナではありませんが、ディレクトリのマウントやポートフォワードが容易なので、docker composeを利用しました。
hugo.dockerfile
FROM debian:10-slim
ENV HUGO_VERSION='0.58.2'
ENV HUGO_NAME="hugo_extended_${HUGO_VERSION}_Linux-64bit"
ENV HUGO_URL="https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/${HUGO_NAME}.tar.gz"
WORKDIR /hugo
RUN apt-get update \
&& apt-get install -y --no-install-recommends \
wget \
git \
ca-certificates \
&& wget "${HUGO_URL}" \
&& tar -C /usr/bin/ -xzf "${HUGO_NAME}.tar.gz" \
&& rm "${HUGO_NAME}.tar.gz" \
&& apt-get remove -y wget \
&& apt-get autoremove -y \
&& rm -rf /var/lib/apt/lists/* \
こちらのdockerファイルが非常に参考になりました。 ありがとうございました。 https://github.com/peaceiris/hugo-extended-docker
しばらくAlpineを使っていたのですが、依存関係を処理するのが大変なので、今後、イメージのベースはdebianを積極的に採用しようと思います。
docker-compose.yml
version: '3'
services:
hugo_app:
container_name: hugo_app
build:
context: .
dockerfile: hugo.dockerfile
ports:
- 1313:1313
tty: true
volumes:
- ./hugo:/hugo
ポートフォワードとディレクトリのマウントをここで指定しています。
netlify.toml
[build]
publish = "./hugo/public"
command = "hugo -s ./hugo"
Netlifyの公開用ディレクトリと、ビルド時の実行コマンドを指定しています。
環境の起動
docker-compose up -d で環境が起動します。
HUGOの設定と起動
HUGOのバージョン確認
hugo コマンドが使えるか確認します。この時点でコマンドが実行できない場合は何かおかしいのでdockerfileとか見直します。
docker container exec -it hugo_app hugo version
新しいHUGOサイトの作成
docker container exec -it hugo_app hugo new site .
テーマの追加
下記コマンドでanankeというテーマを導入しています。
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git hugo/themes/ananke
コンフィグファイルの設定
config.tomlというファイルに、使用するテーマの指定やサイトのタイトルなどを書き込みます。
# config.toml
languageCode = "ja"
theme = "ananke"
title = "HELLO HUGO！"
[params]
commentoEnable = true
記事の作成
下記コマンドを実行すると、自動で content/posts/ ディレクトリに記事ファイルが作成されます。
docker container exec -it hugo_app hugo new posts/1st-post.md
HUGOサーバーの起動
サーバーを起動します。
docker container exec -it hugo_app hugo server -D --bind="0.0.0.0"
-D は、下書きの記事も閲覧できるようにするオプション。
--bind="0.0.0.0" はコンテナ越しにアクセスできるようにするためのオプションです。
これで localhost:1313 へアクセスすると、HUGOのウェブサイトを閲覧できます。
本番環境へのデプロイ
デプロイ先はnetlifyにしました。
CI
githubにリポジトリを用意し、netlify側でそのリポジトリを指定します。
公開用のディレクトリとビルド時のコマンドを設定することで、リポジトリのファイルが更新された時に自動でCIが走ります。
コマンドとディレクトリはnetlifyの設定画面から指定できますが、 netlify.toml で指定することもできます。
netlify.toml はリポジトリのルートディレクトリに置き、下記のような感じで設定します。
# netlify.toml
[build]
base = "./hugo/"
publish = "./public/"
command = "hugo --gc --minify"
まとめ
まだ使いこなせていませんが、静的サイトジェネレータのメリットがよくわかりました。netlifyも非常に便利です。
今回の試験用に整備した、HUGOのdockerテンプレートは↓こちらのリポジトリに公開しました。