GitHubページを利用して、GitHubで管理しているファイルを元にWebサイトを公開する方法を学習しましょう。

これまでの課題で制作したアプリをポートフォリオとして公開することができたり、制作したツールの使い方についてなどのページを公開することができます。

GitHubのリポジトリで管理しているソースコードを元にWebサイトを公開できるサービスです。

バックエンド(JavaやPython、PHPなど)が必要な動的なページは作成できませんが、フロントエンドの静的なサイトは簡単に無料で公開することができます。

以下はGitHub ページでホスティングされているWebサイトの例です。

GitHubでWebサイトを公開する方法2つ

GitHubページを公開する方法は大きく分けて2つです。

1つ目は、ユーザーまたはOrganization(組織)の GitHubページ 用のリポジトリを作成する方法です。

2つ目は、リポジトリに GitHubページ用のブランチを作成する方法です。

リポジトリを作成して公開する

GitHub Pages Repository

ユーザーや組織のWebサイトを新しく作る場合は、GitHubページ用のリポジトリを作成する方法で公開します。

この方法では、アカウントごとに一つのリポジトリしか公開することができないため、ユーザーのポートフォリオや組織についてのWebサイトに利用しましょう。

  1. GitHubに新しくリポジトリを作成してください。
    リポジトリ名は <user>.github.ioまたは<organization>.github.io に設定します。
  2. リポジトリにファイルをプッシュしてください。
    ルートフォルダに index.html ファイルを設置する必要があります。
  3. https://<user>.github.io/ にアクセスします

ブランチを作成して公開する

GitHub Pages Branch

既にリポジトリがある場合や、既に上記の「リポジトリを作成して公開する」で公開している場合は、この方法で公開することができます。

リポジトリごとにWebサイトを公開できるので、サービスやツールの説明や使い方に使用できます。

  1. GitHubのリポジトリに gh-pages ブランチを新しく作成します。
    このブランチでWebサイトの公開ファイルを管理します。

  2. https://<user>.github.io/<repository>/ にアクセスします。

詳細なドキュメントは以下のページを御覧ください。

GitHub Page を使う – GitHub Docs

課題

GitHubページを使用してポートフォリオページを作成してください。