Dockerで起動したJekyllサーバーでブログ記事をプレビュー

はじめに

Jekyllでブログサイトを作成するにあたってDockerでJekyllサーバーを起動して記事をプレビューできるようにしました。その時の構築メモです。

環境構築

環境

以下の環境で構築しました。

環境	version
OS	CentOS Linux release 7.7.1908 (Core)
docker	Docker version 19.03.8, build afacb8b

フォルダ構成

まずフォルダ構成から決めました。

Github Pagesで公開することや、Dockerコンテナをコマンド実行ごとに廃棄することを考慮し、以下のようなフォルダ構成にしています。

.
├── .bundle/  # bundlerで利用するフォルダ。gemのインストール先
├── docs/     # Jekyllサイトの構成ファイルを配置
│   ├── 404.html
│   ├── about.md
│   ├── _config.yml
│   ├── Gemfile
│   ├── index.md
│   └── _posts/
└── Makefile  # コマンドを覚えられないのでMakefileに記載

• .bundleフォルダはgemのインストール先として使用

  コンテナは使い捨てにするので、毎回gemのインストールをしなくていいように.bundleフォルダをコンテナにマウントして再利用します。

• docsフォルダはJekyllサイトのフォルダ／ファイルの配置先として使用

  名前がdocsになっているのはGithub Pagesで公開するときに都合がよかったためです。

• Makefileは関連するコンテナ操作を簡易化するために作成

Dockerイメージ

JekyllのDockerイメージが公開されているのでありがたく利用します。

前述のとおりこのJekyllサイトはGithub Pagesで公開するつもりなのでバージョンはGithub Pagesで使用されるJekyllのバージョンに合わせます。2020/4/10時点では3.8.5です。

docker pullしておきます。

$ docker pull jekyll/jekyll:3.8.5

Makefile

pullしておいたDockerイメージを使ってJekyllの操作をしていきますが、コマンドのオプションを覚えられないのでMakefileを作っておきます。

DOCKER ?= $(shell command -v docker 2> /dev/null)
JEKYLL_VERSION = 3.8.5
DOCKER_IMAGE = jekyll/jekyll:$(JEKYLL_VERSION)

.PHONY: bash
bash: ## open interactive shell (bash)
	docker run -it --rm \
		-v $$PWD/docs:/srv/jekyll \
		-v $$PWD/.bundle:/usr/local/bundle \
		$(DOCKER_IMAGE) \
		bash

.PHONY: serve
serve: ## jekyll serve
	docker run -it --rm \
		-v $$PWD/docs:/srv/jekyll \
		-v $$PWD/.bundle:/usr/local/bundle \
		-p 4000:4000 \
		$(DOCKER_IMAGE) \
		bundle exec jekyll serve \
			--host 0.0.0.0 \
			--trace \
			--draft \
			--livereload

これでmake bashを実行するとbashでインタラクティブにコマンド操作ができます。

また、make serveを実行するとJekyllサーバーが起動します。

他にもビルド用の設定などを足しましたが説明は割愛します。最終的なMakefile全体はgistに載せているのでそちらを参照してください。

Jekyllサイトの作成

Jekyllサーバーの動作確認のためにJekyllサイトを作ってみます。

.bundle、docsフォルダを作ってからjekyll/jekyllイメージのコンテナを起動します。 コンテナ内でコマンドを実行したいのでmake bashを実行します。

$ mkdir {.bundle,docs}
$ make bash

docsフォルダをマウントした影響で所有者がローカルの所有者になっているため変更します。
（コンテナ内の操作はプロンプトをbash-5.0# にして記載しています）

bash-5.0# chown jekyll:jekyll .

jekyll newを実行し新しいJekyllサイトを作成します。

bash-5.0# jekyll new .

コンテナから抜けます。

bash-5.0# exit

Jekyllサーバーの起動

make serveでJekyllのサーバーを起動します。

$ make serve

ブラウザでhttp://<DockerホストのIPアドレス>:4000/にアクセスするとJekyllサイトの作成で作成したサイトをプレビューすることができます。

おわりに

Dockerで起動したJekyllサーバーでJekyllサイトをプレビューする環境を作ることができました。

気の向いたときに記事を書いていきたいと思います。