GitLab Pagesのpublicフォルダー

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

Eleventy

Eleventyの場合、次のいずれかを実行する必要があります:

• Eleventyのビルドコマンドで--output=publicフラグを追加します。例:

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

• 次の内容を.eleventy.jsファイルに追加します:

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

Astro

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

1. プロジェクトディレクトリで、次を実行します。

   mv public static

2. 名前変更されたフォルダー用にAstroを設定するために、次の内容をastro.config.mjsに追加します:

   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
     // GitLab Pages requires exposed files to be located in a folder called "public".
     // This instructs 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. This uses a folder called `static` instead.
     publicDir: 'static',
   });

SvelteKit

adapter-staticを使用する場合、次の内容をsvelte.config.jsに追加します:

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

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

Next.js

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は最小限にすると次のようになります:

create-pages:
  before_script:
    - npm install
  script:
    - npm run build
    - mv out/* public
  pages: true  # specifies that this is a Pages job and publishes the default public directory

以前のYAMLの例では、ユーザー定義のジョブ名を使用しています。

Nuxt.js

デフォルトでは、Nuxtは静的アセットを保存するためにpublicフォルダーを使用します。GitLab Pagesの場合、まずpublicフォルダーを衝突のない代替名に変更してください:

1. プロジェクトディレクトリで、次を実行します。

   mv public static

2. 次の内容をnuxt.config.jsに追加します:

   export default {
     target: 'static',
     generate: {
       dir: 'public'
     },
     dir: {
       // The folder name Nuxt uses for static files (`public`) is already
       // reserved for the build output. This uses a folder called `static` instead.
       public: 'static'
     }
   }

3. Nuxt.jsアプリケーションをStatic Site Generation用に設定します。

Vite

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のデプロイパイプラインが実行されると、その名前のアーティファクトを検索します。デプロイ前にpublicフォルダーを作成するジョブを設定した場合、たとえばnpm run buildを実行して作成した場合、フォルダーをコミットする必要はありません。

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