GitとGitHubを基本からまとめてみた【GitHub Pages】

GitHub Pagesとは

『GitHub Pages』とは、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスのこと。

メリット

• Webサーバーが一切不要
• JavaScriptやjQueryも作動する
• GitHubアカウントを持っていれば3～5分程度で公開できる
• 「xxx.github.io」のドメインがもらえる (xxxはあなたのユーザー名)
• ドメイン設定をすれば独自ドメインの使用も可能

デメリット

• GitHubを使っているのでソースコードが公開される
• サーバーに接続する大規模サイトには向いていない
• GitHubを使っているため日本語ローカライズがされていない

GitHub Pagesを使ってWebページを公開

1.GitHub Pages用のリポジトリの作成
2.ウェブページの作成
3.GitHubへプッシュ
4.GitHub Pagesへアクセスして確認

1.GitHub Pages用のリポジトリの作成

GitHub Pagesには大きく分けて2つの種類があり、ユーザのウェブページを公開する①ユーザサイト（User site）とプロジェクトのウェブページを公開する②プロジェクトサイト（Project site）がある。
※　組織サイト（Organization site）もあるが、主体がユーザか組織かというだけで、基本的にはユーザサイトと同じもの。
※　ユーザサイトとプロジェクトサイトではリポジトリの作成方法が少し異なる。

①ユーザサイト用リポジトリの作成

(1) GitHubにアクセスし、ログインする。ページ右上の『+』アイコンをクリックし、『New repository』をクリックする。
(2) 「Repository name」欄に、「username.github.io」（「username」の部分は自分のGitHubユーザ名）と入力し、
『Create repository』ボタンをクリックする。
(3) ローカルのターミナルで、下記のように実行したら、（usernameは自分のGitHubユーザ名に変更する）　
ローカル環境にレポジトリがクローンできる。

$ git clone 　　例：https://github.com/username/username.github.io

(4)カレントディレクトリに「username.github.io」というディレクトリができているので、そのディレクトリに入れ、ユーザサイト用のリポジトリが作成できた。

$ cd 　例：username.github.io

②プロジェクトサイト用リポジトリの作成

ウェブページを作成したいプロジェクトのリポジトリに「gh-pages」という名前のブランチを作成し、
チェックアウトする（「/path/to/local-repository」はローカルにあるリポジトリのパス）。

$ cd /path/to/local-repository
$ git branch gh-pages
$ git checkout gh-pages

既存リポジトリの場合、すでに存在しているプロジェクトのファイル群はウェブページには基本的に必要ないので削除する（「.git」ディレクトリはGitが用いるので残します）。これでプロジェクトサイト用のリポジトリが作成。

2.ウェブページの作成

GitHub Pagesに反映させるためのページをローカルのリポジトリで作成する。
HTML、CSS、画像はもちろん、JavaScriptを用いることもできる。
※ ここでは簡単に「Hello world」と文字列を表示するページを作成。　自分で試すときは、しっかりHTMLファイルを作成しても構わない。

$ echo "Hello world" > index.html
html-file01

ファイルが完成したので、リポジトリにコミットし、事前準備は完了です。

$ git add --all
$ git commit -m "Initial commit"

3.GitHubへプッシュ

GitHub Pagesで表示させるために、ローカルでコミットした変更をGitHubへプッシュする。
※ 今回は、originという名前でGitHubのリポジトリを作成した例を記載。別の名前をつけたい場合は置き換える。

ここでもユーザサイトとプロジェクトサイトでやり方が異なるので注意 !!

① ユーザサイトの場合は「master」ブランチをプッシュする。

$ git push -u origin master

② プロジェクトサイトの場合は「gh-pages」ブランチをプッシュする。

$ git push -u origin gh-pages

上記コマンドの後、自分のGitHubユーザ名とパスワードを入力してプッシュし、作業は完了。

4.GitHub Pagesへアクセスして確認

作成したウェブページは、ユーザサイトの場合は「http://　例：username.github.io」で、　
プロジェクトサイトの場合は、「http://　例：username.github.io/repository」で公開される。
※ 「username」は自分のGitHubユーザ名、「repository」はリポジトリ名に置き換える。
※ ウェブページが表示されないときは、リポジトリ名およびブランチ名が正しく設定されているかを確認すること。

公開したページを更新する

ローカルレポジトリに入り、作成したHTMLファイルを更新する。
※ 今回は、文字を「Hello GitHub Pages!」に変えただけ。

　　　　$ cd /path/to/local-repository
※ $ echo "Hello GitHub Pages!" > index.html

ファイルの更新が終わったら、下記のように入力して変更をコミットする。

$ git add --all
$ git commit -m "Update page"

①　ユーザサイトならば『master』ブランチをプッシュする。

$ git push -u origin master

② プロジェクトサイトならば「gh-pages」ブランチをプッシュする。

$ git push -u origin gh-pages

再度ブラウザで自分のページのURLへアクセスして、正しく更新されているかを確認する。

参考サイト

GitHub Pages について
無料で使える！GitHub Pagesを使ってWebページを公開する方法
たった５ステップ！Githubの機能「GitHub Pages」でホームページを制作しよう