見出し画像

v0×Cursor×Cloudfurea PagesでWebサイトをホスティング

Shinoda

はじめに

v0→Cursor→Github→Cloudfurea Pagesで自社のHPを作成しなおしました
モチベーションとしては以前 Google Sitesでとりあえず作った会社HPの使い勝手（メンテナンス性）が悪いからです
Google Sites はコードが触れないくノーコードのみでサイトを構築する制限がああり、自由度が低かったのがいまいちな理由です

またサイト公開する際のホスト先は信頼度が高く可用性があるクラウドプロバイダーにしたかったのと、できあいな感じのプラットフォームにホスティングをしたくなかったのでニーズが合致した Cloudflare Pages を選択しました
今回の用途なら無料範囲で使えますしね

モチベーションをまとめると

  • コーディングで自由にサイトを構築したい

  • できたら無料でホスティングしたい

  • 信頼性が高く可用性のあるプライバイダーでホスティングしたい

完成したWebサイトはこんな感じです
よくある会社HPです


Cloudflare Pagesとは


静的サイトのホスティングに特化したシンプルで高速なサービスです。
サーバーレスで、グローバルなCDNにより世界中のユーザーに迅速にコンテンツを届けられます。
Gitと連携した自動デプロイ、無料SSL、キャッシュ機能などが備わっており、フロントエンド開発に最適な環境を提供します。

  • 静的サイトホスティング: サーバーなしでサイト公開

  • CDN統合: 世界中で高速アクセス可能

  • 高パフォーマンス: Cloudflareの高速ネットワーク利用

  • キャッシュ: 読み込み速度が向上

  • JAMスタック対応

  • 無料プラン: 小規模プロジェクト向け無料

  • Git連携: プッシュで自動デプロイ

  • CI/CD: 自動ビルド・デプロイ

  • カスタムドメイン: 無料SSL付き独自ドメイン（独自ドメイン代は別途発生）

  • WAFでの保護：一般的な脆弱性や攻撃からサイトを守ります

無料範囲の制限はありますが、今回のニーズだけなら十分満たせると思ったのが Cloudflare Pages 選択の理由です
さらに付け加えると、Cloudflareに自社ドメインを置くとセキュリティ性が向上し、Cloudflareの一定のサービスが無料で受けられます

PageSpeed Insights でスコアが100点満点

Pagesでホスティング後にGoogle PageSpeed Insightsでサイトを測定すると全て100点でした

v0でのデプロイとCloudflare Pagesのスコア比較
同じ内容のサイトをv0で公開したスコアは以下のとおりです
Pagesにホスティングするとスコアが向上しますね


それでは「v0→Cursor→Github→Cloudfurea Pages」のデプロイ手順を説明していきます

v0でデザイン全体を作成

v0を選んだ理由ですが、単純にビジュアルはv0が強いからです
BoltでもReplitでも同じようなことはできるはずです

また、好みの問題ですが shadcn/ui を外してTailwind CSSで作るように指示し
画像はImage FXで作ったものを使っています

それでは具体的な手順です

自然言語で好みのデザインを指示し、数回微調整しました
細かいことはCursorの方が修正しやすいので、v0ではデザインやフレームの土台を作ってもらいます


右上のコードのアイコンをクリックしnpxコマンドをコピーします


Cursorでローカルにプロジェクトをコピーし修正する


  • v0でコピーしたnpxコマンドをCursorで実行させます

  • Cursorで Cloudflare Pages にこのPJをデプロイしますが、必要なコンポーネントやライブラリなどないかチェックします

  • Githubにリポジトリを作成して

  • CursorからPushします

# すべてのファイルをステージング
git add .

# 初期コミット
git commit -m "Initial commit: Next.js project for Cloudflare Pages"

# mainブランチに名称変更
git branch -M main

# リモートリポジトリの追加（[]内は実際のURLに置き換え
git remote add origin [GitHubリポジトリのURL]

# GitHubにプッシュ
git push -u origin main


  • Pushされたことを確認

Cloudflare Pagesでデプロイ

CloudflareにログインしPagesからGitに接続を押下します

該当のGithubのRepositoryを選択してセットアップの開始を押下

以下のパラメーターを設定しビルドします

エラーが出た場合はCursorにエラーログを貼り付けて修正を繰り返す

ビルド成功後に右上にあるURLを開くとWebサイトが表示されます


Appendix

カスタムドメインで自社のドメインに置き換えたい場合は「カスタムドメイン」から設定ができます
例：website-pages.dev → mywebsite.com 
※カスタムドメインにしたい場合は事前にドメイン取得が必須です

それでは、よい v0、Cursor、Cloudflareライフを！

いいなと思ったら応援しよう！