LoginSignup
810
791

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-08

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/

810
791
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
810
791