gitlab.mdx

title	description	type	i18nReady
AstroサイトをGitLab Pagesにデプロイする	GitLab Pagesを使ってAstroサイトをウェブにデプロイする方法。	deploy	true

import { Steps } from '@astrojs/starlight/components';

GitLab Pagesを使って、GitLabのプロジェクトやグループ、ユーザーアカウント用のAstroサイトをホストすることができます。

:::tip[例をお探しですか？] 公式GitLab Pages Astroサンプルプロジェクトを確認してください！ :::

デプロイ方法

1. `astro.config.mjs`に正しい`site`を設定します。

2. public/ディレクトリをstaticにリネームします.

3. astro.config.mjsにoutDir:publicを設定します。この設定は、静的ビルドの出力をGitLab Pagesがファイルを公開するために必要なフォルダであるpublicというフォルダに置くようにAstroに指示します。

   public/ディレクトリをAstroプロジェクトで静的ファイルのソースとして使用していた場合は、名前を変更し、astro.config.mjsのpublicDirの値に新しいフォルダ名を指定します。

   例えば、public/ディレクトリをstatic/にリネームした場合のastro.config.mjsの正しい設定は以下の通りです。

   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
     site: 'https://<user>.gitlab.io',
     base: '/<project-name>',
     outDir: 'public',
     publicDir: 'static',
   });

4. プロジェクトのルートに.gitlab-ci.ymlというファイルを以下の内容で作成します。これにより、コンテンツを変更するたびにサイトをビルドしてデプロイすることができます。

   pages:
     # アプリのビルドに使用するDockerイメージ
     image: node:lts
   
     before_script:
       - npm ci
   
     script:
       # アプリのビルドに必要な手順をここで指定します
       - npm run build
   
     artifacts:
       paths:
         # 公開するビルド済みのファイルを含むフォルダ。
         # "public"を指定する必要があります。
         - public
   
     only:
       # 以下のブランチへのプッシュがある時のみに、新しいビルドとデプロイをトリガーします。
       - main