GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる

「GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる」です。

他の記事はこちら。

Jekyllとは

JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。

htmlを事前に生成して、公開時にはサーバーサイドによる動的な処理を実行せずhtmlを表示するだけなので、静的サイトになります。 JekyllにはWordpressのように、いくつかのテーマが提供されていて、それらを活用することで簡単にブログサイトを構築することができます。

静的サイトジェネレータは他にもHUGOやGatsbyなどがありますが、GitHub PagesはデフォルトでJekyllをサポートしています。そのため、特別なカスタマイズをしなければ、Jekyllで事前にビルドする必要もなくGitHub Pagesでテーマを活用したブログを構築することができます。

GitHub PagesでJekyllのテンプレートを使うのは簡単です。リポジトリのメニューからSettingsを開いて、下の方にあるGitHub Pagesの設定をみると、 Choose a theme というメニューがあります。

Choose a theme

ボタンをクリックするとテーマセレクタ画面が表示されます。テーマを選択することでプレビューを見ることもできます。良さそうなテーマがあれば、Select themeで決定します。

Select theme

するとテーマが適用されます。具体的にはリポジトリに _config.yml というファイルが新しく追加されています。中身は以下のようになっています。

theme: jekyll-theme-cayman (実際に選んだテーマ)

Jekyllはこの_config.ymlに基づいて静的サイトを生成しますが、GitHub PagesはJekyllをサポートしているので既存のテーマを使うだけであればこれだけでテーマを適用することができます。

Jekyllのルールではブログの記事は _postsフォルダの中に、YYYY-MM-DD-title.mdという形式で記事を配置する必要があります。例えば、2020-05-26-first-post.mdなどです。

Markdownファイルを作成したら、ファイルの一番上の部分にタイトルや日付などのメタデータを書き込み、その下に記事のコンテンツを書き込みます。

---
layout: page
title: "First post"
date: 2020-05-26
---

# Fist post

First post

これをリポジトリに配置すれば記事が公開されます。

トップページに記事の一覧を表示するにはindex.mdに以下を追記します。

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

次のPart3ではJekyllの設定をカスタマイズする方法を書いていきます。