ホーム > プログラミング > GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド

GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド

2011 年 12 月 31 日 tokkonoPapa コメントをどうぞ コメント

GitHub がオープンソースの場として魅力的な理由は、Git という優れた分散・協調型リビジョン管理システムのリポジトリー・ザーバーとして誰でも利用できるということはもちろん、README などのドキュメント生成機能やコメンティング機能、問題のトラッキング機能など、Git を補助し、オープンな分散・協調開発を支えるサブシステムが充実している点が挙げられるでしょう。無料でもかなりのことができるのに、ビジネスとしてもちゃんと成立している理由はこんなところにあるように思います。

ただ、同種サービスの Google Code や Bitbucket と決定的に異なり、GitHub の最大の魅力となっているのは、GitHub Pages という1種のホスティング・サービスではないかと思います。成果物をただずらずらと味気ないページに並べるのではなく、趣向を凝らした紹介ページを自由に作り、プロジェクトの成果を世界にアピールする − GitHub Pages は、そんなことのできるサービスです。

2008年12月の GitHub Blog の記事 には、次のような GitHub Pages の紹介があります。

You can put anything here you like. Use it as a customizable home for your Git repos. Create a blog and spread your ideas. Whatever you want!
（GitHub Pages 上にはお好みで何でも置くことができます。Git リポジトリのホームページとしてカスタマイズしても良し、ブログを設置してあなたのアイディアを広げても良し。あなた次第です！）

ということで今回は、この GitHub ページの活用方法をまとめてみたいと思います。

目次

  1. GitHub Pagesの概要
  2. かんたん、カッコいいGitHub Pagesの作り方
  3. GitHub Pagesプロジェクト・ギャラリー

1.GitHub Pagesの概要

GitHub Pages では、Git のリポジトリ管理機能とホスティング・サーバー機能とが連携し、次の2つのサービスが提供されています。ちなみに冒頭で 「お好みで何でも置くことができます」 と紹介しましたが、静的ページのみのホスティングです。

ユーザーページのホスティング

GitHub でいうユーザーページとは、自分自身の活動を紹介するためのページです。

特別なリポジトリ username.github.com を作成し、index.html や必要なリソースを push しておけば、http://username.github.com/ という URL でそのページを閲覧することができます。

まずは、ユーザーページ用のリモートリポジトリを作成 しましょう。

ユーザーページ用リモート Git リポジトリの設定

ユーザーページ用リモート Git リポジトリの設定

次は、ローカルの Git リポジトリの作成を促す画面です。

ユーザーページ用ローカル Git リポジトリの作成

ユーザーページ用ローカル Git リポジトリの作成

「Next steps:」 を参考に、新しい index.html を含むローカル Git リポジトリを作ると良いでしょう （username は自分のユーザー名に差し替えてください）。

mkdir username.github.com
cd username.github.com
git init
echo "Hello" > index.html
git add index.html
git commit -m "first commit"
git remote add origin git@github.com:username/username.github.com.git
git push -u origin master

余談ですが、GitHub リモート・リポジトリへのプロトコル／パスは、1クリックでコピーすることができます。

GitHubリモート・リポジトリへのパスを1クリックでコピー

GitHubリモート・リポジトリへのパスを1クリックでコピー

もし http://username.github.com/ にアクセスして、次のような画面になっても焦る必要はありません。一番下にあるように、初めて GitHub ページを作成したときには、反映されるまで10分程度かかるということなので、落ち着いて待ちましょう。

最初は10分ぐらい待ちましょう

最初は10分ぐらい待ちましょう

各プロジェクト・ページのホスティング

個別のプロジェクトを紹介するためのページです。

各プロジェクトのリポジトリで （例えば myrepos）、gh_pages という特別なブランチを作成し、必要なファイルを push しておけば、http://username.github.com/myrepos/ という URL でそのページにアクセスすることができます。

まずはローカルの Git リポジトリ （master ブランチがあるはずですネ） に移動し、未 commit のファイルがないことを確認します （あれば push します）。そして以下を実行し、とりあえずの index.html を作成しましょう。

cd /path/to/myrepos
git symbolic-ref HEAD refs/heads/gh-pages
rm .git/index
git clean -fdx
echo "My GitHub Page" > index.html
git add .
git commit -a -m "First pages commit"
git push origin gh-pages

上記コマンドライン以外にも、「Admin → Options → Features」（プロジェクトページ右上の Adminボタン ボタンから入る） で、紹介ページを自動作成することもできます。

プロジェクト用GitHubページの自動作成

プロジェクト用GitHubページの自動作成

プロジェクトの情報を記入してページを作成

プロジェクトの情報を記入してページを作成

自動作成されたプロジェクト・ページ

自動作成されたプロジェクト・ページ

自動作成したページは、次の git コマンドでローカルに持ってくることができるので、どんな項目を載せるべきなのかを知るためにも一度は作ってみるのが良いでしょう。

git fetch
git pull
git checkout gh-pages

参考情報1

2.かんたん、カッコいいGitHub Pagesの作り方

ここから先はもちろん自由にページを作ってもらえれば良いのですが、おすすめの方法3つと、ページを彩るリソースを紹介します。

HTML5 Boilerplate、Initializr を利用する

「カッコいい」という要求を「HTML5 + CSS3 + Web フォント + レスポンシブなページ + ソーシャル共有ボタン」という要件に置き換え、Initializr をベースに作ってみたのがこれです。

プロジェクトページの例

プロジェクトページの例

HTML5 Boilerplate や Initializr 活用のコツやソーシャルボタンの設置については、拙作の 参考情報2 をぜひ参照してください :) 。

参考情報2

jekyll を利用する

jekyll（ジキル）は、テンプレートを使って静的な Web サイトを構築するための Ruby ベースのフレームワークです。プロジェクトページをいくつも作る場合に便利でしょう。通常はローカルに Ruby 環境を整え、RubyGems（Ruby のパッケージ管理システム）から jekyll をインストールするのですが、GitHub Pages 上でもこのフレームワークが機能しますので、必ずしもこのような環境を整える必要がありません。

まずはローカルの gh-pages ブランチに次のようなファイルを準備します。

.
├─ _layouts
│ └─ default.html
├─ css
│ └─ style.css
└─ index.md

default.html はテンプレートで、最も簡単には次のように書きます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
{{ content }}
</body>
</html>

{ ... } で囲まれた部分は jekyll によって解釈されます。{ content } に相当する部分を、例えば index.md （マークダウン） に記述します。

---
layout: default
title: プロジェクト・タイトル
---

プロジェクト・タイトル
===================
ここにプロジェクトの紹介を書きます。
...

layout には先のテンプレートを指定します。そして title はテンプレート中の { page.title } に置き換わるという仕組みです。実は、GitHub Pages の解説ページ自体 がこの仕組みで作られています。

また、ここでは .md の例を載せましたが、.html や .textile でも OK ですし、demo.md や documents.html といったファイルを置いても自動的にテンプレートを適用し、マークアップしてくれます。マークダウンや、さらに複雑なテンプレートの作り方については、参考情報3 をご覧ください。

参考情報3

Octopress を利用する

Octopress は、jekyll を使って静的なブログを簡単に構築できるようにしたフレームワークです。副題に A blogging framework for hackers. とあるように、Gist や jsFiddle など、多彩なコードスニペットの埋め込みプラグインが提供され、また GitHub ととても親和性よく作られています。

Octopress

Octopress を利用するには、Ruby（1.9 2 以上）環境を整える必要があります。Mac の人は rvm（Ruby Version Manager）で、Windows の人は RubyInstaller でインストールすることができます。個人的には Windows であれば Cygwin を使うのが良いと思いますが、現時点では Ruby のパッケージ が 1.8.7 と古いので、別途 ソースコードを入手、コンパイルが必要です。

さて、Octopress のインストール自体は 参考情報4 に譲り、ここではローカルに作成した Octopress リポジトリのおすすめ管理方法を紹介します。

Octopress で記事を書くときは、source というブランチで作業をするので、そのまま origin （つまり GitHub） に git push することもできるのですが、無料枠の GitHub では公開が原則なため、誰かにクローンされると、原稿 （Octopress の場合、マークダウン・ファイル） まで持っていかれることになり、ちょっとイヤ〜ンな感じです。そこで私は、無料でもリポジトリを非公開にできる Bitbucket にアカウントを作って原稿を管理しています。

Bitbucket

こうすると、記事を投稿するときは rake deploy で GitHub へ、原稿をバックアップするときは git push で Bitbucket へ送ることができて、イヤ〜ンな感じがなくなります。皆さんも使い分けてみてはいかがでしょうか？ ;-)

参考情報4

GitHub Pages を彩るためのリソース

GitHub Pages が通常のホスティング・サービスと違うのは、公開リポジトリはフォークできるということです。つまり再配布が可能な状態となるため、画像などのリソースを載せる場合は要注意です。そこでパブリックドメインか GitHub で使えるリソースを紹介します。

3.GitHub Pagesプロジェクト・ギャラリー

こだわりのある GitHub Pages を集めてみました。プロジェクトページ作りの参考にしてみてはいかがでしょうか。

  • Underscore.string
  • normalize.css
  • Backbone.js
  • petewarden/iPhoneTracker @ GitHub
  • WebGL Inspector
  • iOctocat is your GitHub companion for the iPhone and iPod Touch
  • mnot/redbot @ GitHub
  • thumbs.js @ github.com/mwbrooks
  • AssetHat: Load CSS & JS faster. Your assets are covered.
  • Zoolander
  • NBL.js 2.0 – a tiny non-blocking JavaScript lazy loader
  • TufteGraph: beautiful charts with jQuery
  • nide - Beautiful IDE for Node.JS
  • Socket.IO: the cross-browser WebSocket for realtime apps.
  • CamanJS - Image Manipulation in Javascript
  • GitX (L)
  • Hogan.js
  • PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development

4.あとがき

従来からある SourceForge.net や SourceForge.JP、Google Code に加え、GitHub の登場によってオープンソース化の流れがますます加速した感のある今日この頃。今までひっそりと自サイトで （オレオレ的に） 公開していた人たちが、ここ数年で一斉に GitHub に流れ込んで来たように思います。そして今後は、単なるコーディング能力だけではなく、人を惹き付ける魅力的なプロジェクト・ページをデザインする能力や、さらには自分の成果を世に問いその発展や貢献をプロモートする能力も必要な時代になるという気がしています。

この記事は、そんなオープンソースの意義と醍醐味を一人でも多くの方が楽しんでくれれば良いなぁ、という気持ちを込めてまとめました :) 。

カテゴリー: プログラミング タグ: ,
  1. tokkonoPapa
    2012 年 4 月 26 日 23:52 | #1
    返信 | 引用

    オオ、

    Publishing a Website on bitbucket

    例えば、tokkonopapa.bitbucket.org というリポジトリで、ユーザーページ http://tokkonopapa.bitbucket.org は出来るのですネ。

    情報、ありがとうございました。

  2. hogehoge
    2012 年 4 月 26 日 09:04 | #2
    返信 | 引用

    bitbucket にも、(githubより微妙だけれども) gh-page 相当のものはありますよ

  3. tokkonoPapa
    2012 年 4 月 6 日 21:36 | #3
    返信 | 引用

    @syui さん、

    Admin の自動作成機能を使うだけなら要らないかもしれませんが、いずれにしても git でリモートホストとやり取りすることになるので、GitHub や Bitbucket では必ず SSH Key が要ります。

    確か GitHub for Mac なら SSH Key がなくてもイケたと思いますヨ。

  4. syui
    2012 年 4 月 6 日 15:14 | #4
    返信 | 引用

    GitHub page の作成には、SSH Key の設定は、必須ではないんですかね?

    http://help.github.com/mac-set-up-git/

  1. 2012 年 1 月 12 日 15:23 | #1
    GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと… | F2E | Scoop.it