【GitHub Pages】リモートリポジトリからWebサイトを公開する

GitHub Pages とは

GitHub PagesとはリモートリポジトリからWebサイトを公開できるホスティングサービスです。

GitHub Pagesは、GitHubのリポジトリからHTML、CSS、およびJavaScriptファイルを直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。

GitHub Pagesについて

事前準備

既にリモートリポジトリを作成している状態であれば、僅か数分でWebサイトを公開できてしまいます。実際に公開するまでの手順をここでは解説していきます。

まだリモートリポジトリを作成されていない方はこちらのページを参考に、作成してみましょう。

注意点ですがGitHub Pagesでページを公開するにはエントリファイルをrootディレクトリ又は、docsフォルダ内に配置する必要があります。

GitHub Pagesでは、サイト用のエントリファイルとしてindex.html、index.md、またはREADME.mdファイルを検索します。公開元がブランチおよびフォルダーである場合、エントリ ファイルは、ソース ブランチ上のソース フォルダーの最上位レベルに配置する必要があります。

サイトを作成する

Web サイトを公開しよう

では早速、手順を解説していきます。

リポジトリのツリーはこの様になっています。
エントリーファイル(index.html)をrootディレクトリに配置しています。

1. 公開したいリモートリポジトリのページを開いて、Settingタブをクリックします。

2. Code and automationからPagesをクリックします。

3. Build and deploymentの設定を行います。

• Source
  • ブランチから公開するのでDeploy from a branchのままで大丈夫です。
• Branch
  1. 公開元のブランチを指定します。
     今回は公開したいブランチがmainブランチなのでmainを選択します。
  2. ディレクトリは/rootと/docsの 2 種類から選択します。
     今回は inedx.htmlがrootディレクトリに存在するので/rootを選択します。
• 設定が良ければSaveします。

4. 数分待ってページを更新すると、Visit Siteが表示されます。Visit Siteをクリックすると公開された Webサイトにジャンプします。後はみんなに共有して完了です！

おわりに

こんな簡単にWebサイトを公開できるのは素晴らしいですね。
最後にGitHub Pagesの注意事項や使用制限について触れておきます。
詳細はリンク先よりご確認下さい。

GitHub Pages サイトは、パスワードやクレジットカード番号といった機密情報のやりとりに使うべきではありません。
さらに、GitHub Pages の使用には、一獲千金を狙った計画、わいせつなコンテンツ、暴力的あるいは脅迫的なコンテンツや活動に関する制限など、GitHub 利用規約が適用されます。

禁止される用途

・ 公開されたGitHub Pagesのサイトは1GB以上であってはなりません。
・ GitHub Pages のデプロイは、10 分を超えるとタイムアウトになります。
・ GitHub Pages サイトには、月当たり 100 GB の ソフトな 帯域幅制限があります。

使用状況の制限