GitHub Pagesとは

GitHub PagesはGitHubのサービスのひとつで、GitHub上のリポジトリにアップされたコンテンツを利用してWebページとして公開することができるホスティングサービスです。開発者自身やプロジェクトのためのページ（静的ページのみ）を作ることができます。

• GitHub Pages – GitHub
• GitHub Pages Basics – User Documentation – GitHub Help

GitHub Pagesでは、「ユーザー/組織ページ（User & Organization Pages）」と「プロジェクトページ（Project Pages）」の2種類のページに対応しています。どちらのページもHTTP上で動き、基本的に（非公開のリポジトリであったとしても）公開したら、一般公開されます。

User & Organization Pagesを作る

「ユーザー/組織ページ（User & Organization Pages）」は、用途は人により様々だと思いますが、主に自分や組織のための自己紹介用のページとして使えます。

「ユーザー/組織ページ」を作る際のポイントを以下に説明します。

GitHub上に専用のリポジトリを作る

「ユーザー/組織ページ」用のリポジトリをGitHub上に作ることで、「ユーザー/組織ページ」を作ることができます。リポジトリ名は以下のようにつけます。

ユーザー名（or組織名）以外をつけると、GitHub Pagesとしてビルドされないので注意してください。

Masterブランチでコンテンツを作る

「ユーザー/組織ページ」用のコンテンツは、ローカル上に専用のディレクトリを作って、その中に作っていきます。ここでのポイントは、「Master」ブランチで作ることです。「Master」ブランチからGitHub上のリポジトリにpushされたコンテンツが、「ユーザー/組織ページ」としてビルドされるようになっています。

「ユーザー/組織ページ」にアクセス

ページがビルドされたら、以下のURLでアクセスすることができるようになります。

自分のGitHub Pagesのユーザーページは以下となります。まだ、何も作っていませんが…

• http://maechabin.github.io/

Project Pagesを作る

「プロジェクトページ（Project Pages）」は、主にプロジェクトの紹介ページやデモページとして使えます。「ユーザー/組織ページ」とほぼ同じような機能を持っていますが、ページの作成方法は若干複雑です。

「プロジェクトページ」を作る際のポイントを以下に説明します。

リポジトリはプロジェクトのリポジトリでOK

専用のリポジトリを用意する「ユーザー/組織ページ」と異なり、「プロジェクトページ」は、プロジェクトのリポジトリ内にコンテンツを作っていきます。

gh-pagesブランチでコンテンツを作る

プロジェクトのリポジトリ内の「gh-pages」ブランチ上でコミットしたコンテンツがプロジェクトページとしてビルドされるようになっています。一見単純そうに見えますが、実際に運用するとなると、ある程度のコツが必要となってきます。

GitHub Helpで説明されている「手動でプロジェクトページを作る方法」を紹介します。以下のGitHub Helpも併せてご確認ください。

• Creating Project Pages manually – User Documentation – GitHub Help

1. 「空」のブランチとしてgh-pagesブランチを切る

プロジェクトページ用に「gh-pages」ブランチを切る際に、新しい「空」のブランチとして切るようにします。「空」のブランチとは、既存のブランチのこれまでの履歴を一切持たない真新しい何もない状態のブランチのことをいいます。「––orphan」オプションをつけて「gh-pages」ブランチを切ります。

$ git checkout --orphan gh-pages
Switched to a new branch 'gh-pages'

2. gh-pagesブランチ内のコンテンツを削除

gh-pagesブランチに移動したことを確認し、プロジェクトページには関係ないコンテンツ（つまりすべてのコンテンツ）を削除します。

$ git branch
* gh-pages
  master

$ git rm -rf .
rm '.gitignore'
rm 'README.md'
...

3. gh-pagesブランチ内にプロジェクトページ用のコンテンツを作りpushする

後は普段GitHubを使う際と変わらず、コンテンツを作成したら、addして、commitとして、pushしていきます。pushする際は、ローカルリポジトリにgh-pagesを指定することを忘れないようにします。

$ echo "My Page" > index.html
$ git add index.html
$ git commit -a -m "First pages commit"
$ git push origin gh-pages

「プロジェクトページ」にアクセス

ページがビルドされたら、以下のURLでアクセスすることができるようになります。

ページ自動生成機能を使う

自分はほとんど使いませんが、GitHub Pagesには「ページ自動生成機能」があります。「ページ自動生成機能」を使うと、GitHub上でブログを書くような感覚でページを作成することができます。ユーザー/組織ページ、プロジェクトページのどちらにも対応しています。

「ページ自動生成機能」の使うまでのさわりの部分だけですが、簡単に紹介します。詳細は以下のGitHub Helpをご参照ください。

• Creating Pages with the automatic generator – User Documentation – GitHub Help

GitHub上のリポジトリページにある「Settings」タブをクリックします。

「Settings」のページ内にある「Launch automatic page generator」ボタンを押します。

「自動生成」ページが表示されます。ページ上の各項目を入力・設定し、「Continue to layouts」ボタンを押します。ちなみにコンテンツ内容を書く際にMarkdownも使えるようになっています。

ページのレイアウトの設定もできるようになっています。好きなテーマを選んで「Publish page」ボタンを押すとGitHubページが生成されます。

404ページを準備する

GitHub Pagesは「独自404ページ」にも対応しています。404ページを作ったら、「404.html」というファイル名をつけて、ユーザー/組織ページならmasterブランチ、プロジェクトページならgh-pagesブランチにスウィッチして、リポジトリのrootに置きます。

詳細は以下のGitHub Helpをご参照ください。

• Custom 404 Pages – User Documentation – GitHub Help

GitHub Pages応用編

応用編として、GitHub Pagesでは以下のようなこともできるようです。

GitHub Pagesでブログを作る

GitHub Pagesは、Jekyllというブログサービスのような静的サイトジェネレータをサポートしており、そのJekyllを使うことで、GitHub Pagesでブログサイトを作ることができるようになっています。詳細は以下をご参照ください。

• Using Jekyll with Pages – User Documentation – GitHub Help
• Jekyll • Simple, blog-aware, static sites
• Jekyll • シンプルで、ブログのような、静的サイト

その他に似たようなGitHub Pagesでブログサイトを作れるサービスとして以下のようなものもあります。

• Octopress
• Hugo :: A fast and modern static website engine
• Middleman: 作業を効率化するフロントエンド開発ツール

独自ドメインで運用する

さらにGitHub Pagesは、独自ドメインでの運用にも対応しています。「github.io」もIT分野でよく使われている「.ioドメイン」となっており、これはこれでイケてますが、自分の好きなドメインでサイトを運用したい方には嬉しい機能でしょう。設定方法など詳細は以下をご参照ください。

• About custom domains for GitHub Pages sites – User Documentation – GitHub Help
• Setting up a custom domain with GitHub Pages – User Documentation – GitHub Help
• Tips for configuring a CNAME record with your DNS provider – User Documentation – GitHub Help
• Adding a CNAME file to your repository – User Documentation – GitHub Help

まとめ

GitHub Pagesの存在は前々から知っていましたが、改めてその機能を見てみると、やはりGitHubらしく開発者の方向を向いたなかなかイケてるサービスになっているなと思いました。実際にやり始めたら、かなり奥が深いんじゃないかなと思います。特に今回応用編として紹介したJekyllは、自分はまだほとんど内容を把握していないので、機会があればこの辺りも試してみたいですね。

GitHub Pagesはサーバーを使った動的なサイトには対応していませんが、JavaScriptでガリガリ書く自分のようなフロントエンド好きには向いているかなと思います。自分のプロジェクトのデモなどのページは今後はGitHub Pagesを使って作っていくつもりです。