コンテンツにスキップ

AstroサイトをGitHub Pagesにデプロイする

GitHub Pagesを使用して、プリレンダリングされた静的なAstroサイトをホストできます。
GitHub Actionsを使い、GitHub.com上のリポジトリから直接デプロイできます。

デプロイ方法

Section titled “デプロイ方法”

Astroは、最小限の設定でプロジェクトをGitHub Pagesにデプロイするための公式GitHub Actionを提供しています。これはGitHub Pagesへの推奨されるデプロイ方法です。

以下の手順に従って、GitHub Actionを使用してAstroサイトをGitHub Pagesにデプロイしてください。これにより、リポジトリからGitHub URL（例：https://<username>.github.io/<my-repo>）でサイトが作成されます。デプロイ後、オプションでカスタムドメインを設定して、好みのドメイン（例：https://example.com）でサイトを公開できます。

  1. プロジェクト内に.github/workflows/deploy.ymlファイルを作成し、以下のYAMLを貼り付けます。

    deploy.yml
    name: Deploy to GitHub Pages
    

    on:
      # `main`ブランチにプッシュするたびにワークフローをトリガーします。
      # 別のブランチを使用している場合は、`main`をそのブランチ名に置き換えてください。
      push:
        branches: [ main ]
      # GitHub上のActionsタブからこのワークフローを手動で実行できます。
      workflow_dispatch:
    

    # このジョブがリポジトリをクローンし、ページデプロイメントを作成することを許可します。
    permissions:
      contents: read
      pages: write
      id-token: write
    

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout your repository using git
            uses: actions/checkout@v5
          - name: Install, build, and upload your site
            uses: withastro/action@v5
            # with:
              # path: . # リポジトリ内のAstroプロジェクトのルート位置です。（オプション）
              # node-version: 24 # サイトのビルドに使用するNodeのバージョンです。デフォルトは22です。（オプション）
              # package-manager: pnpm@latest # 依存関係のインストールとサイトのビルドに使用するNodeパッケージマネージャーです。ロックファイルに基づいて自動検出されます。（オプション）
              # build-cmd: pnpm run build # サイトをビルドするためのコマンドです。デフォルトでパッケージのbuildスクリプトを実行します。（オプション）
            # env:
              # PUBLIC_POKEAPI: 'https://pokeapi.co/api/v2' # 変数の値にはシングルクォートを使用してください。（オプション）
    

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4

    Astro actionはオプションの入力を受け取ります。with:行と使用したい入力のコメントアウトを外して設定します。

    サイトにパブリックな環境変数が必要な場合は、env: 行のコメントアウトを外して追加します。（プライベートな環境変数の追加については、シークレットの設定に関するGitHubドキュメントを参照してください。）

  2. Astroの設定ファイルで、site (EN)にデプロイ先のGitHub URLを設定します。

    astro.config.mjs
    import { defineConfig } from 'astro/config'
    

    export default defineConfig({
      site: 'https://astronaut.github.io',
    })

    siteの値は以下のいずれかである必要があります：

  3. astro.config.mjsで、base (EN)の値を設定します（通常は必須です）。

    GitHub Pagesでは、ユーザー名とリポジトリ名に基づいたアドレス（例：https://<username>/github.io/<my-repo>/）でサイトが公開されます。baseにリポジトリ名を設定することで、Astroがサイトのルートをデフォルトの/ではなく/my-repoとして認識できるようになります。リポジトリ名が<username>.github.io形式（例：https://github.com/username/username.github.io/）の場合は、この手順をスキップできます。

    baseをスラッシュで始まるリポジトリ名に設定します（例：/my-repo）：

    astro.config.mjs
    import { defineConfig } from 'astro/config'
    

    export default defineConfig({
      site: 'https://astronaut.github.io',
      base: '/my-repo',
    })

  4. GitHubでリポジトリのSettings > Pagesに移動します。

  5. サイトのSourceとしてGitHub Actionsを選択します。

Astroプロジェクトのリポジトリに変更をプッシュすると、GitHub ActionがGitHub URLに自動的にデプロイを行います。

GitHub URLをカスタムドメインに変更する

Section titled “GitHub URLをカスタムドメインに変更する”

GitHub URLでGitHub Pagesにデプロイした後、カスタムドメインを設定できます。これにより、ユーザーはhttps://<username>.github.ioではなく、カスタムドメインhttps://example.comでサイトにアクセスできるようになります。

  1. ドメインプロバイダーでDNSを設定します。

  2. プロジェクトに./public/CNAMEファイルを追加します。

    public/フォルダー内に、カスタムドメインを1行で指定するファイルを作成します：

    public/CNAME
    sub.example.com

    これにより、サイトはuser.github.ioではなくカスタムドメインでデプロイされます。

  3. Astroの設定ファイルで、siteの値をカスタムドメインに更新します。baseの値は設定せず、存在する場合は削除してください：

    astro.config.mjs
    import { defineConfig } from 'astro/config'
    

    export default defineConfig({
      site: 'https://example.com',
      base: '/my-repo'
    })

  4. 必要に応じて、すべての内部リンクからbaseプレフィックスを削除します：

    <a href="/my-repo/about">About</a>

例

Section titled “例”

その他のデプロイガイド

貢献する コミュニティ スポンサー