🖋️

Jekyll環境をdocker composeで構築してみた

2 min read

静的WebサイトジェネレーターであるJekyllの環境をdocker composeにて構築してみましたので、備忘録として記します。

Jekyllとは

Jekyllとは静的なWebサイト(HTML・CSSファイル)をMarkdownファイルから生成することができるジェネレーターです。

ちょっとしたWebサイトを立ち上げたいときに、Markdownを書くだけで素早くWebページを作成することができます。

https://jekyllrb.com/

GitHub共同創業者が立ち上げたプロジェクトである[1]ためか、Webサイトのホスト先としてGitHubPagesとの連携がスムーズです(情報も多いです)。とはいえ、HTML・CSSファイルが生成されますので、公開できるサーバーがあれば公開まで問題ありません。

Dockerで環境構築がしたい

JekyllはRubyにて開発されており、Rubyのライブラリの1つとしてインストールされます。

ただ、個人的に普段Rubyを使用していないため、そのためにRuby環境から整えるのは億劫…ということでDockerでの環境構築を目指します。

DockerイメージはJekyllより公開されているので、そちらを使用します。

https://hub.docker.com/r/jekyll/jekyll/

なお、下記ブログ記事を参考に構築させていただきました。

https://nprog256.net/post/2019/01/build-jekyll-environment-by-docker-compose/

実施環境

  • Debian10
  • docker-compose 1.27.4
  • Jekyll 4.2.0

docker-compose.ymlの作成

docker-compose.yml
version: "3"
services:
  service_jekyll:
    image: jekyll/jekyll:latest
    container_name: local_jekyll
    volumes:
      - ./app/_site:/usr/src/app
      - ./output/_site:/srv/jekyll/_site
    command: jekyll serve -s /usr/src/app --watch --verbose --trace
    ports:
      - "4000:4000"

volumes

  • ./app/_site/
    • markdownファイルを配置するフォルダです
  • ./output/_site/
    • 生成されたHTMLが出力されるフォルダです

commands

jekyll serveコマンドを実行することで、Markdownファイルを変換し、http://localhost:4000/へWebサイトをホストします。

各引数について理解している範囲では以下のような内容です。

  • --watch
    • 実行中もMarkdownファイルが変更されたら検知して、変更を反映します
  • --verbose
    • 詳細のログを出力します
  • --trace
    • エラー発生時にすべてのバックトレースを出力します

https://jekyllrb.com/docs/configuration/options/

index.mdの作成

ローカルフォルダの./app/_site内にindex.mdを作成します。最初の---で囲まれた行はYAML Front Matterと呼ばれるJekyllが読み込む設定をするものです。

こちらがないと正しくHTMLファイルが生成されません。

今回は特に設定を記述していませんでしたが、様々な設定があります。

https://jekyllrb.com/docs/front-matter/
index.md
---
---

# one

## two

---

- test1
- test2

HTML生成

docker-compose up

上記にて、生成処理を開始し、ローカルにて生成されたHTMLを表示します。実行後にhttp://localhost:4000/へアクセスすると無事に表示されていました。

ハマった点

ローカルファイルの書き込み権限

はじめ実行したときに、./app/_site, ./output/_siteの書き込み権限がなく、正しく実行できませんでした。これは、docker-composeの処理で作成されていたこれらのローカルフォルダに対して権限をもっていなかったからでした。

chmodコマンドで権限を付与すると無事に動きました。

一人のソフトウェアエンジニアとして、Web系が専門でなくとも、シンプルな静的ページをサクッと作れるようになりたいですね。便利なツールのおかげで、また1つスキルを得ることができました。

脚注
  1. https://ja.wikipedia.org/wiki/Jekyll ↩︎

Discussion

ログインするとコメントできます