Jekyll

超絶簡単！一番やさしいJekyllの始め方 (2022年版）

自分のブログサイトを作りたいと思ったとき、テック系の皆さんであれば静的サイトジェネレータ（SSG）を選択肢の一つとする方が多いと思います。この記事は静的サイトジェネレーターの基礎を学びたい方向けの内容となっています。

目次

はじめに

この記事では静的サイトジェネレーターの題材としてJekyllを取り上げます。同様のSSGにはHugoやNext.jsなど様々あり、日々増殖しています。SSGを学ぶためにはどれを選択してもよいと思います。

それらの中からJekyllを選択する価値の一つとして、GitHub Pageが採用していることがあるでしょう。また，Rubyで実装されているのも加点対象です1。

この記事は、公式のStep by Step チュートリアルでも難しいと感じる方向けに書いてみました。この記事を読んでから再度ご覧いただければ、より理解が深まると思いますので、ぜひお試しください。

準備しておくもの

この記事は次の環境で書きました。それほど難しいことはしないので、細かなバージョンの違いは気にしなくて良いでしょう。

Table 1: 必要なコマンド
コマンド バージョン
ruby 3.1.2p20
jekyll 4.2.2

また、Linux等shellが使える環境を使います。Windowsの場合WSLでさくっと用意しましょう。

なおJekyllをインストールする方法は インストール | Jekyll • シンプルで、ブログのような、静的サイト をご覧ください。

もっともシンプルなJekyllサイト

では，もっともシンプルなサイトをSSGのJekyllで作りましょう。はじめは，index.html一つだけのサイトです。 

$ mkdir my-tiny-site
$ cd my-tiny-site
$ echo "<p>Hello World</p>" > index.html

このフォルダで次の通り、Jekyllサーバを起動します。 

$ jekyll serve

起動したら，ブラウザでlocalhost:4000にアクセスしてください。「Hello Word」が表示されたら成功です。

blankサイトを作ってみる

先程の例はあまりにも簡素でした。もう少し、複雑な例を見ましょう。

Jekyllでは new コマンドを作ることでサイトのテンプレートを作成できます。更に、 --blank オプションをつけることで、基本的な最小限度の骨組みのみを生成します。 

jekyll new --blank my-blank-site

このコマンドでできたファイルを次に示します。 

my-blank-site/
├── _config.yml
├── _data
├── _drafts
├── _includes
├── _layouts
│   └── default.html
├── _posts
├── _sass
│   └── main.scss
├── assets
│   └── css
│       └── main.scss
└── index.md

Jekyllでサーバーを起動し、このサイトを見てみましょう。

my-blank-siteの出力結果

--blank をつけないと？

ちなみに、 --blank をつけないで生成すると、次のようになります。 

my-site/
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2022-10-07-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown

サーバを起動してブラウザでアクセスし、記事を開くと次の画面になります（方法は割愛します）。

my-siteの出力結果

先程より，だいぶナイスな画面になりましたね！

・・・ですが、このサイトを題材にして学ぼうとすると

  • Gemfileを使うため、rubyのbundlerの仕組みや使い方も学ぶ必要があること（あるいはすでに知っていること）
  • mimimaというテーマが予め適用されているので、Jekyllのテーマについても一緒に学ばなくてはならなくなること
  • Jekyllのカテゴリ等も使われていて、知らないとあれ？と思う挙動があること（どうしてこのURLになるのか、等）

といった点で、私としてはまずは --blank オプションありの方がスタートラインとしては良いように思います2。

blankサイトのファイルの役割

閑話休題、blankサイトに話を戻し、生成されたファイルの役割を見てみましょう。できたファイルのうち、この記事では次の3つを解説します。

  1. index.md
  2. _layouts/default.html
  3. _config.yml

index.mdファイル

まず、index.mdファイルです。拡張子が .md であるから分かるとおり，このファイルは Markdown 形式で作成します。中身はこのようになっています。 

---
layout: default
title: "Happy Jekylling!"
---

## You're ready to go!

Start developing your Jekyll website.

まず，先頭の「---」で囲まれた部分はフロントマター（Front Matter）といいます。フロントマターとは、このindex.mdというファイルをJekyllにどのように扱ってほしいかをYAML形式で記述したもので、いわゆるメタ情報です。

layoutとtitleの2つの値が設定されています。これらの値はJekyllが解釈しサイトを生成する処理で使われます。

残りの「##」以降の内容はJekyllによりHTMLに変換され、最終的にはブラウザに表示されます。

default.htmlはLiquidで書かれたテンプレート

では、default.htmlの内容を見てみましょう。 

  
  <!DOCTYPE html>
  <html lang="{{ site.lang | default: "en-US" }}">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta charset="utf-8">
      <title>{{ page.title }} - {{ site.title }}</title>
      <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
    </head>
    <body>
      {{ content }}
    </body>
  </html>

default.htmlは拡張子を見ても中身を見てもまるでHTMLのようです。しかしながら実際にはLiquidというテンプレート言語で書かれています。ざっくり言えば，HTMLの中にプログラム言語で言うところの変数や制御構造（if文やfor文）を埋め込むことができます。このLiquidで書いた内容はJekyllによって解釈され、ブラウザで閲覧できるHTMLに変換されます。

ここで、先程のindex.mdとdefault.htmlの関係は次のとおりです。

  1. Jekyllはindex.mdをhtmlに変換します
  2. すると、フロントマターにlayoutがdefault.htmlであることが書かれています
  3. そこで、Jekyllはまずdefault.htmlの方を先に読み込み、内容を解釈します

default.htmlの{{と}}に囲まれた箇所が、Jekyllが管理する変数を参照している箇所です。これらの変数は、どこかで値が代入されます。さて、page.titleにはなんの値が代入されているでしょうか。

勘の良い方ならお気づきかもしれませんが、index.mdのフロントマターの値、「"Happy Jekylling!"」が代入されます。titleの前に「page.」が付いているのは、このテンプレートを読み込む元となったページ（index.md）のフロントマターの値ですよ、ということを示しているのです。

{{ site.title }}の方はどうでしょうか。こちらは、後で説明する_config.ymlファイルの中の値になります。どちらの場合でも、Jekyllは変数の値を参照し、{{と}}で囲まれた箇所を全て値で置き換えます。

さて、もう一つ、{{ content }}があります。これは、index.mdの本体（フロントマターではない部分）をHTMLに変換した結果が出力されます。

このような仕組みがあることで、index.html以外のファイルがdefault.htmlをレイアウトとして用いた場合でも、{{ page.title }}や{{ content }}の内容が置き換えられて表示されるのです。

サイト全体の設定を行う_config.yml

最後に、_config.ymlです。 

url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.

こちらには丁寧なコメントが付いてあります。この中のtitleを設定すればさきほどのdefault.htmlにあった{{ site.title }}に反映されます。

{{ page.title }}はページ毎に変わるタイトル、{{ site.title }}はサイト全体のタイトルと使い分ければよいでしょう。

他の、urlとbaseurlはJekyllがURLに関する変換処理などを行うために利用します。詳細は割愛いたします。

まとめ

テンプレートからHTMLへの変換作業を事前に行っておくのがSSGの特徴です。Wordpressも同様なテンプレート言語（PHP）を用いますが、変換作業はユーザが閲覧したときに行われます。このことが、SSGの方がいわゆる「軽く」なる理由です。要求されてから仕事をするか、予め仕事を終わらせておくのか、の違いですね。

--blank サイトの残りのファイルやフォルダについても、追って解説するつもりです。

余談：新しい技術を学ぶときの心得

新しい技術を習得するとき，できるだけ単純で全体の見通しの良いところをスタートラインとして，理解していくべきです。ある程度機能の揃ったサンプルプログラムはスタートラインとして実は好ましくありません。

技術の全体像を俯瞰できる最低限度の複雑さの範囲から理解していくのがよいです。いきなり頂上を目指すのではなく1合目，2合目と低い目標を順番にクリアしていきましょう。

余談ですが、私はこの記事を書いている最中に_draftsフォルダの存在と使い方を知りました。私が見ていたいくつかのサンプルにはこれがなかったか、あっても埋もれてて発見できなかったからだと思います。やはり、シンプルな状態から一つ一つ理解していくのがよいですね。

Footnotes:

1

好みによります。

2

加えていうとRuby 3ではWEBRickが標準ライブラリから削除されたのでGemfileに追記する必要があります。