無料で使える！GitHub Pagesを使ってWebページを公開する方法
GitHubのサービス「GitHub Pages」の使い方を解説した記事。GitHubのアカウントがあれば無料でページを公開可能。ユーザサイトとプロジェクトサイトの2種類の違い、使い方をそれぞれ紹介。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ソフトウェア開発プロジェクトのためのソースコード管理サービスのGitHub。開発者を中心に使っている人も多いことでしょう。このGitHubに、無料でWebページを公開できるGitHub Pagesというサービスがあることをご存知でしょうか？
今回は、GitHub Pagesの使い方、Webページを公開する方法を紹介します。GitHubをまだ使ったことがなくても、簡単に公開できるのでぜひ試してみてください。
本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。
田島メンター！！GitHubにGitHub Pagesってあるんですけど、これってなんですか〜？
GitHub Pagesっていうのはね、ウェブページをGitを使って簡単に作成できるサービスなんだ。
GitHub Pagesとは
GitHub Pagesは、GitHubが提供するホスティングサービスで、ウェブページをインターネット上に公開することができます。自分自身や所属する組織、あるいはプロジェクトのウェブページをGit/GitHubのリポジトリを用いて、簡単な手順で公開することが可能です。
ウェブページのアップロードはGitおよびGitHubのインターフェイスを用いるので、別途FTPクライアントソフトなどは必要なく、変更のあったファイルだけを簡単に更新することができます。
またGitHub Pagesは、基本的に静的なウェブページをホスティングするサービスです。データベースを用いるような動的なウェブページは公開できません。また、プライベートリポジトリであっても、GitHub Pagesはインターネット上で公開されるので、注意しましょう。
公開するウェブページは自分で一から作成することもできますし、GitHubがあらかじめ用意してあるテンプレートを用いることもできます。
GitHub Pagesを使ってWebページを公開
ここからは具体的な使い方について解説します。
下記の流れでWebページを公開していきます。
- GitHub Pages用のリポジトリの作成
- ウェブページの作成
- GitHubへプッシュ
- 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をブラウザに入力して確認してみましょう。
ウェブページが表示されないときは、リポジトリ名およびブランチ名が正しく設定されているかを確認してみてください。
ページを更新する
最後に、公開したページを更新する方法を紹介します。
ローカルレポジトリに入り、先ほど作成した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ページを作って、一度公開してみたい場合はぜひ試してみてください。
本当に簡単にウェブページが作成できるんですね〜
そうだね。git pushするだけでいいから、サーバーを借りたりサーバーの設定をしたりしなくて良い点でもとても楽だね♪
はい♪
[お知らせ]TechAcademyでは自宅で学べるオンライン完結のGitHub講座を開催しています。わからないことをチャットで質問すると、現役エンジニアのメンターが毎日すぐに回答します。
