LoginSignup
49

More than 5 years have passed since last update.

GitHubでWebサイトを公開する

Last updated at Posted at 2015-05-21

GitHubのリポジトリにgh-pagesというブランチを作り、html,css,jsを置くと簡単にWebサイトを公開することができます。

2016/08/18追記 masterブランチでもできるようになりました。特別な理由がないなら、masterブランチで公開したほうが簡単です。以下の記事に手順が分かりやすくまとまっています。
2016年新機能! GitHubのmasterブランチをWebページとして公開する手順

リポジトリの作成

公開したいサイトを管理するリポジトリをGitHubで作成します。
リポジトリ名は何でも大丈夫ですが、URLはhttp://ユーザー.github.io/リポジトリ/になります。

リポジトリにソースをPush

まずは先ほど作ったリポジトリをクローンします。
(先にローカルでリポジトリを作ってもできますが、ここではcloneするやり方で説明します)

git clone git@github.com:ユーザー/リポジトリ.git

gh-pagesブランチを作成します。

git checkout -b gh-pages

ここでhtml,css,jsを好きなように作成してコミット&プッシュします。

# html,css,jsを作成したものとする
git add .
git commit -m "Webサイト作成!"
git push --set-upstream origin gh-pages

これで完了です。http://ユーザー.github.io/リポジトリ/でアクセスできます。
ただし、実際にWebサイトが公開されるまで、少しタイムラグがあるかもしれません(10分くらい?)

サイトの更新

ここまでのことができたら、ローカルでソースを更新して、pushするだけでWebサイトを更新できます。

# html,css,jsを修正、追加、削除
git add .
git commit -m "Webサイト更新!"
git push

(不要なら)masterブランチを削除

サイト公開用にgh-pagesブランチを作ったので、masterとgh-pagesの2つのブランチが存在しています。
masterブランチとgh-pagesを同期させる方法もありますが、サイトを公開するだけならgh-pagesブランチのみを管理した方が楽なので、masterブランチを削除してしまいます。

まずはgithub上でデフォルトブランチをmasterからgh-pagesに変更します。これをしないとgithub上のmasterブランチを削除できません。

Options.png

そして、ブランチを削除し、pushします。

git branch -d master
git push origin :master

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
49