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

GitHub Pagesを使って、GitHub.com上のリポジトリから直接Astroウェブサイトをホストすることができます。

デプロイ方法

GitHub Actionsを使うことで、AstroサイトをGitHub Pagesに自動的にビルドしてデプロイすることができます。これを行うには、ソースコードがGitHubでホストされている必要があります。

Astroは公式のwithastro/actionを保守しており、ほとんど設定することなくプロジェクトをデプロイすることができます。以下の手順に従って、AstroサイトをGitHubページにデプロイしてください。さらに詳しい情報が必要な場合は、パッケージのREADMEを参照してください。

GitHub Pages用Astroの設定

`github.io`のURLにデプロイする

astro.config.mjsにsiteとbaseオプションを設定します。

import { defineConfig } from 'astro/config'

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

`site`

siteの値は以下のいずれかでなければなりません。

あなたのユーザー名に基づいた次のようなURL：https://<username>.github.io
GitHub Organizationのプライベートページ向けに自動生成されたランダムなURL：https://<random-string>.pages.github.io/

`base`

Astroがあなたのリポジトリ名（例：/my-repo）をウェブサイトのルートとして扱うようにbaseの値が必要な場合があります。

baseには、/my-blogのように、スラッシュで始まるリポジトリ名を指定します。これは、Astroがあなたのウェブサイトのルートがデフォルトの/ではなく、/my-repoであることを理解できるようにするためです。

この値が設定されている場合、すべての内部ページリンクの先頭にbaseの値を付与する必要があります。

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

詳細はこちら：base値の設定方法

カスタムドメインでGitHub pagesを使う

以下の./public/CNAMEファイルをプロジェクトに追加することで、カスタムドメインを設定できます。

sub.mydomain.com

こうすることで、user.github.ioの代わりにあなたのカスタムドメインにサイトがデプロイされます。あなたのドメインプロバイダの設定も忘れずに行ってください。

カスタムドメインでGitHub pagesを使用するようにAstroを設定するには、siteの値にドメインを設定します。baseには値を設定しないでください。

import { defineConfig } from 'astro/config'

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

GitHub Actionの設定

プロジェクトの.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@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        # with:
          # path: . # リポジトリ内のAstroプロジェクトのルートロケーション。（オプション）
          # node-version: 20 # サイト構築に使用するNodeのバージョン。デフォルトは20です。（オプション）
          # package-manager: pnpm@latest # 依存関係のインストールとサイトのビルドに使用するNodeパッケージマネージャ。ロックファイルに基づいて自動的に検出されます。（オプション）

  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