GitHub Pagesの使い方や機能などをまとめてみた

これまでGitHub Pagesの存在は知っていましたが、特に使うまでには至っていませんでした。プロジェクトのデモページなどもjsdo.itなどを使ったりしていましたが、最近になってやっとGitHub Pagesが使えるじゃないかということに気づき、今更ですがGitHub Pagesについて調べることにしました。いろいろドキュメントなどを見てみると、なかなかGitHub Pagesは面白い機能がてんこ盛りだなということがわかりました。今回はその辺りをまとめてみました。

GitHub Pages

GitHub Pagesとは

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

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

GitHub Pagesを使うには、もちろんGitHubのアカウントが必要です。GitHubの登録や使い方などは当ブログの以下の記事を参考にしてください。

User & Organization Pagesを作る

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

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

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

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

ユーザー名(or組織名).github.io

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

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

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

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

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

http(s)://ユーザー名(or組織名).github.io

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

Project Pagesを作る

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

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

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

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

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

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

GitHub Helpで説明されている「手動でプロジェクトページを作る方法」を紹介します。以下の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'
...

注意事項: 例えば、JavaScriptの開発で使う「node_modules」フォルダのようなgitで管理していないファイルやフォルダがあった場合、上記コマンドで削除してしまうとmasterブランチ側にも反映されて削除された状態になってしまうので、ファイルやフォルダを削除する際は注意が必要です。一つ一つファイルを確認しながら削除していった方が無難です。なお、GitHubのヘルプでは、プロジェクトページ用に別のディレクトリを作って、改めてgit cloneする方法が推奨されています。

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でアクセスすることができるようになります。

http(s)://ユーザー名(or組織名).github.io/プロジェクト名

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

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

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

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

GitHubページの自動生成 Settingsをクリック

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

GitHubページ自動生成 - Launchボタンをクリック

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

GitHubページ - Automatic Generator

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

GitHubページ自動生成 - レイアウトの設定

404ページを準備する

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

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

GitHub Pages応用編

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

GitHub Pagesでブログを作る

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

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

独自ドメインで運用する

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

まとめ

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

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

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール
  • 『Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール』
  • 著者: 塩谷啓, 紫竹佑騎, 原一成, 平木聡
  • 出版社: インプレスジャパン
  • 発売日: 2014年10月24日
  • ISBN: 978-4844337003

コメント一覧

  • 必須

コメント