GitHubページを利用して、GitHubで管理しているファイルを元にWebサイトを公開する方法を学習しましょう。
これまでの課題で制作したアプリをポートフォリオとして公開することができたり、制作したツールの使い方についてなどのページを公開することができます。
今回の学習内容
GitHubページとは
GitHubのリポジトリで管理しているソースコードを元にWebサイトを公開できるサービスです。
バックエンド(JavaやPython、PHPなど)が必要な動的なページは作成できませんが、フロントエンドの静的なサイトは簡単に無料で公開することができます。
以下はGitHub ページでホスティングされているWebサイトの例です。
- Bootstrap
GitHub(https://github.com/twbs/bootstrap)
GitHub Page(https://twbs.github.io/bootstrap/) - React
GitHub(https://github.com/facebook/react)
GitHub Page(https://facebook.github.io/react/) - Electron
GitHub(https://github.com/electron/electronjs.org)
GitHub Page(https://electron.github.io/electronjs.org/)
GitHubでWebサイトを公開する方法2つ
GitHubページを公開する方法は大きく分けて2つです。
1つ目は、ユーザーまたはOrganization(組織)の GitHubページ 用のリポジトリを作成する方法です。
2つ目は、リポジトリに GitHubページ用のブランチを作成する方法です。
リポジトリを作成して公開する
ユーザーや組織のWebサイトを新しく作る場合は、GitHubページ用のリポジトリを作成する方法で公開します。
この方法では、アカウントごとに一つのリポジトリしか公開することができないため、ユーザーのポートフォリオや組織についてのWebサイトに利用しましょう。
- GitHubに新しくリポジトリを作成してください。
リポジトリ名は<user>.github.io
または<organization>.github.io
に設定します。 - リポジトリにファイルをプッシュしてください。
ルートフォルダにindex.html
ファイルを設置する必要があります。 https://<user>.github.io/
にアクセスします
ブランチを作成して公開する
既にリポジトリがある場合や、既に上記の「リポジトリを作成して公開する」で公開している場合は、この方法で公開することができます。
リポジトリごとにWebサイトを公開できるので、サービスやツールの説明や使い方に使用できます。
- GitHubのリポジトリに
gh-pages
ブランチを新しく作成します。
このブランチでWebサイトの公開ファイルを管理します。 https://<user>.github.io/<repository>/
にアクセスします。
詳細なドキュメントは以下のページを御覧ください。
課題
GitHubページを使用してポートフォリオページを作成してください。