【Hugo】NetlifyからCloudflare Pagesへ移行しました

これまでHugo + NetlifyでWebサイトを運営していましたが、最近自分のサイトのアクセスが遅いと感じるようになりました。

調べてみると、どうやらNetlifyCDNのキャッシュサーバーが日本には無い為、日本国内からでは遅くなるらしいです。

早くする方法などを調べましたが、CDN自体を変えるのが手っ取り早いと思い、NetlifyからCloudflare Pagesに移行することにしました。

なお、今回は既にHugoをインストール済み、Gitリポジトリを作成済みを前提として記事を書いておりますので、ご了承ください。

環境

初めに、Cloudflareのアカウントを作成し、サイドバーのWorkers & Pagesを選択しします。

Cloudflareデプロイ方法 Connetct to Gitを選択し、用意しておいたリポジトリを選択します。

Cloudflareデプロイ方法そのまま進めていくと、プロジェクト名とブランチ名の設定があります。

プロジェクト名によってcloudflareドメイン(例：example.pages.dev)が決まるので、注意しましょう！
おそらく1回設定すると、後から変更はできないと思います。

ブランチ名はgitで使ってるブランチ名を設定します。

Cloudflareデプロイ方法ビルで設定は上記のように設定しました。

Framework presetでHugoを選択し、ビルドコマンドはデフォルトのままのpublicです。

そして大事なのが、環境変数として、HUGO_VERSIONを設定してあげることです。
Cloudflareの標準Hugoのバージョンは古いらしく、自分が使ってるHugoのバージョンに合わせてあげる必要があります。
一度設定せずにビルドしてしまい、デプロイ出来ませんでした、、。

自分が使ってるHugoのバージョンはターミナルでhuog versionとしてあげると、分かります。

これで次へ進めると、【プロジェクト名】.pages.devにサイトが表示されるかと思います。
私は数分待つと、表示されました！

次に、独自ドメインを設定していきたいと思います。

まず、Workers & Pagesから、先ほど作成したサイトを選択します。

独自ドメイン設定方法 Custom domainsをクリックし、設定したい独自ドメインを入力します。
私の場合はmozuun.comと入力しました。

独自ドメイン設定方法 Begin DNS transferを選択して次に進みます。

料金プランを選択しますが、今回はFreeプランを選択しました。
いくつか制限がありますが、個人サイトを運営するには十分だと思います。

独自ドメイン設定方法すると、DNS管理画面が表示され、上記のようにいくつか設定されてましたが、変更せず、そのままContinue進みます。

独自ドメイン設定方法現在設定してるネームサーバーを削除して、Cloudflareのネームサーバーを設定するようにと言われます。

独自ドメイン設定方法私の場合、お名前.comでNetlifyのネームサーバーを設定していたので削除し、Cloudflareのネームサーバー変更しました！

独自ドメイン設定方法そして、Netlify側のDNSゾーンも削除しておきました。

カスタムドメインが反映されるまで、最大48時間ほどかかるみたいですが、私の場合は約1時間ほどで反映されました！
SSL化も自動でやってくれるみたいで、ありがたいです！

ちなみに現時点では、【プロジェクト名】.pages.devで公開したサイトと、カスタムドメインで、同じサイトが表示されてしまいます。
これを解決する為には、リダイレクト設定をする必要があるみたいです。
次回、www付きドメインからのリダイレクトと設定と一緒に行いたいと思います！

また、お問い合わせはNetlifyのForms機能を利用していた為、現在は無効になっています。
これも、早めに対処しておきたいところですね、、。

なんにせよ、無事に移行できたみたいで良かったです！
ページ速度はかなり速くなりました✌️