第1章 セクション1 JekyllとGitHub Pagesとは
動作環境
このチュートリアルは、Linuxオペレーティングシステムを前提としています。 Macユーザは、インストールなどの部分をMacの方法に置き換えれば、問題なく読み進めることができます。 Jekyllは、Windowsで動かすためのヒントを公開しています。 そこに書かれていますが、最新のWindowsにはWindows Subsystem for Linux (WSL)があり、Linux環境を実行できます。 それを使えば、このチュートリアルの内容をそのままWindowsのWSLで試すことができます。
免責事項等
- このチュートリアルはその内容が正しいことを保証するものではありません
- GitHub PagesやJekyllの更新により、このチュートリアルの内容が古くなってしまう可能性があります
- このチュートリアルによっていかなる損害が発生したとしても補償はいたしません
- チュートリアルの内容は不定期に更新されます
- チュートリアルに誤りや分かりにくい箇所があったとき、ご意見や提案があるときは、レポジトリのissueに投稿してください
Jekyllとは
Jekyllは静的なウェブサイトを構築するツールです。 静的なサイトの構築は、動的なサイトと比べ学習コストを低く抑えられます。
ところで、Jekyllはスペルが独特なので読み方が難しいですが、標準的な発音は「ジェキル」です。
Jekyllの特徴について見ていきましょう。
- 構築されるのは静的なウェブサイトで、ユーザからの入力はできない(Disqusなどの外部機能を使えば実現できるが、標準的な機能ではない)
- データベースを使わない
- Markdownを使える
- Liquidを使える(Liquidはテンプレートエンジンと呼ばれる一種のプログラミング言語)
- テーマがある。テーマを使えば一から構築しなくて済む
これらがJekyllの特徴ですが、最初は何のことか分からなくても大丈夫です。 チュートリアルを読み進めていけば、これらがJekyllの長所であることが分かってくるでしょう。
Jekyllのウェブサイトはこちらです。
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でプログラムする人
- B: 構築されたウェブサイトに内容を加える人
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ディレクトリ下のファイルでレイアウトが形作られているので、そのファイルをアップデートすれば、すべての対応ページのレイアウトを一気に変更できます。
同時に、新規ページの作成や既存ページの更新では、レイアウトを記述する必要がないので、コンテンツに集中できます。