Home > 技術 > githubのgh-pagesブランチを使って自作サイトを表示する方法

githubのgh-pagesブランチを使って自作サイトを表示する方法

こちらの30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記記事を拝見して、僕もざっくりとしたInstagramAPIを使ったサイトを作ってみた。

ひたすらラーメンの写真を表示するInstagramサイト - Ramenstagram

Ramenstagram

ひたすらBlackMilの写真を表示するInstagramサイト - I Love BlackMilk!

I Love BlackMilk!

またくだらないものを・・・

githubリポジトリを作る

ではではまずはgithubのリポジトリを作りましょう!

githubでリポジトリを作り、ローカルで以下のように実行する。
基本的なgithubの手順ですね。

mkdir Ramenstagram
cd Ramenstagram/
git init
touch README
git add README
git commit -m 'first commit'
git remote add origin git@github.com:hisasann/Ramenstagram.git
git push -u origin master

gh-pagesブランチを作成する

GitHub Pages - Homeに書いてあるとおりですが、以下のようにコマンドを実行してブランチを作成します。

cd Ramenstagram/
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

これでgit branchしてみると、

* gh-pages
master

となっているので、現在作業中のブランチは「gh-pages」ということになる。

githubサイトにて

adminボタンをクリック。

すると以下の画像のように、すでにGitHub Pagesが作られていて、チェックボックスにチェックが入っている。
これは、gh-pagesというブランチを作ると自動的にチェックが入るよう。
逆にgitコマンドからではなく、adminページにて、チェックを入れても同じようにgh-pagesブランチが作られる。
どっちが楽かはあなた次第!

Administration for hisasann_Ramenstagram - GitHub.png

そして、
http://hisasann.github.com/Ramenstagram
にアクセスしてみると、ちょっと待っててよ的な画面が。

GitHub Pages - File Not Found - GitHub-2.png

少し時間を置くと以下のようにindex.htmlの内容が表示された!

GitHub Pages - File Not Found - GitHub-1.png

あとは、このブランチに自分のサイト用のHTMLやらJavaScriptやらCSSやらを配置してコミットすれば自動的に反映される!
便利!

InstagramのtagAPIを使ってJSONを返すnode.jsコード

ちなみにInstagramのJSONを取得しているのはnode.jsで作っています。

フロントのJavaScriptだけで完結したほうが綺麗なんですが、access_tokenをバレたくないので、いったんこのnodeがプロキシになってInstagramのtag情報から画像を返すようにしています。

InstagramのtagAPIを使ってJSONを返すnode.js版プロキシー -- Gist

■参考リンク
実践GitHub Pages運用のユースケースとワークフローの詳細 | ゆっくりと...
GithubのProject Pagesを作る手順を調べてみた。もしくはgitで空ブランチを作る方法を調べてみた。 - kanonjiの日記

入門git
入門git
posted with amazlet at 12.02.24
Travis Swicegood
オーム社
売り上げランキング: 10517

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1284
Listed below are links to weblogs that reference
githubのgh-pagesブランチを使って自作サイトを表示する方法 from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > githubのgh-pagesブランチを使って自作サイトを表示する方法

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top