[Jekyll] docker-composeでJekyllの環境を構築してみた

Nプログラマ(@Nprog128)です。

シンプルな静的ファイルジェネレータを探していたら、Jekyllが良さそうだったので使ってみました。
Markdownから変換して出力もできるので、かなり便利そうです。

今回はDockerの環境を作って、作成したMarkdownを自動生成で静的ファイルに出力するところまでの備忘録を残します。

概要

目標

1. docker-composeでJekyllのDocker環境を作る
2. Docker環境で、Markdownから自動生成された静的ファイルを取得する

環境

• Mac OS X High Sierra 10.13.6
• Dockerが使える環境(自分はDocker Desktopを使っています)

やってみた

docker-compose.ymlを作成

上記を参考にして作成したdocker-compose.ymlはこんな感じです。

 1version: '3'
 2services:
 3  service_jekyll:
 4    image: jekyll/jekyll
 5    container_name: local_jekyll
 6    volumes:
 7        - ./app/_site:/usr/src/app
 8        - ./output/_site:/srv/jekyll/_site
 9    command: sh -c 'jekyll serve -s /usr/src/app --watch'
10    ports:
11      - '18080:4000'

command

ファイル変更が検知できたら自動的にビルドするために–watchオプションをつけてあります。

dockerを起動したまま定数ファイルの再読込のため、Docker内でこのコマンドを実行したい時があるのですが、このコマンドを削除してしまうと、ttyオプションをつけてもdockerが起動して終了してしまいます。
(具体的には、jekyllのヘルプの画面が出てきます)

imageのDockerfileのENTRYPOINT辺りを読んでいるのですが、なぜ終了してしまうのか分からないです。。。
時間がある時、少しずつ読んで分かったら追記していきます。

他にはdockerコンテナに入り、killコマンドを打ってもいけるんじゃないかなと思ったりもしましたが、killするとプロセスが終了するので、そこで止まっていた処理が進んでしまいdockerが終了してしました。。。

うーん、なかなかうまくいかないですね。
当面はdocker-composeコマンドで再起動するようにします。

よく考えると再起動するほうが通常の使い方のような気がしてきた。。。

volumes

appとoutputはDockerを起動する前に作っておきます。

app

ファイルの作成・変更を行うための場所です。
この中に_siteディレクトリが見えるようになるので、そこにファイルを作っていきます。

たぶんですが、ここの変更がコンテナ内に反映されて、–watchのオプションにより変更が検知されて自動生成される、という流れになっていると思います。

output

コンテナの自動生成された静的コードが入っているディレクトリをボリュームとして指定してあります。

自動生成されたファイルの取得方法が分からなかったので、コンテナの中に入り生成されているところを探しました。
なので、このような記述にしてあります。

自動生成されるディレクトリの場所を探した方法

1\$ docker-compose exec service_jekyll sh # コンテナの中に入る
2\$ ls # _siteディレクトリを確認できる
3\$ cd _site
4\$ ls # index.mdより生成されたindex.htmlが見える
5\$ pwd # パスを確認 /srv/jekyll/_site

確認したパスが、/srv/jekyll/_siteなので、outputのディレクトリにこれを指定しました。

Markdownでindex.mdを作る

dockerの起動

まずはdocker-composeコマンドでdockerを起動します。
終了させる時はCtrl+cで終了させます。

1\$ docker-compose up

index.mdの作成

それでは、app/_site内にindex.mdファイルを作ってみます。
見出しのみのシンプルな内容にしました。

1
2---
3---
4# One
5## Two
6### Three
7#### Four

「—と—」はYAML Front Matterというもので、記載しないとhtmlに変換されなくなります。
試しに外してみると、ブラウザでディレクトリファイルが丸見えになりました。
なので、空のまま記述しておきます。

YAML Front Matterでできることは他にもあるみたいなので、必要に応じて確認して使っていきたいと思います。
https://jekyllrb.com/docs/front-matter/

自動生成されたindex.htmlをディレクトリとブラウザで確認

このファイルを保存すると、outputディレクトリ内にindex.htmlが生成されていることが確認できます。

1<h1 id="one">One</h1>
2<h2 id="two">Two</h2>
3<h3 id="three">Three</h3>
4<h4 id="four">Four</h4>

ブラウザでlocalhost:18080にアクセスすると、見出しがついて表示されていることが確認できます。

これで自動生成できることが確認できました。
これらのファイルを、公開するサーバの公開ディレクトリに配置すればよさそうです。

終わりに

今回は、Docker環境のJekyllでMarkdownファイルをhtmlに自動生成するという内容でした。
分からないところが多いですが、調べつつゆっくり取り組んでいきます。

データベースが不要なページや、小さなサーバで運用する時に重宝すると思います。
これを使って、自分のプロフィールの紹介サイトを作りたいと思っています。
実際に作ってみたのですが、分割する必要がなかったので メインサイト にまとめる予定です。

それでは、このへんで。
バイナリー！

＼ ちょっとお買い物 ／