GitHub Pagesブログの作成と管理

2021年初めからJekyllを使ってGitHub Pagesにブログをホスティングし始めました。しかし、ブログ構築時にインストール過程を適切に整理しておかなかったため、後の維持管理に少し困難がありました。そこで、簡単にではありますがインストール過程と維持管理方法を整理しておくことにしました。
実は私がまだ静的サイトホスティングに慣れていないのが一番大きな理由です。 （2024.06 内容更新）

1. 静的サイトジェネレーター & ウェブホスティング

1-1. 静的ウェブページ vs 動的ウェブページ

静的ウェブページ（Static Web Page）

• サーバーに保存したデータをそのままユーザーに配信するウェブページ
• ウェブサーバーでユーザーのリクエストに該当する事前に保存されたページを配信する
• ユーザーは、サーバーに保存されたデータが変更されない限り、同じウェブページを見ることになる
• リクエストに該当するファイルのみを送信すればよいので、追加の作業が不要で、一般的に応答が速い
• 単純なファイルのみで構成されているため、ウェブサーバーのみを構築すれば良く、構築コストが安い
• 保存された情報のみを表示するため、サービスが限定的
• データの追加、修正、削除を管理者が手動で行う必要がある
• 検索エンジンがクロールしやすい構造で、検索エンジン最適化（SEO）に比較的有利

動的ウェブページ（Dynamic Web Page）

• サーバーに保存したデータをスクリプトで加工処理して配信するウェブページ
• ウェブサーバーでユーザーのリクエストを解釈してデータを加工した後、生成したウェブページを配信する
• ユーザーは状況、時間、リクエストなどに応じて変化するウェブページを見ることになる
• ウェブページの配信のためにスクリプトを処理する必要があるため、比較的応答が遅い
• ウェブサーバー以外にアプリケーションサーバーが必要なため、構築時に追加コストが発生する
• 様々な情報を組み合わせて動的に提供するため、多様なサービスが可能
• ウェブページの構造によっては、データの追加、修正、削除をユーザーがブラウザから行うことができる

1-2. 静的ウェブサイトジェネレーター（SSG, Static Site Generator）

• 生データ（通常はmarkdown形式のテキストファイル）と事前定義されたテンプレートに基づいて静的ウェブページを生成するツール
• 個別のHTMLページを直接作成する必要なく、マークダウンで投稿を作成すればウェブページをビルドしてウェブ上に配布するプロセスを自動化する
• 例）Jekyll, Hugo, Gatsby, Eleventy

1-3. GitHub Pages

• GitHubが無料で提供する静的ウェブページホスティングサービス
• アカウントごとに1つの個人代表ウェブページをホスティングでき、無制限にリポジトリごとのプロジェクトドキュメントページを作成およびホスティングできる
• ‘{username}.github.io’形式の名前で自分のGitHub usernameに合わせてリポジトリを作成した後、そのリポジトリにビルドしたHTMLページを直接Pushするか、またはGitHub Actionsを活用してビルドおよび配布を行うことができる
• 所有しているドメインがある場合は、設定で連携して’{username}.github.io’形式のデフォルトドメインの代わりに他のドメインアドレスを使用することもできる

2. 使用するSSGとテーマの選択

2-1. Jekyllを選んだ理由

Jekyll、Hugo、Gatsbyなど様々なSSGが存在しますが、Jekyllを使用することに決めました。使用するSSGを選択する過程で考慮した基準と、Jekyllを選んだ理由は次の通りです。

• 不必要な試行錯誤を最小限に抑え、記事作成とブログ運営に集中できるか？
  • JekyllはGithub Pagesで公式にサポートされている静的ウェブサイトジェネレーターです。もちろんHugo、Gatsbyなど他のSSGもGithub Pagesでホスティングできますし、Netlifyなど全く別のホスティングサービスを利用するという選択肢もありますが、実際にこの程度の規模の個人ブログを運営する上で、技術的にどのSSGを使用して構築したかやビルド速度、パフォーマンスなどはそれほど重要ではないので、少しでもメンテナンスが簡単で参考にできるドキュメントが多いものが良いと判断しました。
  • Jekyllはまた、Hugo、Gatsbyなど他の競合に比べて開発期間が最も長いです。それだけ関連ドキュメント化が十分になされており、実際に問題が発生した時に参考にできる資料の量が圧倒的に多いです。
• 使用できるテーマとプラグインが多様か？
  • 直接HTMLを作成するのではなくSSGを使用するとしても、各種テンプレートを直接作成するのは面倒で時間もかかり、あえてそうする必要もありません。ウェブ上にすでに公開されている優れたテーマが多いので、気に入ったものを採用して活用すれば良いです。
  • さらに私は元々CやPythonを主に活用するため、JekyllのRubyやHugoのGo言語はよく知らない状況だったので、なおさら既存に開発されているテーマとプラグインを積極的に活用しようと考えました。
  • Jekyllには一目で気に入るテーマをすぐに見つけることができた一方、HugoやGatsbyは比較的個人ブログ目的で使用するのに適したテーマの数がそれほど多くなかったように思います。おそらく上述したように、開発者たちが個人ブログホスティングのために多く使用するGithub Pagesとの連携性、そして開発期間がここにも大きく影響したようです。

2-2. テーマ選択

Minimal Mistakes (2021.01 ~ 2022.04)

• Github Repo: https://github.com/mmistakes/minimal-mistakes
• Demo Page: https://mmistakes.github.io/minimal-mistakes/
• ブログを最初に作成してから約1年3ヶ月間活用していたテーマ
• Disqus、Discourse、utterancesなどを通じたコメント機能サポート
• カテゴリーとタグ分類機能サポート
• Google Analytics基本サポート
• 事前定義されたスキン選択可能
• デザインがより洗練されていて気に入ったChirpyテーマを後に発見して移行しましたが、どちらにせよ工学部っぽいブログだということを考慮すれば、綺麗ではなくてもそれなりにすっきりしたデザインを持っていて無難に使用できたように思います。

Chirpy Jekyll Theme (2022.04~)

• Github Repo: https://github.com/cotes2020/jekyll-theme-chirpy/
• Demo Page: https://chirpy.cotes.page/
• 2022年4月にブログテーマを移行して以来、現在まで使用中のテーマ
• 複数カテゴリー分類、タグ機能サポート
• MathJaxベースでLaTex文法の数式表現を基本サポート
• Mermaidベースのダイアグラム機能基本サポート
• Disqus、Giscusなどを通じたコメント機能サポート
• Google Analytics、GoatCounterサポート
• ライトテーマとダークテーマサポート
• テーマ移行時点ではMathJaxやMermaidはMinimal Mistakesテーマでは自体サポートしていなかったため、直接カスタマイズで追加する必要がありましたが、Chirpyテーマでは基本的に自体サポートしています。もちろんカスタマイズと言っても大したことはありませんが、それでも小さな利点と言えるでしょう。
• 何より、デザインが綺麗です。Minimal Mistakesテーマはすっきりしていますが、何かブログというよりプロジェクトの公式技術文書やポートフォリオページにより適しているような特有の硬さがありますが、Chirpyテーマはティストリーやミディアム、velogなどの商用ブログプラットフォームと比較しても遜色のないデザインが長所です。

3. GitHubリポジトリの作成、ビルドおよび配布

現在（2024.06）使用中のChirpy Jekyll Themeを基準に記述し、Gitは基本的にインストールされていると仮定して進めます。
Jekyll公式インストールガイドとChirpy Jekyll Theme公式ページを参照。

3-1. Ruby & Jekyllのインストール

Jekyll公式インストールガイドに従って、自分の運用システム環境に合わせてRubyとJekyllをインストールします。

3-2. GitHubリポジトリの作成

Chirpy Jekyll Theme公式ページでは次の2つの方法を紹介しています。

1. “jekyll-theme-chirpy” gemでコアファイルを読み込み、残りのリソースをChirpy Starterテンプレートから取得する方法
   • 利点：後述しますが、バージョンアップグレードの適用が容易です。
   • 欠点：カスタマイズが制限されます。
2. jekyll-theme-chirpyリポジトリを自分のブログのリポジトリにフォークする方法
   • 利点：すべてのファイルをリポジトリ内で直接管理するため、テーマでサポートしていない機能も直接コードを修正して自由にカスタマイズできます。
   • 欠点：バージョンアップグレードを適用するには原本リポジトリの最新アップストリームタグをマージする必要がありますが、場合によっては直接カスタマイズしたコードがアップグレードバージョンのコードと衝突する可能性があります。この場合、該当する衝突を直接解決する必要があります。

私は1番の方法を採用しました。Chirpyテーマの場合、基本的に完成度が高いため、ほとんどのユーザーの立場では大きくカスタマイズする必要がないうえ、2024年現在まで非常に活発に開発および機能改善が進行中なので、よほど大幅な改造をするのでなければ、原本アップストリームを適時フォローすることのメリットが直接カスタマイズを適用することのメリットを上回ります。Chirpyテーマの公式ガイドでも、ほとんどのユーザーには1番の方法を推奨しています。

3-3. 主要設定

ルートディレクトリの_config.ymlファイルと_data/contact.yml、_data/share.ymlファイルで必要な設定を適用します。コメントがよく付けられており、設定が直感的なので特に困難なく適用できます。そのうち外部で別途の作業が必要な設定として、Google Search Console連携のための認証コード登録やGoogle Analytics、GoatCounterなどのウェブマスターツール連携程度がありますが、これも実際にはそれほど複雑な手順ではなく、この記事で扱おうとする核心テーマでもないため、詳細な説明は省略します。

3-4. ローカルでビルドする

必須の手順ではありませんが、新しい投稿を作成したり、サイトに何か修正を加えたりした時に、ウェブで正常に表示されるかどうかを事前に確