Help us understand the problem. What is going on with this article?

GitHubを使って3分でHPを公開する。

More than 3 years have passed since last update.

GitHubやばい、何がやばいってソース公開していいならWebサーバなくてもWebページ公開できる。
JavaScriptもちゃんと動いてる。(サーバ必要系はたぶん無理)

というわけで表題の件ですが、GitHubは主に2つの形式でWebサイトを公開できます。
テンプレサイト作るだけならgitコマンド叩いたり、ローカルにリポジトリ作る必要もありません。

  • ユーザーアカウントに対して紐付けられているWebページ
  • リポジトリごとのWebページ

ほとんどリンク先見てね状態ですが、毎回ググるのめんどくさいのでメモ書き。
GitHubアカウントもっているならば、3分かからないです。


ユーザーアカウントに対して紐付けられているWebページ。

yourself-account.github.io.gitリポジトリを作成することでWebページが公開できます。
こんな感じ。
http://budougumi0617.github.io/
# 2017/07/03 現在はHugo生成のブログになっています。
スクリーンショット 2014-02-08 21.56.09.png

公式最強ということで、後はリンク先参照のこと。
http://pages.github.com/

上記URLには載っていないのですがテンプレサイトが作れます。
GitHubでyourself-account.github.io.gitリポジトリの「setting」を開きます。
画面をスクロールすると、「Update your site」という項目があるので、隣の「Automatic Page Generator」というボタンをクリックスクリーンショット 2014-02-08 21.53.17.png

あとは指示に従ってテンプレを選んだりすると完成します。
URLはhttp://yourself-account.github.io/となります。

例:
http://budougumi0617.github.io/

そのあとはcloneしてお好みのエディタで編集するなり、すげ替えちゃってください。
NetBeansの「新規プロジェクト」、「既存のリソースを利用するHTML5アプリケーション」で取り込み、編集、Chrome連携実行まで確認できました。


リポジトリごとのWebページ

今ある既存のリポジトリにもWebページを構成できます。
なので、ライブラリなどをGitHubで公開した際はそのままそのリポジトリでWebページも作成出来ます。
おおざっぱに言うと、gh-pagesというブランチを切って、必要ファイルをそのブランチに突っ込めば、完成です。

2016/08/18 追記
masterブランチにdocsディレクトリを作っても公開できるようになったそうです
2016年新機能! GitHubのmasterブランチをWebページとして公開する手順
Configuring a publishing source for GitHub Pages
https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/

以下は適当なindex.htmlを作成してとりあえず公開してみる方法。
前提はyourRepository/をルートとして、yourRepositoryリポジトリをcloneしている状態。
ある程度Git叩けることが条件

CommandLineLog
cd yourRepository/
git checkout --orphan gh-pages
git rm -rf . #これは別にやらなくてもいいかも
echo "My GitHub Page" > index.html
git add index.html
git commit -a -m "First pages commit"
git push origin gh-pages

あとは(若干タイムラグがあるらしいので、)一服してからhttp://yourself-account.github.io/yourRepositoryアクセスするだけ。

例:学習サイト見ながら作っただけのlocalStorageたたくメモ帳。jQueryが動くことは確認できた。
http://budougumi0617.github.io/html5NotePad/


以上で、GitHub上でWebページを公開する方法でした。
privateリポジトリでは作成できないなどの制約はありますが、pushするだけで実際に公開できるのは嬉しいですねー!
JavaScriptは動かないと思っていたので、それも嬉しい点です。


参考

GitHub Pages
http://pages.github.com/

GitHubでサイトを公開する方法
http://soudai1025.blogspot.jp/2012/07/github.html

GitHub の プロジェクトページ を 自動生成 & 公開 する 方法
http://garafu.blogspot.jp/2013/06/gihub.html

gh-pagesでGithubのプロジェクトをWEBページとして公開する方法
http://peroon.hatenablog.com/entry/2013/05/18/171144

html5NotePadページはドットインストールさんで学習させて頂きました。
ドットインストール:HTML5で作る「シンプルメモ帳」 (全8回)
http://dotinstall.com/lessons/memo_html5

2016/08/18 追加
2016年新機能! GitHubのmasterブランチをWebページとして公開する手順
http://qiita.com/tonkotsuboy_com/items/f98667b89228b98bc096

Configuring a publishing source for GitHub Pages
https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/

budougumi0617
業務ではGo/Ruby。以前はC/C++/C#。 最近はgithub.ioに書いてます。
https://budougumi0617.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away