GitHub Pagesの使い方 – 複数ページのホームページの作り方【無料】

静的なサイトを作成したいけどサーバとか考えるの面倒。そんな方はGitHubのサービスGitHub Pagesがおすすめです。

GitHubのアカウントがあればmasterブランチにファイルを置くだけでホームページとして公開することができてしまいます。

この記事では、GitHub Pagesでホームページを作成する基本的な方法について解説します。ローカルリポジトリの操作はWindows用のGit Bashを利用しています。

GitHub Pagesとは

GitHub Pagesとは、GitHubが提供しているホスティングサービスです。

masterブランチのHTML, CSS, JavaScript, 画像ファイル等を使って静的なWebページを無料で作成し、公開することができます。従来とは異なりWebサーバを用意しなくてもよい点が魅力です。

GitHub Pagesでホームページを作る方法

GitHub Pagesでホームページを作るには、以下の操作手順で行います。

1. GitHubブラウザで右上の「+」アイコンから「New repository」を選択します。
   
2. リポジトリ作成ページが開くのでリポジトリ名や説明を入力して「Create Repository」ボタンをクリックします。
   • ここで、新しいリポジトリをGitHub Pagesとして公開するには、リポジトリ名の部分を「.github.io」にする必要があります。

3. 作成したリポジトリをローカルへCloneします。リポジトリのURLをコピーし、git cloneコマンドを実行します。
   

   $ git clone リポジトリURL

   
   
   • Clone操作の詳細はこちらにまとめましたので、不明点がある場合は参考にしてください。
     『GitHub-git cloneでリポジトリをローカルに複製する使い方』
4. 作成されたローカルリポジトリへ移動し、必要なファイルを作成し編集します。
   

   $ cd .github.io

   • 例として、トップページとして「index.html」を、レイアウト用として「styling.css」ファイルを作成しています。
     
5. gitコマンド「git add」を使用し変更をgitに認識させます。
   

   $ git add .

6. gitコマンド「git commit」を使用し変更内容をコミットします。
   

   $ git commit -m "コミットメッセージ"

7. gitコマンド「git push」を使用し変更内容をリモートリポジトリに反映させます。
   

   $ git push origin

これでトップページ用のファイルをリモートリポジトリ内に揃えることができました。

「https://.github.io/」のURLを開くと、作成したホームページを確認することができます。

• 「https://.github.io/index.html」によっても開くことができます。
• GitHub Pagesの問題点として、ソースの反映がすぐには行われない可能性があります。タイミングによっては数分～数時間かかる場合もありますのでご注意ください。

複数のページを増やす

続いてトップページ以外のWebページを作成してみましょう。この例では「Contact」ページを作成します。

1. ローカルリポジトリにて、新しいページのhtmlファイルを作成します。
   
   • 例では「contact.html」ファイルをvimコマンドで作成しています。
     
     
2. gitコマンド「git add」を使用し変更をgitに認識させます。
   

   $ git add contact.html（追加したファイル名）

3. gitコマンド「git commit」を使用し変更内容をコミットします。
   

   $ git commit -m "コンタクトページの追加"

4. gitコマンド「git push」を使用し変更内容をリモートリポジトリに反映させます。
   

   $ git push origin

以上で、contact.htmlファイルがリモートリポジトリに反映されました。

「https://.github.io/」のURLを開くと、作成したホームページを確認することができます。

以上GitHub Pagesのでのホームページの基本的な作成方法でした。