STEP3 では、Cursor で作ったサイトのファイルを GitHub のリポジトリに反映しました。しかし、この時点では GitHub にサイトのファイルが保存されただけです。

GitHub のリポジトリに index.html が表示されていても、そのページを一般の人が Web サイトとして見ることはできません。

そこで今回は、**Vercel（ヴァーセル）**というサービスを使い、GitHub に保存したサイトをインターネット上に公開します。

前回の記事はこちらです。

【STEP3】Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも）

Vercel とは？

Vercel は、作成した Web サイトをインターネット上に公開できるサービスです。今回の流れを簡単に表すと、下記のようになります。

Cursor でサイトを作る
↓
GitHub にサイトのファイルを保存する
↓
Vercel が GitHub のファイルを読み込む
↓
インターネット上にサイトが公開される

Vercel に GitHub のリポジトリを一度連携すると、今後は GitHub の main ブランチを更新するたびに、Vercel が変更を検知してサイトを自動で更新してくれます。毎回 Vercel にファイルをアップロードし直したり何か設定をする必要はありません。

また、公開時には下記のような URL が無料で発行されます。

https://あなたのプロジェクト名.vercel.app

独自ドメインをまだ持っていなくても、この URL を使ってサイトを公開できます。なお、この記事では STEP1 で作成した、index.html、CSS、JavaScript で構成されたシンプルなサイトを公開します。

Vercel は無料で使える？

Vercel には、無料で利用できる Hobby（ホビー）プランがあります。今回のように、個人が学習目的で作ったサイトや個人プロジェクトを試しに公開するのであれば、まずは Hobby プランで問題ありません。

クレジットカードの登録も不要です。

ただし、Vercel の Hobby プランは個人による非商用目的の利用が対象です。

公式では、商品・サービスの販売を宣伝するサイトや、サイトの作成・更新・公開によって報酬を受け取る場合、アフィリエイトリンクを主な目的とするサイトなどが商用利用の例として挙げられています。

一方で、アフィリエイトリンクを掲載しただけで、直ちに Hobby プランの対象外になるとは明記されていません。利用可否に迷う場合は、Vercel の利用条件を確認した上で判断してください。自分のサイトが商用利用に当たる場合は、Pro プランなどを検討してください。

これは Vercel に限らずいえることですが、「無料」と書いてあるからといって、どのような目的・使い方でも使用していいというわけではありません。サービスの利用規約等をしっかり確認すること必要があります。

また、本記事に記載しているのは記事執筆時点の情報であり、料金や利用条件は変更されることもあるため、実際に利用する時点で Vercel Hobby プランの公式ページ と Vercel の Fair Use Guidelines も確認してください。

この記事では、個人の学習用サイトを Hobby プランで公開する前提で進めます。

1. Vercel のアカウントを作成する

まずは、Vercel の公式サイトを開きます。画面右上にある Sign Up をクリックしてください。

Vercel 公式サイトの Sign Up ボタン

Sign Up は「アカウント登録」という意味です。画面のデザインや文言は変更される可能性がありますが、登録方法を選ぶ画面が表示されます。

今回は、すでに作成している GitHub アカウントを使います。

Continue with GitHub をクリックしてください。

Vercel の Continue with GitHub を選ぶ画面

GitHub のログイン画面が表示されたら STEP2 で作成した GitHub アカウントでログインします。

その後、Vercel から GitHub へのアクセス許可を求める画面が表示されることがあります。これは、Vercel が GitHub に保存されているサイトのファイルを読み込み、公開するために必要なものです。

画面の内容を確認し、Authorize Vercel などの許可ボタンをクリックしてください。

利用目的やプランを選ぶ画面が表示された場合は、個人プロジェクト・Hobby に該当する選択肢を選びます。会社や仕事で使うサイトでは、Hobby プランの対象にならない可能性があるため、実際の用途に合うプランを選んでください。

メールアドレスの確認を求められた場合は、Vercel から届いたメールを開き、案内に従って認証します。これで、Vercel のアカウント作成は完了です。

2. GitHub のリポジトリを Vercel に読み込む

Vercel にログインすると、新しいプロジェクトを作成する画面が表示されます。Vercel では、公開するサイトを **Project（プロジェクト）**という単位で管理します。

今回の場合は、STEP1 から作ってきたサイト1つに対して、Vercel のプロジェクトを1つ作るイメージです。

Import Git Repository という項目に、GitHub のリポジトリ一覧が表示されます。STEP2 で作成し、STEP3 でファイルを push したリポジトリの右側にある Import をクリックします。

Import は「取り込む」という意味です。ここでは、GitHub に保存したサイトのファイルを Vercel のプロジェクトとして読み込みます。

対象のリポジトリが表示されない場合

対象のリポジトリが一覧に表示されない場合は、GitHub 側で Vercel にそのリポジトリへのアクセスを許可できていない可能性があります。画面内にある Configure GitHub App、Adjust GitHub App Permissions などの設定ボタンをクリックしてください。

GitHub 側の画面へ移動したら、リポジトリへのアクセス範囲を選びます。

選択肢は、主に下記のような内容です。

  • All repositories 　現在のリポジトリと、今後作成するリポジトリを含め、全てへのアクセスを許可する

  • Only select repositories 　自分で選択したリポジトリだけへのアクセスを許可する

まずは今回作成したサイトだけを連携すればよいので、Only select repositories を選び、対象のリポジトリを指定すれば大丈夫です。

設定を保存して Vercel に戻ると、許可したリポジトリが一覧に表示されます。

3. 公開するプロジェクトの設定を確認する

Import をクリックすると、公開前の設定画面が表示されます。英語の項目がいくつか並んでいますが、今回のサイトでは基本的に設定を変更する必要はありません。

それぞれの意味だけ確認しておきます。

Project Name

Vercel 上で管理するプロジェクト名です。初期状態では、GitHub のリポジトリ名をもとに自動で入力されています。

この名前は、Vercel から最初に発行される URL にも使われます。

https://プロジェクト名.vercel.app

すでに同じ名前が使われている場合などは、URL の一部が自動で調整されることがあります。特に理由がなければ、初期状態のままで大丈夫です。

Framework Preset

サイトがどのような仕組み（Framework、フレームワーク）で作られているかを、Vercel に伝える項目です。

今回作ったサイトは、現時点では HTML、CSS、JavaScript で作成しており、特定のフレームワークは使っていません。そのため、Other になっていることを確認してください。

Other は、「一覧にある特定のフレームワークは使っていない」という意味です。

すでに Other が選択されている場合は、そのままで大丈夫です。別のものが選択されている場合は、Other に変更してください。

Root Directory

公開するサイトのファイルが置かれているフォルダを指定する項目です。今回のリポジトリでは、一番上の階層に index.html などのファイルがあるため、初期状態の ./ のままで問題ありません。

./ は、簡単に言えば「このリポジトリの一番上の場所」という意味です。

Build and Output Settings

サイトを公開するときに実行する処理や、公開するファイルの場所を設定する項目です。

今回は HTML、CSS、JavaScriptをそのまま公開するため、設定を変更する必要はありません。Build Command と Output Directory は、どちらも初期状態のまま進めてください。

Environment Variables

API キーなど、サイト内へ直接書きたくない値を設定するための項目です。今回のサイトでは使わないため、何も入力しません。

設定をまとめると、下記のようになります。

Project Name：初期状態のままでOK
Framework Preset：Other
Root Directory：./
Build Command：入力しない
Output Directory：入力しない
Environment Variables：入力しない

確認できたら、Deploy をクリックしてください。

Deploy は「配置する」「展開する」という意味で、Web サイトの公開では、サイトをインターネット上で見られる状態にすることを指します。

4. Vercel がサイトを公開するまで待つ

Deploy をクリックすると、Vercel が GitHub からファイルを読み込み、サイトの公開処理を開始します。

サイトの内容によって時間は変わりますが、今回のようなシンプルなサイトであれば、それほど長くはかかりません。難しそうな英語のログが流れる場合もありますが、エラーが表示されていなければ、そのまま待って大丈夫です。

公開が完了すると、「Status」が Ready と表示されます。

Vercel でサイトの公開が完了した画面

画面内にある Visit、サイトのサムネイル・または発行された URL をクリックすると、STEP1 から作ってきたサイトが新しいタブで表示されます。

URL が下記のような形式になっていれば、Vercel 上で公開されています。

https://プロジェクト名.vercel.app

これで、パソコンの中で作ったサイトを、他の人もインターネット上で見られる状態になりました。自分の Android スマホや iPhone でも見てみてください。ここまで来ると、ちゃんと「サイトを作った」と言える状態です。

なお、これは誰でもアクセスできる公開 URL なので、住所、電話番号、メールアドレス、API キー、その他公開すべきでない重要な情報などがサイト内に入っていないかは必ず確認してください。

5. サイトが正常に公開できているか確認する

公開 URL が他の環境からも問題なく開けることを確認するため、念のため次のいずれかでもアクセスしてみてください。

  • シークレットモード／プライベートモード
  • スマートフォン

サイトが正常に表示されて、リンクやボタンも動いていれば問題ありません。

画像が表示されない場合や、ページを移動すると 404 になる場合、ファイルのパスやファイル名が間違っている可能性があります。

一般的な Windows 環境では、ファイル名の大文字・小文字を区別しないため、ローカルでは正常に表示されることがあります。一方、Vercel 上では大文字・小文字が区別されるため、実際のファイル名と HTML に記載したファイル名を完全に一致させる必要があります。

例えば、実際の画像ファイル名が Logo.png なのに、HTML 側で下記のように書いている場合です。

<img src="images/logo.png" alt="ロゴ">

Logo.png と logo.png は大文字・小文字が異なるため、Vercel 上では画像が表示されない可能性があります。

6. GitHub を更新すると、Vercel のサイトも自動で更新される

Vercel と GitHub の連携が完了しました。今後は Cursor でサイトを修正し、GitHub の main ブランチへ push すると、Vercel が変更を検知して自動で再公開します。

流れは下記の通りです。

Cursor でサイトを変更する
↓
git add .
↓
git commit -m "変更内容のメモ"
↓
git push
↓
Vercel が変更を検知する
↓
公開中のサイトも自動で更新される

Vercel の画面で、もう一度 Deploy をクリックする必要はありません。

STEP3 で説明した通り、2回目以降は基本的に下記のコマンドで GitHub に反映できます。

git add .
git commit -m "変更内容のメモ"
git push

トップページの文章を一部変更するなど、公開後に反映を確認しやすい修正を Cursor に依頼し、git push までしてみてください。

その後、Vercel のプロジェクトを開くと Deployments に新しい公開処理が追加されます。

Ready と表示されれば、公開処理は完了しています。同じ公開 URL を更新し、変更内容が反映されているか確認してください。

少し待っても古い内容が表示される場合は、ブラウザの再読み込みを行います。

Windows の Chrome であれば、Ctrl キーを押しながら F5 キーを押すと、キャッシュを無視して再読み込みできます。

Preview Deployment と Production Deployment の違い

Vercel の画面を見ていると、Preview や Production というワードが表示されているところがあります。

  • Production Deployment 　一般に公開する本番サイトです。 　今回の設定では、基本的に main ブランチへ push した内容が反映されます。

  • Preview Deployment 　変更内容を本番公開する前に確認するためのサイトです。 　main 以外のブランチへ push した場合などに、確認用の別 URL が発行されます。

現時点では、普段使っている main ブランチへ push すると本番サイトが更新される、と覚えておけば大丈夫です。今後、サイトを運営しながら大きな変更を加えるようになったら、Preview Deployment を使って公開前に確認できるようになります。

よくある質問

Q. Cursor やパソコンを閉じてもサイトは公開されたままですか？

はい。

サイトは自分のパソコンではなく、Vercel から配信されています。そのため、Cursor を閉じても、パソコンの電源を切っても、だれでも公開 URL へアクセスできます。

Q. Vercel の URL はあとから変えられますか？

変更できます。Vercel の Project Name を変更すると、新しいプロジェクト名を使った vercel.app のURLが発行されます。また、自分で取得した独自ドメインを設定することもできます。

Q. GitHub のリポジトリを Public にしないと公開できませんか？

Public である必要はありません。Vercel に対象リポジトリへのアクセスを許可していれば、Private リポジトリからサイトを公開することができます。

ただし、GitHub のリポジトリが Private でも、Vercel で公開したサイト自体は誰でもアクセスできる状態になります。

「リポジトリが非公開」と「サイトが非公開」は別の話です。

Q. Deploy を押したらエラーになりました

まずは、GitHub のリポジトリの一番上の階層に index.html があるか確認してください。また、設定画面で下記のようになっているか確認します。

Framework Preset：Other
Root Directory：./
Build Command：入力しない
Output Directory：入力しない

それでも公開できない場合は、Vercel の Deployments から失敗した Deployment を開き、Build Logs に表示されているエラーメッセージを確認します。エラーメッセージをコピーし、Cursor に下記のように相談してもよいでしょう。

Vercel でサイトを公開しようとしたところ、下記のエラーが表示されました。

（ここにエラーメッセージを貼り付ける）

まだファイルは変更せず、まず原因と修正方法を初心者にも分かるように説明してください。

いきなり修正させず、まず原因を説明してもらうことで、意図しない変更も防ぎやすくなります。

Q. GitHub に push したのにサイトが更新されません

まず、Vercel の Deployments を開き、最新の Deployment が追加されているか確認してください。

  • 最新の Deployment がない 　別のリポジトリやブランチへ push している可能性があります。

  • Building と表示されている 　まだ公開処理中なので、少し待ちます。

  • Error と表示されている 　Deployment を開き、エラーメッセージを確認します。

  • Ready と表示されている 　公開は完了しているため、ブラウザを再読み込みします。

まとめ

これで、STEP1 で作成し、STEP3 で GitHub に反映したサイトをインターネット上に公開できました。

今回やったことは、次の通りです。

  • Vercel のアカウントを GitHub で作成した
  • GitHub のリポジトリを Vercel に読み込んだ
  • Framework Preset など、公開前の設定を確認した
  • Deploy を実行し、vercel.app の URL でサイトを公開した
  • GitHub に push すると、Vercel 側も自動で更新されることを確認した

サイトの作成・保存・公開は、それぞれ下記の役割に分かれています。

パソコン・Cursor
サイトを作成、修正する場所

GitHub
サイトのファイルと変更履歴を保存する場所

Vercel
GitHub のファイルを使い、サイトをインターネット上に公開する場所

最初はサービスが3つも登場してややこしく感じるかもしれません。しかし、今後の基本的な作業は、Cursor でサイトを変更し、GitHub に push するだけです。

Vercel への公開は自動で行われるため、一度ここまで設定できれば、毎回同じ公開作業を繰り返す必要はありません。

次は、よりページを増やしやすく、表示も高速なサイトにするため、Astro というフレームワークを導入します。

次の記事はこちら

Vercel でサイトを公開できたら、次は Astro を使って、今後記事やページを増やしやすいサイトへ作り変えていきます。

👉 【STEP5】Cursor で HTML サイトを Astro 化する方法

このシリーズの記事