JekyllをDokcer上で動かしてGitHub Pagesのローカル環境での確認を楽する

7194 ワード
docker-compose Jekyll github-pages Docker Jekyll テキストリンク

はじめに

Jekyllを使うとmarkdownで書いたページをGitHub Pagesに公開できますが、
JekyllをDocker上で動かすとローカル環境が汚れない上に簡単にプレビューを確認できます。

利用するDocker image

公式の jekyll/jekyll を利用します。
リポジトリは envygeeks/jekyll-docker。
https://github.com/envygeeks/jekyll-docker/blob/master/repos/jekyll/opts.yml を見る限りはGitHub Pagesで利用するなら全部入りじゃなくて pages タグ指定で問題なさそう。

docker pull jekyll/jekyll:pages

Jekyllイメージの使い方

要点としては、

  • コンテナはポート4000が解放されているためコンテナ側は4000を指定する
    • -p 4000:4000 (ホストの4000にポートフォワーディングする場合)
  • コンテナ内のworkingディレクトリは srv/jekyll となっているのでそこをvolumeとしてマウントする
    • --volume="$PWD:/srv/jekyll"(ローカル側はカレントディレクトリをマウントする場合)

となるため、下記が基本形となります。

docker run --rm --volume="$PWD:/srv/jekyll" -it -p 4000:4000 jekyll/jekyll jekyll command

# 新しくページを生成する
docker run --rm --volume="$PWD:/srv/jekyll" -it -p 4000:4000 jekyll/jekyll jekyll new yourpage

# ページをビルドする
docker run --rm --volume="$PWD:/srv/jekyll" -it -p 4000:4000 jekyll/jekyll jekyll build

# ページを確認する
docker run --rm --volume="$PWD:/srv/jekyll" -it -p 4000:4000 jekyll/jekyll jekyll serve

詳しくは リポジトリ のREADMEとjekyllの--helpオプションで。

docker run --rm -it jekyll/jekyll jekyll --help

docker-composeでJekyllイメージを利用する

一度ページを生成した後は serve --force_polling で変更を捕捉して自動ビルドさせながら確認できるので、下記のようなdocker-compose.ymlを作成すれば docker-compose up するだけでローカル環境で簡単にプレビューできます。

docker-compose.yml

version: '3.7'
services:
  app:
    image: jekyll/jekyll:pages
    command: jekyll serve --force_polling
    volumes:
      - $PWD:/srv/jekyll
    ports:
      - 4000:4000

というわけで、簡単ペライチGitHub Pages作成用のDockerテンプレートを作成しました。
shifumin/jekyll-docker


git clone [email protected]:shifumin/jekyll-docker
cd jekyll-docker
docker-compose up
# index.md を編集する

docker-comopose up すれば自動ビルド検知が走るのであとはindex.mdを編集しながらリアルタイムで http://localhost:4000 で変更を確認できます。
_config.yml や _layouts の説明は省略しますが、ルートにある index.md を対象にビルドが走り _site/index.html が生成されそちらが http://localhost:4000 でプレビューされます。

.
(略)
├── _site
│   (略)
│   └── index.html
└── index.md

補足

GitHub Pagesで公開

GitHub Pagesで公開するにはリポジトリにpush後に リポジトリの Settings > GitHub Pages のSourceを master branch に変更します。
しばらく待つと公開されます。

---
layout: default
title: Title
---
# Title
- hoge
- foo

みたいな雑なmarkdownを用意すると下記のようなGitHub Pagesとして公開されます(今回はリスト箇所に適当なスタイルを当てています)

参考