GitLab Pages 公開フォルダ

GitLab 16.1では、.gitlab-ci.yml で公開フォルダを設定する機能が導入されたため、フレームワークの設定を変更する必要がなくなりました。詳しくは、Pagesでデプロイするカスタムフォルダを設定する方法をご覧ください。

以下の手順に従って、以下のフレームワークのpublic フォルダを設定してください。

イレブンティ

イレブンティでは、以下のいずれかを行ってください：

  • イレブンティーのビルド・コマンドに--output=public フラグを追加します：

    npx @11ty/eleventy --input=path/to/sourcefiles --output=public

  • .eleventy.js ファイルに以下を追加します：

     // .eleventy.js
 module.exports = function(eleventyConfig) {
   return {
     dir: {
       output: "public"
     }
   }
 };

アストロ

デフォルトでは、Astroは静的アセットの保存にpublic フォルダを使用します。GitLab Pagesの場合は、まずそのフォルダの名前を衝突のない別のフォルダに変更してください：

  1. プロジェクトディレクトリで実行します：

    mv public static

  2. astro.config.mjs に以下を追加します。このコードは、フォルダ名の再マッピングをAstroに通知します：

    // astro.config.mjs
import { defineConfig } from 'astro/config';
   
export default defineConfig({
  // GitLab Pages requires exposed files to be located in a folder called "public".
  // So we're instructing Astro to put the static build output in a folder of that name.
  outDir: 'public',
   
  // The folder name Astro uses for static files (`public`) is already reserved
  // for the build output. So in deviation from the defaults we're using a folder
  // called `static` instead.
  publicDir: 'static',
});

SvelteKit

note
GitLab Pagesは静的サイトのみをサポートしています。SvelteKitでは adapter-static.

adapter-staticを使う場合は、svelte.config.js に以下を追加してください：

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'public'
    })
  }
};

Next.js

note
GitLab Pagesは静的サイトのみをサポートしています。Next.jsでは、Nextの静的HTMLエクスポート機能を使うことができます。

Next.js 13のリリースにより、Next.jsの動作が大きく変わりました。すべての静的アセットを適切にエクスポートできるように、以下のnext.config.js ：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true,
  },
  assetPrefix: "https://example.gitlab.io/namespace-here/my-gitlab-project/"
}

module.exports = nextConfig

.gitlab-ci.yml の例は、次のような最小限のものです：

pages:
  before_script:
    - npm install
  script:
    - npm run build
    - mv out/* public
  artifacts:
    paths:
      - public

Nuxt.js

note
GitLab Pagesは静的サイトのみをサポートしています。

  1. nuxt.config.js に以下を追加してください：

    export default {
  target: 'static',
  generate: {
    dir: 'public'
  }
}

  2. Nuxt.js アプリケーションを静的サイト生成用に設定します。

サイト

vite.config.js を以下のように更新します：

// vite.config.js
export default {
  build: {
    outDir: 'public'
  }
}

Webpack

webpack.config.js を以下のように更新します：

// webpack.config.js
module.exports = {
  output: {
    path: __dirname + '/public'
  }
};

public フォルダーをコミットしますか？

必ずしもそうではありません。しかし、GitLab Pagesのデプロイパイプラインが実行されると、その名前のアーティファクトを探します。npm run build を実行するなど、デプロイ前にpublic フォルダーを作成するジョブをセットアップしておけば、フォルダーをコミットする必要はありません。

サイトを内部でビルドしたい場合は、public フォルダをコミットし、代わりにジョブ中のビルドステップを省略することができます。