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

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

デプロイ方法

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

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

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

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ドキュメントを参照してください。）

:::caution公式のAstro actionは、ロックファイルをスキャンして使用しているパッケージマネージャー（npm、yarn、pnpm、またはbun）を検出します。パッケージマネージャーが自動的に生成したpackage-lock.json、yarn.lock、pnpm-lock.yaml、またはbun.lockbファイルをリポジトリにコミットしてください。:::

Astroの設定ファイルで、site (EN)にデプロイ先のGitHub URLを設定します。
```
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
})
```
siteの値は以下のいずれかである必要があります：
- ユーザー名に基づくURL：https://<username>.github.io
- GitHub Organizationのプライベートサイト用に自動生成されるランダムなURL：https://<random-string>.pages.github.io/
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）：
```
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: '/my-repo',
})
```
:::caution[baseを設定した場合の内部リンク]この値を設定した場合、すべての内部リンクにbase値のプレフィックスを付ける必要があります：
```
<a href="/my-repo/about">About</a>
```
詳細はbaseの設定 (EN)を参照してください。:::
GitHubでリポジトリのSettings > Pagesに移動します。
サイトのSourceとしてGitHub Actionsを選択します。

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

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

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

ドメインプロバイダーでDNSを設定します。
プロジェクトに./public/CNAMEファイルを追加します。

public/フォルダー内に、カスタムドメインを1行で指定するファイルを作成します：
```
sub.example.com
```
これにより、サイトはuser.github.ioではなくカスタムドメインでデプロイされます。
Astroの設定ファイルで、siteの値をカスタムドメインに更新します。baseの値は設定せず、存在する場合は削除してください：
```
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://example.com',
  base: '/my-repo'
})
```
必要に応じて、すべての内部リンクからbaseプレフィックスを削除します：
```
<a href="/my-repo/about">About</a>
```