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
オプションを設定します。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
を含めるように更新する必要があります。 -
プロジェクトの
.github/workflows/deploy.yml
に新しいファイルを作成し、以下のYAMLを貼り付けます。astroアクションはいくつかのオプション入力を受け取ります。これらの入力は
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
ファイルをプロジェクトに追加することで、カスタムドメインを設定することができます。
これで user.github.io
ではなく、あなたのカスタムドメインにサイトがデプロイされます。ドメインプロバイダのDNS設定もお忘れなく。