Kurocoのドキュメントにはチュートリアルがあり、Kurocoの使い方が学ぶことができます。
【Kurocoビギナーズガイド】
ですがKurocoのチュートリアルに使用しているサービスが「Nuxt2」であったり、「Kuroco × Nuxt3」の情報が少なかった為、開発に詰まってしまったので、
自身の勉強の為、またどなたかのお力になれればいいな。との気持ちでブログを書かせて頂きます！

ヘッドレスCMSとは？

WebサイトやWebサービスの表示機能を持たず、主にコンテンツの管理に特化した進化したCMS。
CMSは「Webサイトの画像」「テキスト」「デザイン・レイアウト情報」などを一元的に管理・保存できるシステムになります。
通常のCMS：コンテンツを表示するために「フロントエンド」と、コンテンツを入稿するための「バックエンド」が含まれています。
ヘッドレスCMS：フロントエンド部分、つまり「ヘッド」が存在せず、コンテンツの管理に焦点を当てたシステムです。
要約すると、ヘッドレスCMSはコンテンツ管理を目的としており、Webサイトやアプリケーションの表示に関する機能を持たないCMSです。

【Kuroco】の始め方

Kurocoのチュートリアル「Kurocoビギナーズガイド」のチュートリアルにそって作成を進めていきます！

Kurocoのフリートライアル申込

https://kuroco.app/ja/free_trial/

リージョンは「アジア(東京)」に設定し、その他登録に必要な内容を入れ込みしていきます。

リージョン：アジア(東京)
サイトキー：test-kuroco-nuxt3
メールアドレス：自身のメールアドレス

*こちらの登録したメールアドレスに登録完了通知のメールが届きます。
「Kurocoの管理画面設定が完了いたしました！」のメールが届きますのでメールに記載されている管理画面にURLをクリックしログインします。

事前に必要なもの

・node.js
・GitHubのアカウント

Nuxt.jsをインストール

Node.jsの18系でインストールしました。

$　node -v
v18.8.0

$ npx nuxi@3.10.0 init test-kuroco-nuxt3

Which package manager would you like to use?
→npm 

Initialize git repository?
→Yes

使用しているエディターにて作成したプロジェクト「test-kuroco-nuxt3」を開き

npm run dev

ローカルで起動をしブラウザで http://localhost:3000/ にアクセスし、Nuxt3のWelcomeページが表示されることを確認します。

 

GitHubリポジトリの準備

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/GitHubユーザー名/リポジトリ名.git
git push -u origin main

※Nuxt.jsをインストールしたディレクトリのまま実行
Nuxt.jsをインストールしたフォルダをGit管理化して、リモートリポジトリにファイルをプッシュできていることを確認します。

GitHubとKurocoの連携

Kurocoの管理画面の【KurocoFront】＞【GitHub】＞【GitHubリポジトリと接続する】をクリックします。
GitHubへログイン後にGitHubの画面の「Repository access」でリポジトリを選択
※１つのアカウントで複数のKurocoを利用したい場合は、KurocoのGitHub Appsは1つなので、ここの選択で複数のリポジトリを選択

「Repository access」で設定後「Save」を再度、遷移したKurocoへのログイン
ログインすると以下の様に変化しているので

プルダウンから対象のリポジトリを選択して「更新する」をクリック

デプロイ

現在はKurocoの管理画面の「サイトを表示」をクリックしても「404 Not Found (DEPLOYMENT NOT FOUND)」が表示されサイトを表示することができません。
こちらを「GitHubで管理しているコードをKurocoFrontにデプロイ」しサイトの表示できるようにしていきます。

チュートリアル【デプロイ】に沿って「kuroco_front.json」 と「YAMLファイル」をNuxt.jsプロジェクトに追加
※Nuxt3では/staticは/publicに変更になっているので「kuroco_front.json」は/publicに追加してください。

ファイルの追加し、変更をGitHubにプッシュ。
プッシュするとGitHubActionが実行され、ビルド&デプロイされます。
ビルド&デプロイ完了後に、管理画面の【サイトを表示】をクリックすると「404 Not Found (DEPLOYMENT NOT FOUND)」ではなくなり、Welcomeページが確認できます！

以降、コンテンツの追加をしNuxt.jsでコンテンツの表示やデザインの調整して同様に
「プッシュ」 > 「GitHubAction」 > 「ビルド&デプロイ」していきサイトの構築ができます。

「Kuroco × Nuxt3での始め方」は以上になります！
最後まで見て頂きありがとうございました！