個人ドメインで運用しているHugo静的サイトとメールをCloudflareに移行した手順

これまで、複数のブログを Conoha Wing 上で運用していました。速度も申し分ありませんし文句はなかったのですが、先日Linux上の脆弱性に対する対応としてsshが一時的に利用不能になってしまって困ってしまいました。

私のブログは Hugo 上で Markdown で執筆し、結果を Github にプッシュすると Github Actions が自動的にビルドを行い Conoha のサーバーに rsync で同期してくれる仕組みになっていたのですが、この rsync 部分が動作しなくなってしまったのです。

障害は10日ほどで直るとのことだったのですが、最近は友人たちが AI で作成したアプリのデプロイに Cloudflare を使っていてとても便利だと評判を聞いていましたので、それならと移行してみることにしました。

結論からいうと、これがとても簡単で、コストも下がる(2026年7月時点では)ことにつながりました。Hugo に限りませんが、Astro サイトなどを運用していて Cloudflare に移行したいという人も多いと思いますので、一連の流れを書いておこうと思います。

Cloudflare Pages の無料枠

まず Cloudflare の無料枠を使うという前提で、その制限を知っておく必要があります。2026年7月の時点では:

  • 月間ビルド回数500回(3000分)
  • 1ファイルサイズが25MB以下
  • カスタムドメイン無制限で、無料の SSL/ TLS 証明書付き
  • 1サイトあたりのファイル数制限が 20000 個

となっています。ビルド回数は、一日に 16 回以下ならば問題有りませんし、私が運用している一番大きなブログが 11000 ファイルほどなのでまだ余裕があります。

ファイル数制限が近くなったら、画像だけを Cloudflare R2 で運用すればよいので、Hugo ならば render hooks を一つ作ってすべての画像 URL が R2 のパスに置き換わるようにすればいいだけですので、それほど難しくありません。

あとは Cloudflare の速度と、いつまで無料かという問題がありますので、移行を検討している人はそのあたりを判断してください。

Hugo サイトを Cloudflare 上でビルドする

手順としては、まず自分のサイトが Cloudflare 上でビルドできるかをチェックし、満足がいくようならドメインを Cloudflare 上で運用するように設定を行います。また、自分のドメインでメールを送受信しているなら、そこも対応します。

{ . }

Cloudflare のトップ画面はこのような感じです。左にいろいろ機能がありますが、今回の目的で関係するのは Domains と Compute の下にある「Worker & Pages」が主となります。

まず、そもそも自分のサイトが Cloudflare 上でビルドされて問題なく運用できそうかをチェックしてみましょう。

{ . }

そのためには、Hugo の静的サイトを Cloudflare 上でビルドするための Worker アプリを作りますが、この “Worker & Pages” の項目がちょっと探しにくいかもしれません。

トップページの左タブで Compute という項目を探してクリックすると、その下にありますので、こちらを選択します。

{ . }

次に、Create application をクリックして、新しい Worker アプリを作成します。

{ . }

今回は Pages サイトを作りたいので、上の目立っているボタンではなく、下に表示されている “Get started” をクリックします。

{ . }

Gitリポジトリかファイルのアップロードの選択がありますが、Github に変更がプッシュされるたびにサイトを変更したいので、前者を選びます。ここで Github にアカウントの接続を求められますので許可を出します。

{ . }

Github のどのリポジトリを利用するのかを選択します。

{ . }

普通は master ブランチで運用しているでしょうからここは変更しなくても OK のはずです。

{ . }

変更が必要なのはビルド設定の場所です。すでにいろいろな静的サイトジェネレーターが選択できるようになっていますが、hugo を選びます。また、Hugo はビルドした結果のウェブサイトが public ディレクトリに作られますので、“Build output directory” を public に指定します。

{ . }

ここが重要なのですが、Cloudflare のビルドではデフォルトでけっこう古い hugo が選ばれてしまい、最新バージョンで開発をしていると失敗したりします。

これを避けるために、HUGO_VERSION という環境変数を設定して、0.164.0 といったようにバージョン番号を値で指定します。extended バージョンの hugo を使っているなら extended_0.164.0 のように入力しておきます。

あとはビルド&デプロイするだけです。

{ . }

デプロイを押すと、Cloudflare の内部ページに Pages が作成されますので、うまくウェブサイトが作成されているかを確認できます。

ここまでは、ドメインを Cloudflare にもってこなくても確認可能です。速度などを確認して、問題なさそうでしたら、できあがったサイトを取得したドメインで運用してみましょう。

カスタムドメインを Cloudflare に移管する

できあがった Hugo サイトが問題なさそうなら、次に自分の所有しているドメイン下でそれが表示されるようにしましょう。

{ . }

先ほどの Cloudflare Pages で作ったアプリの “Custom domains” タブを選択すると、ドメインを追加できます。同様の操作は、 Domains のトップページからも実行できます。

{ . }

Domains のトップページから行く場合には、右上の “Add a domain” から実行します。

{ . }

ここで Connect a domain を実行します。また、com のような TLD なドメインなら、そのまま Cloudflare に移管することもできます。ここでは jp ドメインなどをもってくる想定で前者を選んでみましょう。

{ . }

こちらの画面になりますので、自分の取得しているドメインを入力します。選択肢があるのは、どのようにクローリングされるのかを指定するオプションで、Recommended のままで大丈夫です。

{ . }

プランを選びます。ひとまずは Free で十分でしょう。

{ . }

DNS レコードが推定されますので、一応確認します。すでに別のレンタルサーバーなどで運用されているなら、MX や TXT レコードがそのままコピーされていたりしますが、現時点ではそのまま承認するので問題ないでしょう。

{ . }

ネームサーバーの設定がでてきますので、ドメインを管理しているレジストラで、cloudflare.com のサーバーに向くように設定を行います。スクショがとれていませんが、ここで「ネームサーバーの設定ができた」と確認するボタンがあるので、それを押すと Cloudflare が確認しにいってくれます

小一時間もあれば DNS の設定は完了し、ドメインが Cloudflare 下で運用されるようになるはずです。

ドメインを移管したい場合

com などの TLD なドメインを Cloudflare に移管して利用したい場合も、手続きは簡単です。

ムームードメインやお名前.comなどを利用している場合に、WHOIS に自分自身の情報ではなく、レジストラの会社情報を掲載している人は多いと思います。ここで注意が必要なのが、移管前に一度それを自分の情報とメールアドレスに変更しないと、ムームードメインのシステム上も、Cloudflare のシステム上からも「移管可能」の表示がでませんので、まずはその設定をおこないます。

{ . }

移管可能になったら、現在のレジストラで発行される認証コードを入力して移管手続きを開始します。たいていは、メールで承認をうながす通知がくるはずですので対応します。

すると、こちらも小一時間ほどで移管が完了するはずです。

メールを Cloudflare から Gmail にルーティングする

個人で所有しているドメインに届くメールを Gmail に転送して運用している人は多いと思います。これも Cloudflare の Email routing の機能で実現できます。ただ、一つだけ注意点があります。受信はできるのですが、Cloudflare は SMTP サーバーを提供していませんので、返信・送信はそのままではできません。

そこで、送信は resend という別のサービスを利用して行います。あまり詳しくは紹介しませんが、非常に簡単にセットアップできますので、この記事が必要な程度の技術力のある人には問題ないはずです。

{ . }

まず受信側から。Cloudflare で、運用しているドメインを選択すると左タブに Email という項目がでてきますので、その Email Routing の項目を選びます。Onboard Domain というボタンをクリックして始めます。

{ . }

zone と書いてあるところに、対象のドメインを入力します。

{ . }

メールを Cloudflare で運用するための DNS 設定が出てきますので、普通はそのまま Activate で追加すれば大丈夫です。

注意が必要なのは、以前のレンタルサーバーでメールを運用していた場合です。もしそのときの MXレコード・TXT レコードが Cloudflare 側に引き継がれているなら、まずはそれを削除してからこちらの設定をおこないます。

{ . }

次に、ルーティングルールを設定します。たとえば mehori@lifehackingjp ならば、mehorilifehacking.jp のパターンのメールが来た場合の対応を設定します。

この場合は send to an email ということで転送を行っており、転送先は gmail になっています。これだけで転送部分は完了です。

resend で Gmail からの返信・送信をまかなう

resend.com は別のサービスになるので、こちらも利用登録を済ませておきます。無料枠だと1つのドメインで1日あたり300通のメールの送信を無料でまかなえますので、個人利用なら問題ないでしょう。

{ . }

resend のログインしたら、メールを送信したいドメインをつなぎます。すでに Cloudflare で運用されているなら、resend から Cloudflare につないでドメインを選択するだけで終わります。簡単すぎる…。

{ . }

次に、メール送信用の API キーを作ります。名前は適当に決め、Permission は “Sending access” に制限し、ドメインを選択して作成します。

{ . }

APIキーが一度だけ表示されますので、間違いなくコピーしてください。まあ、忘れても発行し直せばいいだけの話ですが…。

{ . }

あとは Gmail にこの SMTP サーバーの情報を入力すれば完了です。Gmail の「設定」→「すべての設定」→「アカウントとインポート」に、エイリアスのメールアドレスを追加する場所がありますので、そこを利用します。

{ . }

おそらく resend 側でも表示がありますので正確にはそちらを確認していただきたいのですが、このような感じの設定になります。

ポイントは、ユーザー名が resend であること。そしてパスワードとして、先程表示された API キーを入力することです。

これで、メールの送信には resend の SMTP サーバーが利用されます。

別のドメインからいま作ったメールに送信をしてみて、そこから返信してみるなどのテストを行ってみてください。ちゃんと、設定したドメインのメールで送受信ができていれば成功です。

いつまで利用できるのか?

今回の設定によって Conoha で利用していたすべてのサイトとメールを Cloudflare に移行することができました。予算的にもだいぶ節約できたのでまずは満足です。

しかしこれは、Cloudflare Pagesとresendの無料枠に依存しているという状態になったということでもあります。無料のサービスがいつまでも無料であるとは考えにくいので、時間とともにサービスが有料化いかないか、有料サービスとの差別化で機能が低下しないかといったことにも目を光らせる必要はあります。もちろん、利用可能な金額なら Cloudflare Pro に移行するのもいいでしょう。

もともと私がブログを始めたときには国内のレンタルサーバーが使いにくかったので海外のサーバーと契約していたのですが、その後国内のほうが速度も期待できて使いやすくなったのでさくらインターネット、Xserver、Conohaといろいろ利用してきた流れがありました。そしてまた、海外のサービスを中心に運用をしているのは、なにかが一周回ってきた感覚があります。

しばらくは、この状態で様子をみてみたいと思います。

Author Image

2011年アルファブロガー・アワード受賞。ScanSnapアンバサダー。ブログLifehacking.jp管理人。著書に「ライフハック大全」「知的生活の設計」「リストの魔法」(KADOKAWA)など多数。理学博士。