GitHub Pagesツール

無料 GitHub Pagesワークフロージェネレーター

静的サイトをGitHub PagesにデプロイするためのGitHub ActionsワークフローYAMLを生成します。

ツールを読み込み中...

GitHub Pagesワークフロージェネレーターとは

GitHub Pagesワークフローは、GitHub ActionsのYAMLファイルで、mainブランチにプッシュするたびにサイトを自動的にビルドしてデプロイします。初心者にとって、正しい権限、並行性設定、Nodeセットアップ、ビルドステップ、アーティファクトアップロードを含むテンプレートが必要です。このツールは、標準的なデプロイ構造を持つすぐ使えるpages.ymlを生成します。

クイックアンサー

GitHub Actionsワークフローは、プッシュのたびに静的サイトを自動的にビルドしてGitHub Pagesにデプロイします。生成されたYAMLには、標準的な権限、並行性設定、ビルドステップが含まれています。

Last updated: 2026-06-11

制限事項

  • 生成されるワークフローは標準的なテンプレートです。カスタムビルドツール、モノレポ、マルチステップパイプラインには、追加のジョブステップやカスタムアクションが必要になる場合があります。
  • Actionsを介したGitHub Pagesのデプロイは、パブリックリポジトリまたはGitHub Pro、Team、Enterpriseプランのプライベートリポジトリでのみ機能します。
  • サイトがカスタムドメインを使用する場合、CNAMEプレースホルダーファイルを出力ディレクトリに作成またはコピーする必要があります。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. サイトタイプのプリセットを選択するか、カスタムビルド設定を入力します。
  2. プロジェクトのNodeバージョン、ビルドコマンド、出力ディレクトリを設定します。
  3. 生成されたYAMLをリポジトリの.github/workflows/pages.ymlにコピーします。
  4. リポジトリ設定でGitHub Pagesを有効にし、ソースとしてGitHub Actionsを使用するように設定します。

主な用途

  • GitHub Pages上のプレーンなHTML静的サイトの自動デプロイを設定する。
  • ViteやAstroの静的プロジェクトのビルド・アンド・デプロイワークフローを作成する。
  • カスタムドメインがデプロイ時に失われないように、CNAMEプレースホルダーステップを追加する。

用途

使用例

プレーンHTMLサイトのデプロイ

ビルドステップのない静的HTMLサイトでは、ルートディレクトリをそのままアップロードするワークフローが必要です。ジェネレーターはビルドステップのない最小限のワークフローを作成します。

Viteプロジェクトのデプロイ

Viteプロジェクトではnpm ci、npm run build、そしてdistフォルダのアップロードが必要です。ジェネレーターはアーティファクトアップロード付きの正しいワークフローを作成します。

よくあるミス

  • 間違った出力ディレクトリを使用し、GitHub Pagesが空または不完全なサイトを提供してしまう。
  • ワークフローでpagesとid-tokenの正しい権限を設定するのを忘れる。
  • サイトがカスタムドメインを使用していないのに、ワークフローにCNAMEプレースホルダーを残してしまう。

検証

  1. ワークフローファイルをリポジトリにプッシュし、Actionsタブを確認してワークフローが正常に実行されることを確認する。
  2. 正常な実行後、GitHub PagesのURLにアクセスし、サイトのコンテンツが期待どおりであることを確認する。

FAQ

GitHub PagesワークフロージェネレーターのFAQ

ワークフローファイルはどこに保存すべきですか?

リポジトリの.github/workflows/pages.ymlとして保存します。GitHub Actionsはそのディレクトリ内のワークフローファイルを自動的に検出して実行します。

リポジトリ設定で何か設定する必要がありますか?

はい。Settings > Pagesに移動し、ソースをGitHub Actionsに設定します。これにより、GitHub Pagesがブランチベースのデプロイではなくワークフローデプロイを使用するよう指示されます。

どのNodeバージョンを使用すべきですか?

プロジェクトの要件に合ったNodeバージョンを使用してください。ほとんどの静的サイトジェネレーターにはNode 20または22が安全な選択肢です。生成されたワークフローのバージョンフィールドは、ローカル環境やCI環境に合わせて調整できます。

GitHub Actionsワークフローでnpmの代わりにpnpmやyarnを使用できますか?

はい。npmコマンドをパッケージマネージャーに応じた同等のコマンドに置き換えてください。pnpmの場合は、インストールステップの前にpnpm/action-setupを使用します。yarnの場合は、npm installをyarn install --frozen-lockfileに、npm run buildをyarn buildに置き換えます。pnpmとyarnはどちらもGitHub Actionsと互換性があり、静的サイトをビルドしてGitHub Pagesにデプロイするために使用できます。

関連ツール

その他のgithub pagesツール

こちらもお試しください

こちらもお試しください