1. Qiita
  2. 投稿
  3. HTML

GitHubでWebページを公開する方法

  • 240
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

自分で作ったWebページをリポジトリとして公開して、なおかつそのページをGitHub Pagesで表示させる方法です。やってみれば簡単だけどそもそもGitHubほとんど使ったことなかったので時間かかってしまいましたorz

1.ローカルでWebページの作成

公開したいwebページを作ってください。

2.GitHubにリポジトリ作成

GitHubのユーザーページに行って好きな名前でリポジトリを作成してください。

3.ローカルでファイルを追加してadd→commit→push

  • まずは作成したリポジトリをローカルにクローンします;

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

  • クローンしたリポジトリのディレクトリに移動してください;

cd リポジトリ名

  • 作成したhtmlファイル等をディレクトリ内にコピーしてください。 cssやらjsやらimagesやらがあればそのまままとめてコピーしてください;

cp -r コピー元ディレクトリ/* ./

  • ファイルをaddします;

git add *

  • ファイルをコミットします。コメントは適当に変えてください;

git commit -m 'first commit'

  • pushしてGitHubのリポジトリに反映させてください;

git push origin master

この段階でGitHubのリポジトリページを見るとファイルがアップされているはずです。

4.gh-pagesブランチを切る

リポジトリの管理画面からgh-pagesブランチを作成してください。

ss.png

5.gh-pagesブランチに移動

ブランチを切ったら同じところをクリックして"gh-pages"を選んでください。gh-pagesブランチのページへ移動するはずです。

6.必要ならファイルのリネーム

作成したhtmlファイルの名前がindex.html以外の場合は、そのファイルを選んで"Edit"からファイル名を"index.html"に変更してください。すでに"index.html"の場合は何もしなくて良いです。

7.座して待つ

ユーザー名.github.io/リポジトリ名にアクセスすると作成したページが表示されるはずです。公式ページ曰く反映されるまで10分くらいかかることがあるらしいので、もし表示されない場合は少し間をおいてみてください。

おまけ

ここでの話はWebページをリポジトリに登録した場合に限らず、すべてのリポジトリに対してもそのWebページをつくることができます。なのでライブラリなんかをGitHubで公開する場合もそのデモページとかをつくることができます。やることは上に書いたように"gh-pages"というブランチをつくってそこにindex.html等々のファイルを置いておくだけです。

参考ページ

Web - Githubを使って3分でHPを公開する。 - Qiita
Creating Project Pages manually · GitHub Help