無料で使える！GitHub Pagesを使ってWebページを公開する方法

ソフトウェア開発プロジェクトのためのソースコード管理サービスのGitHub。開発者を中心に使っている人も多いことでしょう。このGitHubに、無料でWebページを公開できるGitHub Pagesというサービスがあることをご存知でしょうか？

今回は、GitHub Pagesの使い方、Webページを公開する方法を紹介します。GitHubをまだ使ったことがなくても、簡単に公開できるのでぜひ試してみてください。

本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。

 

 

GitHub Pagesとは

GitHub Pagesは、GitHubが提供するホスティングサービスで、ウェブページをインターネット上に公開することができます。自分自身や所属する組織、あるいはプロジェクトのウェブページをGit/GitHubのリポジトリを用いて、簡単な手順で公開することが可能です。

ウェブページのアップロードはGitおよびGitHubのインターフェイスを用いるので、別途FTPクライアントソフトなどは必要なく、変更のあったファイルだけを簡単に更新することができます。

またGitHub Pagesは、基本的に静的なウェブページをホスティングするサービスです。データベースを用いるような動的なウェブページは公開できません。また、プライベートリポジトリであっても、GitHub Pagesはインターネット上で公開されるので、注意しましょう。

公開するウェブページは自分で一から作成することもできますし、GitHubがあらかじめ用意してあるテンプレートを用いることもできます。

 

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

ここからは具体的な使い方について解説します。

下記の流れでWebページを公開していきます。

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

 

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

GitHub Pagesには大きく分けて2つの種類があります。ユーザのウェブページを公開するユーザサイト（User site）と、プロジェクトのウェブページを公開するプロジェクトサイト（Project site）です。組織サイト（Organization site）もありますが、これは主体がユーザか組織かというだけで、基本的にはユーザサイトと同じものであると言えます。

ユーザサイトとプロジェクトサイトではリポジトリの作成方法が少し異なりますので、それぞれ紹介します。

 

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

GitHubへアクセスし「username.github.io」という名前のリポジトリを作成していきます。

まずはGitHubにアクセスし、ログインしますしてください。ページ右上の「+」アイコンをクリックし、「New repository」をクリックします。

 

次に「Repository name」欄に、「username.github.io」（「username」の部分は自分のGitHubユーザ名）と入力し、「Create repository」ボタンをクリックします。

 

続いて、ローカルのターミナルで、下記のように実行してください（usernameは自分のGitHubユーザ名に変更しましょう）。

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

これでローカル環境にレポジトリがクローンされました。

 

この際、カレントディレクトリに「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ファイルが完成したので、リポジトリにコミットします。

$ 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」はリポジトリ名に置き換えてください）。

 

このURLをブラウザに入力して確認してみましょう。

ウェブページが表示されないときは、リポジトリ名およびブランチ名が正しく設定されているかを確認してみてください。

 

[PR] 無料で現役エンジニアから学べる

ページを更新する

最後に、公開したページを更新する方法を紹介します。

ローカルレポジトリに入り、先ほど作成した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へアクセスして、正しく更新されているかを確認してください。

このような流れで何度でも更新することができます。

 

今回の記事は以上です。

Webページを作って、一度公開してみたい場合はぜひ試してみてください。

 

 

[お知らせ]TechAcademyでは自宅で学べるオンライン完結のGitHub講座を開催しています。わからないことをチャットで質問すると、現役エンジニアのメンターが毎日すぐに回答します。