Github Pages作成メモ

このブログを書いていてデモ画面を作りたいけどどこかいいホスティングサーバないかと見ていたんですが、なんとGithub上に作れるらしい。しかも無料で無制限。
ただし、静的ページのみでGithubの公開レポジトリ上においておく必要あり。
http://blog.eiel.info/blog/2013/02/17/github-pages/
今回はユーザページを作ります。

レポジトリ作成

Githubにアカウントがある前提です。

  • レポジトリはユーザ名/ユーザ名.github.id (github.comでもOKっぽい)
  • URLはhttp://ユーザ名.github.io/

https://help.github.com/articles/creating-a-new-repository
「Initialize this repository with a README」にチェックを入れておくほうが楽です。
こうしておけばgit clonedだけでGithubからローカルにコピーできます。
チェックを入れないと、下記のようにちょっと手順が増えてしまいます。
https://help.github.com/articles/create-a-repo

ローカルにコピー

https://help.github.com/articles/set-up-git
Github for Windowsを使っても楽なんですが、今回はこれを使いました。
http://git-scm.com/

インストール後GitBashを起動し、cdコマンドで作業フォルダに移動します。
ドライブを変更する場合は"cd /d/フォルダ"のようにします。
ここで

git clone https://github.com/ユーザ名/ユーザ名.github.io.git
cd ユーザ名.github.io

レポジトリのアドレスはGithubのリポジトリページに記載されています。

ユーザ名とアドレスを設定する必要があります。
これはgit上で誰がコミットしたかを登録するためのものです。
メールアドレスはGithubに登録されているものでなければなりませんが、メールアドレスは公開したくない場合もあります。
その場合はGithubのアカウント設定でダミーのメールアドレスを追加してそのアドレスを設定すればOKです。
GithubのHelpページでは次のようになっています。

git config --global user.name "Your Name Here"
# Sets the default name for git to use when you commit
git config --global user.email "your_email@example.com"
# Sets the default email for git to use when you commit

--globalオプションでそのマシン上で作業する全レポジトリ共通となります。
Github以外のレポジトリでも作業していて別の名前やアドレスを使いたい場合はそのレポジトリに移動して--globalオプションを外して設定すればOKです。

git config user.name "Your Name Here"
git config user.email "your_email@example.com"

httpサーバインストール

今回はnginx for windowsをインストールします。
既にインストールされている場合でも、レポジトリフォルダをhttpサーバのルートに設定したほうがいろいろ捗りますので、新たにインストールしてポート番号を変えるといった使い分けをしてもいいのかなと思います。

今回はnginx-1.4.1をd:\toolsに解凍
conf/nginx.confファイルを開いて
server -> location / -> rootをレポジトリフォルダに変更

~~略~~
    server {
        listen       80; #必要ならば変更
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   hogehoge/ユーザ名.github.io;  #レポジトリフォルダを設定
            index  index.html index.htm;
        }
~~略~~

コマンドプロンプトを開いて

cd /d d:\tools\nginx-1.4.1
start nginx

ドライブを変更する場合は"/d"オプションをつける必要があります。

これでindex.htmlを適当に作ってレポジトリフォルダに置いて
http://localhost/
にアクセスすればそのファイルが見えるはずです。

あとは
git addして
git commitして
git pushすればGithubに反映されます。
https://help.github.com/articles/create-a-repo
※ git remote addはしなくてもよさそうです
実際にGithub PagesのURLに反映されるのには少し時間がかかるようです(初回)。

入門git

入門git


以上