今回はサンプルサイトを XM Cloud に作成をしていきます。また、サイトとしてどのスタイルシートを利用するのか、に関しても最後に取り上げます。
サイトの作成
このシリーズの初回にサイトをテスト用で作成をしましたが、今回は改めてサイトの作成の手順を紹介していきます。手順としては以下の流れで進めていきます。
- サイトコレクションの作成
- サイトの作成
- スタイルシートに関しての設定
それでは実際にローカルの XM Cloud の環境で作業をしていきます。
サイトコレクションの作成
XM Cloud を起動した際には基本的には何もサイトもない状況となっています。そこでコンテンツエディターを起動して、サイトの作成を進めていきます。コンテンツエディターで /sitecore/content のアイテムを右クリックしてメニューを表示、Insert - Headless Site Collection でサイトコレクションの作成を実行します。
しばらくすると、サイトコレクションを作成するためのダイアログが表示されます。ここでは、サイトコレクション名を Tailwindcss とし、すべてチェックしている形で OK をクリックしてください。
しばらくするとサイトコレクションのアイテムが作成されます。
サイトの作成
続いてサイトコレクションに対してサイトを追加します。作成されたサイトコレクションのアイテムを右クリックするとメニューが表示されます。そこで、Insert - Headless Site を追加します。
サイトの設定として、まずは General タブでは Site name に Tailwindcss を設定して、他の項目はデフォルトのままとします。
Modules のタブでは Basic site と Standard Values の2つの項目が未選択です。
Site settings の項目はデフォルトのままで進めます。このため、OK ボタンをクリックすると、スクリプトが実行されて新しいサイトがサイトコレクションに追加されます。
スタイルシートを選択する
Next.js のデフォルトのテンプレートでは、Basic Site というサンプルのデザインも含まれています。このサンプルサイトはスタイルシートとしては Bootstrap 5 を利用しています。
今回はこれを Tailwind CSS で動くように変更をします。この設定は、作成をしたサイトの Settings の中に含まれています。Grid - Gridmapping の項目を Tailwind に変更します。
項目を Tailwind に切り替えることで、グリッドのスタイルシートなどが変更となりました。
まとめ
今回はベースになるサンプルのサイトを作成しました。次回は毎回サイトを作成しなくてもよいように、シリアライズをしてリポジトリで管理できるようにしていきます。