Github PagesでちょっとしたWebサービスを公開した備忘録

自分のブログを書くにあたってソースコードをハイライト表示に変換するスクリプトが欲しくなったのですが、使いやすいようJavaScriptで開発したので、ついでに公開することにしました。サーバーホスティングしてまで公開しようとは思っていなかったのですが、タイミングよく「Webアプリをいまどきの手法で爆速開発した — KaoriYa」様にて、Github Pagesなどを使えばWebサービスを簡単に公開できることを知ったので公開に踏み切った次第です。

公開した SSSH HTML変換ページ

公開したサービスはこちら。
SSSH -Standalone Static Syntax Highlight builder-
ソースコードをHTMLページに貼り付けられる形に変換します。
ついでにシンタックスハイライトする機能もあります(リリース時点ではHTMLのみハイライト可能)。

(2014/03追記)
さらにgitで公開している自作JavaScript画像処理ライブラリを使って、もうひとつサービスを公開しました。 
「写真明るさ加工」
は、ブラウザ上で画像の明度を調整できるWebサービスです。

結果的には、Github pages以前の問題で躓くなど、恥ずかしい箇所もあるのですが、同じようなミスで困る方が出ないよう、公開に踏み切った次第です。

gh-pagesブランチ作成とアップロード

マスターブランチが存在する状態で、「gh-pages」ブランチを作成して切り替えます。
branch gh-pages
git checkout gh-pages

Githubで、空のリポジトリを作成します。

「 git remote add origin 」コマンドを実行します。今回の作業では、ここで指定するURLを間違えてしまったため、下記コマンドにより設定変更して対処しました。
git remote set-url origin git@github.com:MichinariNukazawa/sssh-syntax-converter.git
確認のコマンド
git remote -v

Githubへアップロードします。
git push origin master
git push origin gh-pages
二度目のpushが必要なのかはよくわかりません。
以後、 git push のみで両方ブランチがGithubへアップロードされます。

メールアドレスの認証

「[sssh-syntax-converter] Page build failure」というタイトルのメールが届きました。

「You need a verified email address in your GitHub account to publish Pages.」

認証されたメールアドレスが必要とのことだったので、手続きを行いました。

サブのメールアドレス(こちらがパスワードリセットに使われる？)を登録します。サブとメインの両方のメールアドレスにメールが届くので

メインで使い公開するメールアドレスのVerifyボタンを押して、認証します。
(メインのメールアドレス(「Primary GitHub Email」「Public 」 )は公開アドレスであるためパスワードリセットに使えない、といったようなことが書いてある。)

リポジトリのSettingsページにあるGitHub Pages項目に
「Changes may take up to ten minutes to be visible.」
と表示されます。10分よりも長くかかる場合もあるようですが、あまり長いようであれば、設定ミスを疑ってもよいと思います。

ファイル拡張子のミス

一晩経ってもページが公開されない( 404 error )ままだったので、海外のFAQを参考にgh-pagesブランチを再作成してみたものの、何も起こらず。

「sakashushuの取りあえずブログ」様を参考に、英文にて問い合わせ。

返答は、
「Github pages はPHPをサポートしていません」(抽出・意訳)
というもの。
読んですぐに気づいて、ブラウザのURI欄に、
「http://michinarinukazawa.github.io/sssh-syntax-converter/index.php」
と入力したところ、「ファイル "index.php" をダウンロードしますか？」のダイアログが。
プロジェクトの.jsファイルもフルパスを打てば閲覧可能でした。

静的ページしかホスティングしていないことは忘れていませんでしたが、PHPが無効になっている環境で index.php がメインページとして表示されなくなることをすっかり忘れていました。
というわけで、 index.php -> index.html とリネームを行いました。

あと、上記サイト様も書いていますが、githubのサポートは返事が早いです。本当に10分くらいで返事が来てびっくりしました。

フルパスでjsファイルの公開を確認

ページ生成エラー

またもや「Page build failure」メールが届きました。
今回は、本文に記載されたエラーも件名と同じ「page build failed」でした。

メールに記載されているトラブルシューティングのページを読むと、
「Jekyll （によるページ生成) を無効にしたければ、プロジェクトのルートディレクトリに ".nojekyll" ファイルを配置してください」
と書いてあったので、その通りにしたところ、index.htmlがメインページとして表示されるようになりました。

TIPS: コードの修正をブランチ間で共有する

これまで、Gitを使っていたにもかかわらず、その主要機能であるブランチを使ったことがありませんでした。
Github pagesを使う場合、ブランチがmasterとgh-pagesの2つ必要になるため、初めてブランチを使う方が私以外にもいるかもしれません。

私がgh-pagesブランチを扱うにあたって、最低限必要だったコマンドは、以下の2つでした。

masterで行った作業をgh-pagesに反映させる
git checkout gh-pages
git rebase master
(またはmerge)

gh-pagesで行った作業をmasterに反映させる
git checkout master
git merge gh-pages

あとは通常通り、 git push コマンドを打てば、修正がgithub上に反映されます。

masterブランチを削除して、gh-pagesをmaster扱いにして運用する方法があります。
こちらに紹介されている手法ですが、私は最近この方法を使っています。
git checkout -b gh-pages
git branch -d master