Skip to main content

GitHub Pages サイトを作成する

新規または既存のリポジトリ内に、GitHub Pages サイトを作成できます。

この機能を使用できるユーザーについて

GitHub Pagesは、パブリック・リポジトリのGitHub Freeと組織用のGitHub Free、パブリック・リポジトリとプライベート・リポジトリのGitHub Pro、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverで利用できます。 詳しくは、「GitHub のプラン」をご覧ください。

GitHub Pages で、Jekyll ビルドの実行に GitHub Actions が使用されるようになりました。 ビルドのソースとしてブランチを使用する際、組み込みの Jekyll ワークフローを使用する場合は、リポジトリで GitHub Actions を有効にする必要があります。 GitHub Actions が使用できない場合、または無効になっている場合は、ソース ブランチのルートに .nojekyll ファイルを追加すると、Jekyll ビルド プロセスがバイパスされ、コンテンツが直接デプロイされます。 GitHub Actions の有効化の詳細については、「リポジトリの GitHub Actions の設定を管理する」を参照してください。

Note

Organization 所有者は、organization が所有しているリポジトリからの GitHub Pages サイトの公開を制限できます。 詳しくは、「組織の GitHub Pages サイトの公開を管理する」を参照してください。

サイト用にリポジトリを作成する

リポジトリを作成することも、自分のサイト用の既存のリポジトリを選ぶこともできます。

リポジトリに対して GitHub Pages サイトを作成したい場合、そのリポジトリ内のすべてのファイルがサイトに関連付けられるわけではないのなら、そのサイトに対して公開元を構成することができます。 たとえば、専用のブランチおよびフォルダーを用意して自分のサイト ソース ファイルを保持したり、カスタムの GitHub Actions ワークフローを使用してサイト ソース ファイルをビルドして展開したりできます。

リポジトリを所有しているアカウントが GitHub Free または Organization 用の GitHub Free を使用している場合、そのリポジトリはパブリックである必要があります。

既存のリポジトリにサイトを作成する場合は、「サイトを作成する」セクションに進んでください。

  1. ページの右上隅で を選択し、 [新しいリポジトリ] をクリックします。

    新しいアイテムを作成するオプションを示す GitHub ドロップダウン メニューのスクリーンショット。 [新しいリポジトリ] というメニュー項目が濃いオレンジ色の枠線で囲まれています。

  2. [所有者] ドロップダウン メニューを使い、リポジトリを所有させたいアカウントを選びます。

    新しい GitHub リポジトリの所有者メニューのスクリーンショット。 メニューには、octocat と github の 2 つのオプションが表示されます。

  3. リポジトリの名前と、任意で説明を入力してください。 ユーザーまたは Organization サイトを作成する場合は、リポジトリに <user>.github.io または <organization>.github.io という名前を付ける必要があります。 ユーザーまたは Organization の名前に大文字が含まれている場合は、小文字にする必要があります。 詳しくは、「GitHub Pages について」を参照してください。

    リポジトリの GitHub Pages 設定のスクリーンショット。 リポジトリ名フィールドにはテキスト "octocat.github.io" が含まれており、濃いオレンジ色の枠線で囲まれています。

  4. リポジトリの可視性を選択してください。 詳しくは、「リポジトリについて」を参照してください。

  5. [Initialize this repository with a README] (このレポジトリを README で初期化する) を選択します。

  6. [Create repository] (リポジトリの作成) をクリックします。

サイトを作成する

サイトを作成する前には、GitHub上にサイトのためのリポジトリを持っていなければなりません。 既存のリポジトリにサイトを作成していない場合は、「サイト用にリポジトリを作成する」を参照してください。

Warning

GitHub Pages サイトは、そのサイトのリポジトリがプライベートであっても、インターネット上で一般に利用できます (プランまたは organization で許可されている場合)。 サイトのリポジトリにセンシティブなデータがあるなら、公開前にそのデータを取り除くのが良いでしょう。 詳しくは、「リポジトリについて」を参照してください。

  1. GitHubで、サイトのリポジトリにアクセスしてください。

  2. 使用する公開ソースを決定します。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。

  3. サイト用のエントリ ファイルを作成します。 GitHub Pages では、サイト用のエントリ ファイルとして index.htmlindex.md、または README.md ファイルを検索します。

    パブリッシュ ソースがブランチとフォルダーの場合、エントリ ファイルはソース ブランチのソース フォルダーの最上位にある必要があります。 たとえば、公開元が main ブランチ上の /docs フォルダーである場合、エントリ ファイルは、main という名前のブランチ上の /docs フォルダー内に配置する必要があります。

    公開元が GitHub Actions ワークフローである場合、デプロイする成果物には、成果物の最上位レベルにあるエントリ ファイルが含まれている必要があります。 エントリ ファイルをリポジトリに追加する代わりに、GitHub Actions ワークフローの実行時にエントリ ファイルを生成するように選択することもできます。

  4. 公開ソースを設定してください。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。

  5. リポジトリ名の下にある [設定] をクリックします。 [設定] タブが表示されない場合は、 [] ドロップダウン メニューを選び、 [設定] をクリックします。

    タブを示すリポジトリ ヘッダーのスクリーンショット。 [設定] タブが濃いオレンジ色の枠線で強調表示されています。

  6. サイド バーの [コードと自動化] セクションで、 [ ページ] をクリックします。

  7. 公開されたサイトを表示するには、[GitHub Pages] の下で [ サイトにアクセスする] をクリックします。

    GitHub Pages の確認メッセージのスクリーンショット。サイトの URL が一覧表示されています。 URL の右側で、[サイトにアクセスする] というラベルの付いたボタンが濃いオレンジ色の枠線で囲まれています。

    Note

    サイトに対する変更は、その変更を GitHub にプッシュしてから公開されるまでに、最大 10 分かかることがあります。 GitHub Pages サイトの変更が 1 時間経ってもブラウザーに反映されない場合は、「GitHub PagesサイトのJekyllビルドエラーについて」を参照してください。

  8. GitHub Pages サイトは、GitHub Actions ワークフローでビルドされ、デプロイされます。 詳しくは、「ワークフロー実行の履歴を表示する」をご覧ください。

    Note

    GitHub Actions はパブリックリ ポジトリでは無料です。 使用料は、無料の時間 (分) の毎月の割り当てを超えるプライベート リポジトリと内部リポジトリに適用されます。 詳しくは、「使用制限、支払い、管理」をご覧ください。

Note

  • ブランチから公開しようとしていて、サイトが自動的に公開されていない場合は、管理者アクセス許可と検証済みの電子メール アドレスを持つユーザーが公開ソースにプッシュしていることを確認してください。
  • GITHUB_TOKEN を使う GitHub Actions ワークフローによってプッシュされたコミットでは、GitHub Pages ビルドがトリガーされません。

次の手順

新しいファイルを追加で作成することにより、ページを追加できます。 各ファイルは、公開元と同じディレクトリ構造で、サイト上に表示されます。 たとえば、プロジェクト サイトの公開元が gh-pages ブランチであり、gh-pages ブランチで /about/contact-us.md という名前の新しいファイルを作成した場合、ファイルは https://<user>.github.io/<repository>/about/contact-us.html で使用できます。

また、サイトの見た目をカスタマイズするため、テーマを追加できます。 詳しくは、「Jekyll を使用して GitHub Pages サイトにテーマを追加する」をご覧ください。

サイトを更にカスタマイズするには、Jekyll を使用できます。Jekyll は、GitHub Pages に組み込まれている静的サイトジェネレータです。 詳しくは、「GitHub PagesとJekyllについて」をご覧ください。

参考資料