静的サイト用の GitLab Pages デプロイを作成します。

静的サイトやフレームワークを含むGitLabプロジェクトがすでにある場合、そこからGitLab Pagesウェブサイトを生成することができます。

UIで基本情報を提供すると、.gitlab-ci.yml ファイルが作成され、マージリクエストが開かれます。マージリクエストをコミットすると、パイプラインがPagesウェブサイトをデプロイします。

前提条件

  • アプリはpublic フォルダー](../public_folder.md) に[出力ファイルを置く必要があります。ビルドパイプラインでこのフォルダを作成する場合は、Git にコミットする必要はありません。

    public このステップはインポートです。ファイルがルートレベルのpublic フォルダーにあることを確認しましょう。

  • プロジェクトが必要です:
    • 静的サイトまたはクライアントレンダリングされたシングルページアプリケーションを生成(SPA) 、EleventyAstro、またはJekyllのような。
    • Next.jsNuxt.jsSvelteKitなど、静的出力用に設定されたフレームワークを含みます。
  • GitLab Pagesがプロジェクトで有効になっている必要があります。(有効にするには、[Settings] > [General] で、[Visibility] - [project features] - [permissions] を展開し、[Pages]トグルをオンにします)。

Pages デプロイを作成します。

セットアップを完了し、GitLab Pages デプロイを生成します:

  1. 左のサイドバーで「検索」または「移動」を選択してあなたのプロジェクトを検索します。
  2. 左サイドバーで、[デプロイ] > [Pages]を選択します。

    Pagesを使い始める]フォームが表示されます。このフォームが利用できない場合は、トラブルシューティングを参照してください。

  3. ステップ 1 では、画像名を入力し、ファイルがpublic フォルダにあることを確認します。
  4. Nextを選択します。
  5. ステップ 2 では、インストール手順を入力します。フレームワークのビルドプロセスが提供されたビルドコマンドのいずれかを必要としない場合は、次のいずれかを実行できます:
    • Nextを選択してステップをスキップします。
    • そのステップの定型文を.gitlab-ci.yml ファイルに組み込む場合は、: (bash の “do nothing” コマンド) を入力してください。
  6. Nextを選択します。
  7. ステップ3では、アプリケーションの構築方法を示すスクリプトを入力します。
  8. Nextを選択します。
  9. オプション。必要に応じて、生成された.gitlab-ci.yml ファイルを編集します。
  10. ステップ 4 では、コミットメッセージを追加し、コミットを選択します。このコミットが、最初の GitLab Pages デプロイをトリガーします。

実行中のパイプラインを見るには、Build > Pipelines に進みます。

デプロイ中に作成されたアーティファクトを表示するには、ジョブを表示し、右側で[アーティファクトをダウンロード]を選択します。

トラブルシューティング

Get Started with Pages フォームが利用できない場合

以下の場合、Get Started with Pages フォームをご利用いただけません:

  • GitLab Pages サイトをデプロイしたことがある場合。
  • 少なくとも一度、.gitlab-ci.yml フォームを通してコミットしました。

このイシューを修正するには

  • ページパイプラインの完了を待っています」というメッセージが表示された場合は、「やり直し」を選択してフォームを再スタートしてください。
  • プロジェクトが以前に GitLab Pages のデプロイに成功している場合は、.gitlab-ci.yml ファイルを手動で更新してください。