CrescPia

Jekyll スタートダッシュ

2024-11-23

Jekyll で Blog を始めたい！となった人向けの記事です。
チュートリアルに入るまでの環境構築についての説明です。

スムーズな導入の参考になれば幸いです。

Jekyll 環境構築

Docker を利用します。
Windows の WSL2 上での利用を想定しています。
（WSL2 とか Docker のインストール手順は省略・・・。）

Dockerfile の作成

Jekyll 用の Dockerfile を作成するのですが、ruby の Dockerfile をベースに Jekyll に必要なものを加えていきます。
alpine のものが格段に容量が小さくてよいと思います。（Docker Hub の ruby ）
下記 Dockerfile では、ruby:3.3-alpine を選択しています。

alpine 以外にすると下記の Dockerfile 内のパッケージインストールコマンド(apk …)が違ってきますのでご注意を。

Jekyll のドキュメントをみると事前にインストールが必要なものが書いてあります。

Ruby version 2.5.0 or higher
RubyGems
GCC and Make

Ruby と RubyGems はベースにしている ruby の Dockerfile に含まれているので OK です。
GCC と make を入れる必要があるのですが、単純に gcc と make をインストールしてもダメでした。
下記のように build-base を入れるとうまくいきます。

ドキュメントのインストール手順を読み進めていくと jekyll と bundler に加えて webrick を gem install するとあります。
bundler は ruby の Dockerfile に含まれているので OK です。jekyll と webrick をインストールします。
以下のような Dockerfile にしました。

FROM ruby:3.3-alpine
ENV USER=crescpia   // ← ホストである WSL2 のユーザー名と同じにするとよい   
RUN apk --update --no-cache add build-base \
    && adduser $USER -D \
    && passwd -u $USER
USER $USER
RUN gem install jekyll webrick
ENV TZ Asia/Tokyo

ホストのユーザーと同じ名前のユーザー（ユーザーid）を docker に作成しておくと権限の問題に悩まされないで済みます。

docker build

dockerfile のあるフォルダで docker build コマンドを実行します。（root でしか実行できない場合は sudo をつけて。）

$ docker build . -t jekyll --no-cache

docker-compose ファイルの作成

以下の内容で docker-compose.yml ファイルを作成します。

services:
    jekyll:
        image: jekyll
        container_name: jekyll
        restart: always
        volumes:
            - /home/$USER/jekyll/:/home/$USER/      # ← ホスト側のフォルダ /home/$USER/jekyll/ は予め作成しておくとよい
        ports:
            - "4000:4000"
        tty: true

volumes のホスト側のフォルダ /home/$USER/jekyll/ は起動すると自動で作成されますが、予め作成しておくとフォルダの owner がホストのユーザーになるので都合がいいです。
自動で作成すると root になってしまうので権限周りの調整が必要になります。

Docker の起動！

docker-compose.yml のあるフォルダで以下のコマンドを実行します。

$ docker compose up -d jekyll

ここまでで、Jekyll をインストールした環境ができました。
これからはプロジェクトごとの設定です。

Step by Step Tutorial

公式のチュートリアルに沿って進めていきます。
まずは、起動した docker に入ります。

$ docker exec -it -u crescpia jekyll ash   # ユーザー名 crescpia のところはご自身のユーザー名で！

次に docker 内でユーザーの home フォルダに移動します。これ以降は docker 内での操作です。

$ cd

そして、ブログの名前のフォルダを作成してフォルダ内に移動します。（フォルダ名は任意です。）

$ mkdir myblog
$ cd myblog

新規の Gemfile を作成するため以下を実行。

$ bundle init

作成された Gemfile に以下を追記する。
このファイルはホスト側からは /home/$USER/jekyll/myblog 内で見えています。
ホスト側から編集しても OK です。

gem "jekyll"

docker 内で以下を実行。

$ bundle

myblog フォルダ内に以下のファイル index.html を作成します。
上記同様、ホスト側から作成しても OK です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

開発用のサーバーを起動します。

$ bundle exec jekyll server --host 0.0.0.0

※ docker 内でサーバーを起動して Windows 上のブラウザで見る場合、オプション --host 0.0.0.0 が必要です。

Windows でブラウザを起動して localhost:4000 にアクセスすると Hello World! が表示されていると思います。
これでスタートラインに立てたので、引き続きチュートリアルを進めていってください！楽しいです！

シンタックスハイライトについて

ドキュメントにあるように以下のように highlight と endhighlight タグで囲めばいいです。このタグの代わりにもっと簡単に「```」で囲む方法でもOKです。
（実際に出力される html は若干異なりますが、画面表示には影響ないと思います。）
syntax highlight

しかし、bundler exec jekyll server を実行しても初期状態では色が付きません。
出力された html を見てみるとコードが分解されて class が付与されていてきちんとシンタックスハイライトの機能は効いているようです。

<div class="language-ruby highlighter-rouge">
  <div class="highlight">
    <pre class="highlight">
      <code>
        <span class="k">def</span>
         <span class="nf">foo</span>
          <span class="nb">puts</span> <span class="s1">'foo'</span>
        <span class="k">end</span>
      </code>
    </pre>
  </div>
</div>

実は、初期状態では css が効いていません。
いろいろな種類の css がここにあります。
望みのスタイルをダウンロードして適用すれば OK です。

まとめ

Jekyll を始めるための環境構築について説明しました。
自分自身は割とつまづきながらなんとか構築していました。
今回は、公式ドキュメントをベースに、つまづいた点を補いながら説明しています。
最短距離でチュートリアルまで進めると思います！