Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@shifumin

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

はじめに

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 git@github.com: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 に変更します。
しばらく待つと公開されます。

Image from Gyazo

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

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

Image from Gyazo

参考

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What is going on with this article?