Cloudflare Pageにhtmlをデプロイしてみる

最近話題のHonoについてですが、デプロイ先はCloudflare PagesやWorkersがメインになっています。
まずはそのCloudflare Pagesを知るために、単体のhtmlをデプロイしてみることにしました。

この記事では、Cloudflareに単体のhtmlをデプロイする手順を書きます。
デプロイの簡単さが感じられるように、スクショ多めの記事になります。

デプロイまでの手順

早速htmlをデプロイしていきます!

Workers & Pagesの画面でアプリケーションを作成していきます。

サーバーレスファンクションのWorkersとWebサイト・フルスタックアプリケーションを作れるPagesが選べます。
Pagesで作る場合、CLIで作るか、Gitリポジトリをつなげるか、直接アップロードするかが選べます。CDがデフォルトであるのは私的にポイント高いです😊
今回はPagesを選び、ファイルを直接アップロードします。

ここで、プロジェクトの名前を入れます。

ここで、htmlファイルを用意する必要があるので、AIで作ってもらいます。
手直しはあとにして、そのままデプロイします。

folderかzipでアップロードできます。
今回はフォルダを選択して、フォルダごとアップロードします。
アップロードが完了したらdeplyボタンを押してデプロイ完了です!

簡単にデプロイできました😊

デプロイしたサイト

カスタムドメインを設定する

Cloudflareでドメインを持っていれば簡単にドメインを紐づけることができます。
「Custom domains」の画面から設定したいカスタムドメインを入力することで簡単に設定できます😊

感想

Cloudflareの開発プラットフォームを触ったのはほぼ初めてだったのですが、UIもわかりやすく気軽に使えてとってもいいなと感じました。開発プラットフォームのR2, WorkersKV, D1などにも興味が出てきました。Honoも触っていきたいと思います。