本文へスキップ

Development

Jekyll と Docker ではじめる

Docker コンテナを使って Jekyll をセットアップし、クリーンで分離された開発環境を構築する方法を解説します。マシンに Ruby や Jekyll を直接インストールすることなく、静的サイトを作成、カスタマイズ、デプロイする手順を紹介します。どのプラットフォームでも一貫したワークフローを求める開発者に最適です。

3 分で読めます

Jekyll は、GitHub の共同創業者である Tom Preston-Werner が Ruby で書いた静的サイトジェネレーターです。Jekyll は Liquid テンプレートと Markdown で記述されたコンテンツを解析して静的コンテンツを生成し、それをどんな Web サービスでも配信できます。この Markdown コンテンツには、WordPress のような他のブログプラットフォームでコンテンツを汚しがちな HTML、レイアウト、スタイル、カスタムショートコードが一切含まれません。

Jekyll の入門としては、Jekyll Bootstrap をおすすめします。

Docker

なぜ Docker を使うのでしょうか。Jekyll は基本構成では静的コンテンツを生成するだけですが、プラグインで拡張できます。Docker を使えば、すぐに起動できるシンプルなコンテナを開発者や継続的デプロイサービスに提供できるという利点があります。

Docker Machine

Linux ユーザーは Docker Machine のインストールを省略できますが、Docker Compose のインストールは必要です。OS X ユーザーは、まだ Docker Machine のインスタンスを実行していない場合は起動する必要があります。先に進む前に、最新の Docker Toolbox がインストールされていることを確認してください。

docker-machine create --driver=virtualbox default
eval $(docker-machine env default)

Docker Compose

docker-compose は通常 Docker のインストールに含まれていないため、Linux ユーザーは別途インストールする必要があります。手順は Docker の Web サイトに記載されています。

Jekyll コンテナ

Jekyll には Docker Hub にイメージがあるので、とても簡単です。

なお、ここでは GitHub Pages 版のコンテナは使用していません。GitHub Pages を使う予定がある場合は、以下のイメージタグを latest から pages に変更してください。pages イメージは、GitHub Pages が使用している Jekyll の構成をより正確に再現したものです。

リポジトリのルートに docker-compose.yml という名前のファイルを作成し、次の内容を入力します。

version: "2"
services:
  web:
    image: "jekyll/jekyll:latest"
    name: jekyll
    ports:
      - "4000:4000"
    volumes:
      - ./:/srv/jekyll
networks:
  default:
    driver: bridge

次に、Docker Compose で Docker コンテナを起動します。

docker-compose up -d

お好みの Web ブラウザを開いて http://localhost:4000 にアクセスします。まだファイルがないため、コンテナが使用する Web サービスはマウントしたボリュームのディレクトリ一覧を表示します。

OS X ユーザーの場合、Docker が仮想マシン内で動作しているため、localhost:4000 からは応答が返ってきません。代わりに、docker-machine ip default を実行して Docker Machine の IP を確認するか、VirtualBox でポートフォワーディングを設定する必要があります。default の Docker Machine が起動している状態で、ターミナルで次のコマンドを実行してポートフォワードを設定します。

VBoxManage controlvm "default" natpf1 "http,tcp,,4000,,4000"

これで、ローカルで配信されているかのように http://localhost:4000 にアクセスできるようになります。

サイトの初期化

サイトを初期化するには、既存の Jekyll コンテナを再利用できます。docker exec コマンドを使って、リポジトリのルートディレクトリで jekyll new . --force を実行します。

docker exec -it jekyll jekyll new . --force

ブラウザを更新すると、再コンパイルされたデフォルトの Jekyll テーマと、いくつかのサンプルページや投稿が表示されます。

ソース管理にコミットする

ここで Git リポジトリを追加し、サイトをコミットしてリポジトリにプッシュしておくとよいでしょう。<username> は GitHub のアカウント名に置き換えてください。

git init
git add . -m "Initial Jekyll site"
git remote add origin git@github.com:<username>/<username>.github.io.git
git push -u origin master

Jekyll の設定のカスタマイズ

いずれ Jekyll の _config.yml を更新したくなることがあり、その際は Jekyll サービスを再起動する必要があります。そのためには、実際には Docker コンテナを再起動する必要があります。

docker-compose restart
タグ: #Jekyll #Docker #Docker Compose
共有