はじめに

こんにちは。豆乳のバナナ味が好きです、筆者です

さて今回は、NetlifyからCloudflare Pagesに引越する際にしたことを記事にまとめたいと思います。
自分とまったく同じ構成にしている人は少ないと思いますが、参考になれば幸いです。

引越した理由

以下がすべてです！興味深い結果だったのでぜひざっと見ていただけると嬉しいです

やりたいこと

Gatsbyプロジェクトのホスティング先をNetlifyからCloudflare Pagesに移行する.
Netlify側で設定しているカスタムドメインをCloudflare Pages側でも使用する.

引越の内容

項目	現在	→	今後
ホスティング先	Netlify	→	Cloudflare Pages
プロジェクト	Gatsby	→	Gatsby
ビルド	GitHub Actions	→	Cloudflare Pages
デプロイ	GitHub Actions	→	Cloudflare Pages
お問い合わせ	Netlify Forms	→	Googleフォーム
Contentful Webhooks先	GitHub Actions	→	GitHub Actions(検討中)

NetlifyからCloudflare Pagesに引越

1. お問い合わせページの切り替え

Netlify Formsで作成されたお問い合わせページはCloudflare Pages側で機能しなくなるGoogleフォームに切り替えます。

Googleフォームでお問い合わせ用のフォームを作成する。
Netlify Formsで作成したお問い合わせページをソースコードから削除する。
2に向いていた各導線を1のURLに変更する。

2. Cloudflare PagesにGatsbyプロジェクトデプロイ

以下の記事でデプロイしました。

3. Netlify側のカスタムドメインを解除

Netlify側のドメイン設定の画面から解除が可能なので解除します。

4. Cloudflare Pagesでカスタムドメインを設定する

以下の記事で設定しました。

5. ContentfulのWebhooksを解除

以下記事で設定したContentfulのWebhooksを解除します。

今後またGitHub Actions使いたいのでこの設定を残しておきたいのですが、どうもWebhooksの削除しかないので、絶対に発生しないイベントに変更しました

6. ビルドしてNetlifyへデプロイするGitHub Actionsのワークフローを無効化

以下記事で設定したGitHub Actionsのワークフローを無効化します。

ボタンポチポチすればできます
ワークフローのymlをまるごと削除でも大丈夫です

7. リポジトリに設定していた不要な環境変数を削除

GitHub Actionsでビルド時に使用していたContentfulやGoogleAnalyticsなどの環境変数を削除します。

8. プロジェクトから不要なパッケージを削除

自分は以下不要になりました

$ npm uninstall gatsby-plugin-netlify

...長い間！！！　くそお世話になりました！！！

9. gatsby-config.jsから8のプラグインを外す

gatsby-config.js

module.exports = {
  plugins: [
-    'gatsby-plugin-netlify',
}

10. Netlify 退会