AstroサイトをGitHub Pagesにデプロイする
GitHub Pagesを使って、GitHub.com上のリポジトリから直接Astroウェブサイトをホストすることができます。
デプロイ方法
GitHub Actionsを使うことで、AstroサイトをGitHub Pagesに自動的にビルドしてデプロイすることができます。これを行うには、ソースコードがGitHubでホストされている必要があります。
Astroは公式のwithastro/action
を保守しており、ほとんど設定することなくプロジェクトをデプロイすることができます。以下の手順に従って、AstroサイトをGitHubページにデプロイしてください。さらに詳しい情報が必要な場合は、パッケージのREADMEを参照してください。
-
astro.config.mjs
にsite
と、必要に応じてbase
オプションを設定します。astro.config.mjs import { defineConfig } from 'astro/config'export default defineConfig({site: 'https://astronaut.github.io',base: '/my-repo',})site
はhttps://<YOUR_USERNAME>.github.io
またはhttps://my-custom-domain.com
である必要があります。base
には、/my-repo
のように、スラッシュで始まるリポジトリ名を指定します。これは、Astro があなたのウェブサイトのルートがデフォルトの/
ではなくmy-repo
であることを理解するためです。
以下の場合は、
base
パラメータを設定しないでください。- ページがルートフォルダから配信されている場合。
- リポジトリが
https://github.com/<USERNAME>/<USERNAME>.github.io
にある場合。 - カスタムドメインを使っている場合。
もし
base
の値を設定しておらず、GitHub にデプロイするためだけにこの値を設定している場合は、内部ページのリンクにbase
を含めるように更新する必要があります。<a href="/my-repo/about">About</a> -
プロジェクトの
.github/workflows/deploy.yml
に新しいファイルを作成し、以下のYAMLを貼り付けます。deploy.yml name: Deploy to GitHub Pageson:# `main` ブランチにプッシュするたびにワークフローを実行します# 異なるブランチ名を使用する場合は、`main` をブランチ名に置き換えてくださいpush:branches: [ main ]# このワークフローを GitHub の Actions タブから手動で実行できるようにします。workflow_dispatch:# このジョブがリポジトリをクローンし、ページデプロイメントを作成することを許可します。permissions:contents: readpages: writeid-token: writejobs:build:runs-on: ubuntu-lateststeps:- name: Checkout your repository using gituses: actions/checkout@v3- name: Install, build, and upload your siteuses: withastro/action@v1# with:# path: . # リポジトリ内のAstroプロジェクトのルートロケーション。(オプション)# node-version: 18 # サイト構築に使用するNodeのバージョン。デフォルトは18です。(オプション)# package-manager: pnpm@latest # 依存関係のインストールとサイトのビルドに使用する Node パッケージマネージャ。ロックファイルに基づいて自動的に検出されます。(オプション)deploy:needs: buildruns-on: ubuntu-latestenvironment:name: github-pagesurl: ${{ steps.deployment.outputs.page_url }}steps:- name: Deploy to GitHub Pagesid: deploymentuses: actions/deploy-pages@v1astroアクションはいくつかのオプション入力を受け取ります。これらの入力は
with:
行と使いたい入力のコメントアウトを外すことで指定できます。公式の Astro action はロックファイルをスキャンして、お好みのパッケージマネージャ (
npm
、yarn
、pnpm
、bun
) を検出します。パッケージマネージャが自動的に生成したpackage-lock.json
、yarn.lock
、pnpm-lock.yaml
、bun.lockb
ファイルをリポジトリにコミットしてください。 -
GitHubで、リポジトリのSettingsタブに行き、設定のPagesセクションを見つけてください。
-
サイトのSourceとしてGitHub Actionsを選択します。
-
新しいワークフローファイルをコミットし、GitHubにプッシュします。
これでサイトが公開されたはずです!Astroプロジェクトのリポジトリに変更をプッシュすると、GitHub Actionが自動的にデプロイしてくれます。
オプションとして、以下の ./public/CNAME
ファイルをプロジェクトに追加することで、カスタムドメインを設定することができます。
sub.mydomain.com
これで user.github.io
ではなく、あなたのカスタムドメインにサイトがデプロイされます。ドメインプロバイダのDNS設定もお忘れなく。