はじめに
この記事は何も考えずにCloudFlarePagesとMicroCMSを使ってブログを作る手順というか方法を覚書ぐらいに書いているものです。
筆者は何も考えたくない人なので間違っている可能性もあります。情報の精査は各自でお願いします。
Nuxtでコードを書く
公式のチュートリアルに「microCMS + NuxtでJamstackブログを作ってみよう」を参考にコードを書いていきます。
書いたコードはGitHubに置いておきます。プライベートリポジトリ可です。
CloudFlarePagesでビルドする
CloudFlareのダッシュボードにログインして、Pagesに移動して、プロジェクトを作成からGitに接続をクリックします。
初めての場合GitHubの認証画面が出ると思うので、認証を済ませます。
リポジトリを選択するから先程のコードを上げたリポジトリを選びます。
ビルドコマンド、デプロイ先は先程のチュートリアルのページを参考にしていいと思います。
自分の場合ビルドコマンドは「nuxt generate」にしています。
ビルドが走ると思いますので、エラーが出ることなく走りきれば問題ありません。
プロジェクト名.pages.devになるので、長い名前でリポジトリを作成したのなら変えておくと良いです。
ドメインを追加する
カスタムドメインを使用する場合、DNS を Cloudflare に移行する必要があります。
ブログのドメインがプロジェクト名.pages.devで大丈夫じゃない方はドメインを追加する必要が出てくると思います。
特に、AdSenseで広告を表示したい方、何かしらのサービスを展開していてblog.なんとか.jpとかでサイトを公開したい方とか。
ドメインの追加は「カスタムドメイン」のページから「カスタムドメインを設定」をクリックします。
入力フォームが出てくるので、ドメインを入力します。
あとは適当にポチポチします。面倒なDNSの設定も自動で追加されるはずです。
microCMSを更新したらビルドが走るようにする。
設定からビルド&デプロイを選択します。デプロイ フックというのがあるので、追加するボタンをクリックします。
デプロイフック名は適当でいいです。ブランチも特に弄っていないのであればmasterのままだと思います。
(ブランチがmainとかになってるかも。)
追加をクリックするとURLが発行されるのでこれをコピーしておきます。
次にmicroCMSに行って、APIの設定からwebhookを選択します。
追加をクリックして、Netlifyを選びます。
Webhookの名前は適当で、下のフォームに先程コピーしたURLをペーストします。
下の通知タイミング設定はお好みで設定してください。
自分の場合は以下のようにしています。
コンテンツの公開時・更新時
- コンテンツ編集画面による操作
- APIによる操作
- レビューによる公開
- 予約設定による操作
- コンテンツの並び替え
- コンテンツIDの変更
- 公開日時の変更
コンテンツの非公開時
- コンテンツ編集画面による操作
- APIによる操作
公開中コンテンツの削除時
- コンテンツ編集画面による操作
- APIによる操作
上記にない設定はチェックを入れていません。
これで実際に投稿してみて、ビルドが走れば設定に問題がないと思います。
あとは、実際に使ってみて、問題がなければおｋだと思います。