以前は静的サイトを構築するといえば、自分でレンタルサーバーを借りて静的ファイルをFTP・SFTPでアップロードしたものでした。

しかしGitHub Pagesを使えばもうその必要はありません。GitHubアカウントを作成するだけで簡単に静的サイトが構築できます。

本記事ではGitHub Pagesとは何か、どのような種類がありどのようにサイトが作成できるのかを説明しましょう。

また無料プランと有料プランでは何がどう違うのかについても解説します。


GitHub Pagesとは

GitHub


GitHub PagesはGitHubが2008年から提供している静的サイトのホスティングサービスです。

ユーザーはGitHubにリポジトリを作成し、GitHub Pagesの設定を行います。

その後ユーザーは指定のフォーマットのMarkdownファイルを作成し、commit・push・masterへのmergeを行うでしょう。

するとCIパイプラインがJekyllという静的サイトジェネレーターを用いて、リポジトリ内のファイルからWebサイトを再生成します。

生成されたWebサイトは特定のURLから確認することが可能な他、独自ドメインを設定することも可能です。


GitHub Pagesの種類


GitHub Pagesには以下の3種類があります。

  • User（ユーザー）
  • Organization（組織）
  • Project（プロジェクト）


User（ユーザー）

個人のユーザーアカウントに紐付くGitHub Pagesです。

「<username>.github.io」という名前の個人リポジトリを作成すると、下記のURLでアクセスできるようになります。


Organization（組織）

組織アカウントに紐付くGitHub Pagesです。


「<organization>.github.io」という名前の組織リポジトリを作成すると、下記のURLでアクセスできるようになります。


Project（プロジェクト）

GitHubプロジェクトに紐付くGitHub Pagesです。GitHubにはユーザー・組織の2種類のアカウントがあります。

GitHubプロジェクトの作成はGitHubにリポジトリを作成することとほぼ同義です。

つまりGitHubプロジェクトのGitHub Pagesはユーザー・組織の下に作られます。

  • https://<username>.github.io/<repository>
  • https://<organization>.github.io/<repository>


GitHub Pagesのリポジトリ


リポジトリの可視性はパブリック・プライベートの2種類です。

またプロジェクト内には様々なファイルやディレクトリがcommitされています。

この中のいずれがGitHub Pagesのソースファイルとして認識されるのでしょうか。

ブランチとディレクトリの2つの側面から確認していきましょう。


ソースブランチ

ユーザー・組織のデフォルトのブランチはmasterブランチで、変更することはできないようになっています。

プロジェクトのデフォルトのブランチはgh-pagesブランチで、この名前のブランチが作成されると自動で公開される仕組みです。

プロジェクトのデフォルトブランチはmasterブランチに変更できます。これらのブランチ以外は適用できないので注意です。


ソースディレクトリ

虫眼鏡の下にあるエアバスSEの公式ウェブサイトのホームページ


ユーザー・組織のリポジトリでは必然的にプロジェクト直下がGitHub Pagesのソースディレクトリになります。

プロジェクトリポジトリのgh-pagesブランチではプロジェクト直下です。

一方masterブランチではプロジェクト直下とdocsディレクトリ配下の2つから選択できます。


パブリック・プライベート

可視性がパブリックのリポジトリについては特に言及する必要はないでしょう。

GitHubのプロジェクトはリポジトリ内のファイルや課題なども含めて全て公開されている状態です。

ではプライベートのリポジトリについてはどうなるでしょうか。

何度も書いているように、GitHub Pagesは静的サイトを公開できるサービスです。

例えばプロジェクトのdocsディレクトリ配下を公開すれば、docsディレクトリ配下のファイルは公開されることになります。

逆にdocsに含まれないファイルが外から見えることはありません。

プライベートリポジトリだからといって公開対象のユーザーが限定されているということはありませんのでご注意下さい。


静的サイトジェネレーター

web デザイン,ラップトップ,html


動的サイトはWordPressなどのCMSや掲示板などで、背後でデータベースやWebアプリケーションが動作しています。

静的サイトはHTMLやCSS・JavaScriptのみで作成されたWebサイトです。

静的サイトジェネレーターはテンプレートエンジンを利用してWebサイトを構築し、MarkdownファイルをHTMLに変換して結合します。

様々な言語の静的サイトジェネレーターが開発されており、ジェネレーター本体や専用テーマの種類が豊富です。

英語では「Static Site Generator」で検索すると静的サイトジェネレーターが引っかかります。以下のサイトが選定時におすすめです。

StaticGen

動的サイトのようにユーザーが投稿したデータを利用したり、バックグラウンドで処理を行うことはできません。

一部ではWordPressに疲れた個人ブロガーがJekyllやHugoに引っ越すのが流行りました。


GitHub PagesのJekyll


JekyllはRuby製の静的サイトジェネレーターです。


Jekyllとは

Jekyll

MITライセンスのオープンソースプロジェクトで、2008年にリリースされました。

有志による翻訳プロジェクトが存在し、日本語の公式ドキュメントが閲覧できるようになっています。英語が苦手な型でも安心です。

またJekyllにはLiquidというテンプレートエンジンが採用されています。

Liquidは比較的Rubyライクにループ処理や値比較ができるため、経験者の方には馴染みやすいでしょう。

Jekyllのメリットは便利なプラグインが利用できることです。一方でHugoなどに比べると生成速度が遅いというデメリットもあります。


GitHub PagesのJekyll


GitHub PagesではユーザーがローカルにJekyllの動作環境を構築する必要はありません。

対象のブランチのディレクトリにcommitとpushを行えば、GitHubが自動でWebサイトを生成しデプロイしてくれます。

デメリットは公式がサポートしている一部のプラグインしか使用することができないことです。

公式がサポートしていないプラグインや自作のものを使いたい場合は、他の環境でJekyllのビルドを行い生成物をGitHubにcommitできます。

しかしGitHub Pagesを利用するメリットはMarkdownファイルの編集だけで済むところです。

わざわざビルドしてからcommitするなら、他のレンタルサーバーなどにデプロイするのと手間がそう変わらないのでおすすめしません。

GitHub Pagesを採用すると決めたら、素直にサポートされているプラグインで遣り繰りする方が低コストです。


無料プランと有料プランの違い

お金


GitHubの無料プランではパブリックなリポジトリでしかGitHub Pagesを利用することができません。

プライベートなリポジトリでGitHub Pagesを利用するには有料プランにアップグレードする必要があります。

GitHub Pro・GitHub Teamなどです。

機能の内容については特に細かい制限などはなく、単に使えるか・使えないかの違いになります。


GitHub Pagesを作る

アプリケーション開発のランディング


ここではユーザーの持つプロジェクト内にGitHub Pagesを作成してみましょう。

GitHubアカウントをまだ持っていない方は作成して下さい。


リポジトリを作成する

Repository nameにプロジェクトの名前を入力します。Descriptionは任意で構いません。

可視性はPublicを選択して下さい。READMEの初期化およびその他のオプションは指定なしです。

Create repositoryボタンを押してリポジトリを作成しましょう。


docs/index.mdを作成する

今回はブランチを利用した方法ではなく、masterブランチにdocsディレクトリを作成する方法で作成します。

ローカルにクローンしたリポジトリのmasterブランチにdocsディレクトリとindex.mdファイルを作成して下さい。

ファイルの中身は任意で構いません。「Hello, world!」でも良いですし、Markdownを試してみても良いでしょう。

変更をcommitしたらリモートにpushします。


GitHub Pagesの設定をする

virtual panel


このまま以下のURLにアクセスしてもWebサイトは表示されません。404画面になる筈です。

  • https://<username>.github.io/<repository>

プロジェクトの右端にあるSettingsタブを開き、開いたページの下の方にあるGitHub Pagesの見出しを探して下さい。

Sourceという項目にセレクトボックスがあります。選択肢の仲の「master branch /docs folder」を選択しましょう。

その後再度上記URLにアクセスして、正常に表示されれば完了です。


GitHub Pagesのテーマを変更する

コンテナ,運搬,運賃


作成したページは真っ白で味気ないので、テーマを設定して見栄えの良いWebサイトにしましょう。

先程のSourceの下にTheme Chooserという項目があり、「Choose a theme」をクリックするとテーマ選択画面が表示されます。

好きなテーマを選択し「Select theme」ボタンを押しましょう。docsディレクトリ配下に「_config.yml」が追加されています。

これがJekyllの設定ファイルです。追加したテーマを適用する設定が追加されています。

もう一度Webサイトにアクセスしてみましょう。テーマが適用されている筈です。


GitHub Pagesのプラグインを設定する


プラグインの使い方や追加方法について説明します。


デフォルトで使用できるもの

デフォルトで有効になっているプラグインです。これらのプラグインは逆に無効にすることができません。

例えばJekyll Default LayoutプラグインはJekyllのPageとPostのレイアウトを設定するものです。

またJekyll Readme IndexプラグインはREADME.mdをindex.mdのように扱うようにできるプラグインになります。

このように基本的な機能のプラグインはあらかじめ使えるような設定です。


追加すれば使えるもの


以下のページにGitHub Pagesで使用できるプラグインとそのバージョンが記載されているので確認しましょう。

GitHub Pages > Dependency versions

例えば「jemoji 0.11.1」と記載されているなら、jemojiのv0.11.1なので次バージョンv0.12.0はまだ使用できないということです。

ちなみにJemojiはGitHubのような絵文字が使えるようになるプラグインになります。

jekyll/jemoji

「_config.yml」ファイルに以下の設定を追加しましょう。

  1. plugins:
  2. – jemoji

先程のindex.mdに「:+1:」などの適当な絵文字を入力してcommit・pushしてみて下さい。

生成されたWebサイトにも絵文字が表示されているのが確認できます。


おわりに


GitHub Pagesを公開ライブラリの公式ドキュメントとして利用しているケースも多いです。

CMSなどの運用が不要であれば簡単なWebサイトをGitHub Pagesで作るのも良いかもしれません。

公開リポジトリであれば無料で様々な機能を試せるので、自分でリポジトリを作成して色々試行錯誤してみるのが良いでしょう。