Skip to the content.

第1章 セクション1 JekyllとGitHub Pagesとは

動作環境

このチュートリアルは、Linuxオペレーティングシステムを前提としています。 Macユーザは、インストールなどの部分をMacの方法に置き換えれば、問題なく読み進めることができます。 Jekyllは、Windowsで動かすためのヒントを公開しています。 そこに書かれていますが、最新のWindowsにはWindows Subsystem for Linux (WSL)があり、Linux環境を実行できます。 それを使えば、このチュートリアルの内容をそのままWindowsのWSLで試すことができます。

免責事項等

Jekyllとは

Jekyllは静的なウェブサイトを構築するツールです。 静的なサイトの構築は、動的なサイトと比べ学習コストを低く抑えられます。

ところで、Jekyllはスペルが独特なので読み方が難しいですが、標準的な発音は「ジェキル」です。

Jekyllの特徴について見ていきましょう。

これらがJekyllの特徴ですが、最初は何のことか分からなくても大丈夫です。 チュートリアルを読み進めていけば、これらがJekyllの長所であることが分かってくるでしょう。

Jekyllのウェブサイトはこちらです。

https://jekyllrb.com/

GitHub Pagesとは

GitHub Pagesは、GitHubのレポジトリを通して静的ウェブサイトを公開できる仕組みです。 GitHubは標準ででJekyllをサポートしており、ファイルをプッシュ(送信)するだけで自動的にサイトを組み立てて(ビルドして)くれます。 GitHubには有料と無料のコースがありますが、無料でも十分に使えます。

GitHub PagesはJekyllと非常に相性が良く、両者を使うことで効率よくウェブサイトを構築することができます。

GitHub Pagesのヘルプはこちらです。

https://docs.github.com/ja/pages

JekyllとGitHub Pagesの利点

チームのプログラムスキルの差をカバーできる

利点は多々ありますが、ここではサイト作成者のプログラミングスキルの観点から考えてみたいと思います。

サイト提供者は一人のことも複数のこともあります。 最低一人はプログラミングの知識が必要ですが、そうでない人も関わることができます。 ここでは次の2つのタイプの製作者を考えましょう。

AはJekyllやHTMLなどの知識が必要な「開発者」ですが、Bにはプログラムのスキルは必要ありません。 Markdownが書ければ十分で、Markdownすら必要ない場合(以下の例)もあります。

例えば、そのウェブサイトが毎日の天気を記録して、グラフや表にして表示するとします。 Aはそのウェブの仕組みを作り、Bは毎日の天気を入力してウェブに上げるというように役割分担ができます。 まずはAがサイトを作らなければなりません。 一度作ってしまえば、Aはメンテナンスをするだけで、その後はBが作業するだけです。

Bは、例えば

date: 2022-08-18
weather: 晴れ
temperature: 32

というYAML形式のデータ・ファイルを_dataディレクトリ下に作成、または更新し、GitHubレポジトリにプッシュ(送信)します。 これだけで、更新されたサイトを公開できます。 この例についてはこのチュートリアルの最後の方で取り上げます。

もうひとつの利点は開発者にとっても作業が楽になるということです。 Jekyllではウェブサイト構築の相当部分を自動化できます。 テーマを使えば更に作業の大部分をしなくて済むようになります。

サイトの構築の開発コストが比較的低く抑えられる

動的ウェブサイトではサイト攻撃に対する対策に悩まされることが少なくありませんが、静的なサイトは比較的安全性が高く、開発の負担を軽くできます。 また、Jekyllではデータベースを使わないので、学習コストが低く、同時に開発コストも低く抑えられます。。

いったん公開されたのちも、多くのページやレイアウトがLiquidというプログラムで自動的にビルドされるので、メンテナンスが楽です。 例えば、多くのページは_layoutsディレクトリ下のファイルでレイアウトが形作られているので、そのファイルをアップデートすれば、すべての対応ページのレイアウトを一気に変更できます。 同時に、新規ページの作成や既存ページの更新では、レイアウトを記述する必要がないので、コンテンツに集中できます。