tanaka's Programming Memo

プログラミングについてのメモ。

Mac+DockerでJekyllを動かす(おすすめせず)

mac Jekyll Docker

以下のブログを書いてみたのですが、チュートリアルとかをいじっているうちにDocker版だと古かったりパッケージがあれだったりとチュートリアルでそのままだとエラーが出たりとあれこれ起きるので、公式通りにchrubyなどでRubyを入れて普通に動かした方が良さげでした^^;

WordPressはプラグインが多くて面倒だし、大して記事を更新してないし。ということでJekyllを試してみようとMacに環境を構築してみました。DockerもJekyllも普段は使ってないのであれこれ備忘録として。

目次

実行環境

  • MBP Intelのやつ
  • macOS 13.2
  • Docker 4.16.2
  • Jekyll 4.2.2

RubyかDockerか

Jekyllの公式ページではchrubyでRubyをインストールすると良さげなことが書いてありました。

jekyllrb.com

Jekyllに必要なものはRubyだけなので、Homebrewでchrubyをインストールして対応版のRuby 2.5以降を入れるだけです。ただ、つい最近Laravelの環境構築でDockerを使ってDocker用のJekyllの設定もあったのでなんとなくDockerで構築してみました。

DockerとJekyllのDocker Imageを取得

  1. Dockerが入っていなければ以下でDocker Desktopをダウンロードしてインストールします

www.docker.com

  1. Docker Desktopを起動します
  2. ターミナルを開きます
  3. 以下のコマンドでJekyll用のDocker Imageを取得します。Jekyll用のDocker ImageはDocker Hubで見つかります
docker pull jekyll/jekyll

これでjekyll/jekyll:latestがDocker Desktopに加わります。

Jekyllサイトを新規作成

JekyllのDocker ImageのGitHubリポジトリページに使い方があるので、それに従ってJekyllサイトのフォルダーを新規に作成します。

  1. ターミナルでサイト用のフォルダーを作成したい場所へ移動します。例えば~/Documents/JekyllSitesなど
  2. 以下のコマンドを実行します。最初の行の`my-blog'の部分は、作りたいサイトの名前にします
export site_name="my-blog" && export MSYS_NO_PATHCONV=1
docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll sh -c "chown -R jekyll /usr/gem/ && jekyll new $site_name"
cd $site_name

必要なファイルがダウンロードされて、指定の名前のフォルダー内にJekyll用のファイルが準備されます。

Jekyllサービスの開始

作成したフォルダーの中で以下を実行することで、JekyllでサンプルのWebページが作成されて、ローカルサーバーでホストを始めます。

docker run --rm --volume="$PWD:/srv/jekyll:Z" --publish 4000:4000 jekyll/jekyll jekyll serve

以上で以下のようなメッセージが表示されて待機状態になれば成功です。

  Auto-regeneration: enabled for '/srv/jekyll'
    Server address: http://0.0.0.0:4000/
  Server running... press ctrl-c to stop.

http://localhost:4000 を開くとWelcome to Jekyll!というようなサイトが確認できます。

Jekyllのサンプルページ

しかし、このブログを書いた時点では上記は失敗します！！

ということで対処方法です。

webrickを加える

2023/2/12現在、JekyllのGemfileはRuby2.5の設定になっていてRuby3だとエラーが発生していまします。https://jekyllrb.com/docs/の下の方に以下のようなことが書いてあります。

Ruby3ではエラーが出るという説明

ターミナルのJekyllサイトのフォルダー内で以下を実行してwebrickを追加します。

bundle add webrick

かなり待ちましたが上記でwebrickを組み込めました。上のJekyllサービスの開始に戻って改めてサービスを開始してみてください。

bundleのバージョンなどの問題で上記で成功しない場合は以下の方法もあります。

  1. 作成したフォルダー内のGemfileをVisual Studio Codeなどのエディターで開きます
  2. 最後の行に以下を追加します
gem "webrick", "~> 1.8.1"
  1. 上書き保存します
  2. Gemfile.lockを開きます
  3. DEPENDENCIESの最後に以下を追加します
  webrick (~> 1.8.1)
  1. 上書き保存します
  2. ターミナルに切り替えます
  3. 以下を実行して、設定を更新します
docker run --rm --volume="$PWD:/srv/jekyll:Z" -it jekyll/jekyll:latest bundle update

以上でwebrickがインストールされます。上のJekyllサービスの開始に戻って改めてサービスを開始してみてください。

サイトの更新、終わり方

serveコマンドを実行しているので、_postフォルダーにある記事を書き換えると自動的にリビルドされます。サンプルページをリロードすれば更新が確認できます。

serveの後ろに--livereloadをつけて起動すればリロードも自動的にやってくれるようです。が、手元の環境だとリロードはしてくれませんでした。リロード押すだけなので別にいいのですが。

作業が終了したら、Jekyllを起動したターミナルで control + C キーを押せば停止します。

チュートリアルを進めるときの注意

上記の手順でブログを作成すると、あらかじめサンプルが作成されることに起因するエラーが公式のStep by Step Tutorialsで発生しました。

jekyllrb.com

Step7 Assetsでmain.scssを作ろうとするとエラーになります。これはサンプルがすでにmain.cssを加えていたからで、以下を参考にファイル名をmainからbaseなど別の名前に変更すれば動きました。

Error in Step by Step Tutorial - Help - Jekyll Talk

まとめ

MacにDockerでJekyllを動かす手順をまとめました。まとめましたが、チュートリアルでエラーが出たり、Jekyll自体の更新の頻度が低めな上、Docker Imageの更新がさらに遅いです。Dockerで扱えると楽なのですが、新しい機能が入った場合などを考えると公式のやり方がやはり正解っぽいと思い始めてます^^;

参考URL