GitHubとVercelで
サイト公開
初心者向け完全手順

この記事で分かること

「GitHub Vercel サイト公開」で検索している人が知りたいことは、たぶん手順だけではありません。

そもそもGitHubとVercelって何なのか。無料でどこまでできるのか。独自ドメインはどう設定するのか。公開したのに表示されない時はどうすればいいのか。AIで作ったサイトをどう仕事に使えばいいのか。

この記事では、全部答えます。

• GitHubとVercelの役割と、初心者に向いている理由
• サイト公開までの全体像と具体的な手順
• 独自ドメインの追加手順、DNSレコードの設定、反映確認まで
• よくあるエラー12パターンの「症状・原因・確認・対処」
• 詰まった時にAIへ貼るだけで使えるプロンプト集
• 実務での活用事例14個

GitHubとVercelとは

GitHubとは、コードやファイルを保管して、変更履歴を管理できるWebサービスです。WebサイトのHTML、CSS、JavaScript、Next.jsのコード、画像、READMEなどを置けます。

Vercelとは、GitHub上のコードを読み込んで、Webサイトを自動で公開してくれるサービスです。特にNext.jsとの相性が強く、GitHubのリポジトリと接続すると、コードが更新されるたびに自動でデプロイできます。

公式情報では、VercelはGitHubなどのGitプロバイダーと接続し、リポジトリからプロジェクトを作ってデプロイできます。GitHub側は、リポジトリを作成してコードを管理するのが基本です。

hashshでも、AIで作ったLPやデモサイトをクライアントに見せる時は、この組み合わせを使っています。GitHubへpushして、Vercelが発行した確認URLをそのまま送る。この流れが一番速いからです。

なぜ初心者に向いているのか

GitHubとVercelの組み合わせが初心者に向いている理由は、公開までの作業が分かりやすいからです。

昔ながらのサイト公開では、サーバー契約、FTP、ドメイン設定、SSL証明書、手動アップロードを全部理解する必要がありました。今でもそれらの知識は大事ですが、最初の1サイト目で全部覚える必要はありません。

Vercelを使うと、GitHubのリポジトリを選ぶだけで、フレームワークの検出、ビルド、URLの発行まで自動で進みます。SSL証明書（httpsの鍵マーク）も自動で無料発行されます。

さらに便利なのが、自動デプロイです。

一度GitHubとVercelを接続すると、GitHubに変更をpushしたタイミングで、Vercel側も自動で更新されます。サイトを直すたびに管理画面から手動アップロードする必要がなくなります。

実測でいうと、静的なLPならpushから公開反映まで1〜2分程度です。修正して、pushして、1分待って確認する。このテンポで作業できるのは、手動アップロード時代と比べると別世界です。

サイト公開までの全体像

最初の流れは、この順番です。

1. サイトを作る
2. GitHubリポジトリを作る
3. コードをGitHubへpushする
4. VercelでGitHubリポジトリを選ぶ
5. ビルド設定を確認する
6. Deployを押す
7. 発行されたURLで表示確認する
8. 必要なら独自ドメインを設定する

HTMLだけのサイトでも、Next.jsのサイトでも、考え方は同じです。

AIエージェントを使う場合は、Claude CodeやCodexに「GitHubへ置きやすい構成にして」「Vercelで動くように確認して」と頼むと、かなりスムーズになります。

最初に送るプロンプト

AIエージェントにサイト公開の準備を頼むなら、最初に前提をまとめて渡すのがおすすめです。Claude CodeやCodexにそのまま貼ってください。

GitHubとVercelで公開する前提で、このWebサイトを整えてください。

目的:
- 初心者でもVercelにデプロイできる構成にする
- READMEに公開手順を書く
- 秘密のキーやAPIキーをGitHubに含めない

確認してほしいこと:
1. このプロジェクトがHTML/CSS/JSなのか、Next.jsなのか確認
2. package.jsonがある場合はbuildコマンドを確認
3. Vercelで必要な環境変数があるか確認して一覧にする
4. .gitignoreに.envや秘密情報のファイルが入っているか確認
5. READMEにローカル起動、ビルド、デプロイ手順を追記
6. GitHubに上げてはいけないファイルが残っていないか確認

注意:
- .envの中身は表示しない
- 破壊的なコマンドは実行前に確認する
- 変更後に実行すべき確認コマンドを教える
- エラーが出たら、原因の候補を初心者向けに説明する

AIでサイトを作る人ほど、このプロンプトは重要です。見た目だけ作れていても、公開できる構成になっていないことがあるからです。

実際にhashshでも、AIが作ったLPをそのまま公開しようとして、.env がGitHubに上がりかけたことがあります。公開前のこのチェックは毎回やってください。

準備するもの

必要なものは4つだけです。

• PC: MacでもWindowsでも大丈夫です
• GitHubアカウント: 無料で作れます
• Vercelアカウント: GitHubアカウントでそのまま登録できます
• 公開したいサイトのファイル: AIで作ったものでOKです

Vercelの登録は、GitHubアカウントで「Continue with GitHub」を選ぶのが一番ラクです。アカウント連携が最初から済むので、後の接続作業が減ります。

料金は、GitHubもVercelも無料プランから始められます。VercelのHobbyプランは個人の非商用利用向けという位置づけなので、仕事のサイトを本格運用する場合は有料プラン（Pro）の検討が必要です。料金や利用条件は変わる可能性があるため、最新情報は公式ページで確認してください。

GitHubにコードを置く

GitHubにサイトを置くには、リポジトリを作ります。

初心者は、まずGitHubの画面右上の「＋」から「New repository」を選ぶのが分かりやすいです。名前は後から見て分かる具体的なものにします。

my-portfolio-site
company-lp
ai-tool-demo

リポジトリを作ったら、パソコンの黒い画面（ターミナル）でサイトのフォルダに移動して、以下のコマンドを実行します。

git init
git add .
git commit -m "feat: initial site"
git branch -M main
git remote add origin https://github.com/USER/REPO.git
git push -u origin main

USER/REPO の部分は、自分のGitHubユーザー名とリポジトリ名に置き換えてください。すでにGitHubリポジトリを作っている場合は、GitHubの画面に表示されるコマンドに合わせれば大丈夫です。

コマンドが不安な人は、GitHub Desktopというアプリを使ってもOKです。画面操作だけでpushまでできます。

秘密のキーの安全な管理方法は、次の記事にまとめています。あわせて読んでください。

あわせて読む 1Password CLI設定｜Mac/WSL完全手順 APIキーや.envをGitHubに漏らさず安全に管理する方法です。

Vercelでサイトを公開する

Vercelでサイトを公開する流れはシンプルです。

1. Vercelにログイン
2. Add New > Projectを選ぶ
3. GitHubリポジトリを選んでImport
4. Framework Presetを確認
5. Root Directoryを確認（サイト本体が入っているフォルダか）
6. Environment Variablesがあれば入れる
7. Deployを押す

Next.jsの場合は、Vercelが自動で設定を推測してくれることが多いです。静的HTMLの場合も、リポジトリ直下に index.html があればそのまま公開できます。

デプロイが始まると、ビルドのログが流れます。1〜2分待って「Congratulations!」の画面が出たら成功です。

公開が終わると、VercelのURLが発行されます。

https://your-project.vercel.app

初回は、Vercelの登録からここまで含めて15分程度が目安です。2回目以降は、リポジトリを選んでDeployを押すだけなので数分で終わります。

公開後にまず確認すること

URLが発行されたら、公開して終わりにせず、必ずこのチェックをしてください。

特にスマホ表示は必ず見てください。実際の閲覧はスマホの方が多いことがほとんどです。

このチェックで問題が見つかったら、手元でファイルを直して、もう一度GitHubへpushします。1〜2分でVercel側も自動で更新されます。

Vercelの便利機能

Vercelは、ただサイトを公開するだけの場所ではありません。初心者でも使いやすい便利機能があります。

独自ドメインの設定方法

VercelのURLのままでも公開はできますが、仕事で使うなら独自ドメインを設定するのがおすすめです。ここは初心者が一番詰まりやすい場所なので、丁寧にいきます。

wwwなしのドメイン（example.com）
→ Aレコードを設定する

wwwありのドメイン（www.example.com）
→ CNAMEレコードを設定する

筆者が最初に独自ドメインを設定した時は、昔のサーバーのAレコードが残っていることに気づかず、2時間ほど「反映待ち」だと思って待ち続けました。実際は競合レコードの削除が必要でした。待っても繋がらない時は、次のエラー対処の章を見てください。

よくあるエラーと対処法12パターン

デプロイとドメイン設定で詰まりやすいエラーを12パターンまとめます。上から順番に見てください。

1. 古いDNS設定が残っていて繋がらない（レコード競合）

症状: DNSレコードを設定したのに、Vercelのドメイン画面が「Invalid Configuration」のまま変わらない。

原因: 以前使っていたサーバーやホームページ作成サービスのAレコードが残っている。同じホスト名にAレコードとCNAMEレコードが両方ある。AAAAレコード（IPv6用）が古いサーバーを向いている。

確認すること: ドメイン会社のDNS設定画面で、同じホスト名（@ や www）のレコードが2つ以上ないか。A、AAAA、CNAMEのそれぞれで古い値が残っていないか。

対処: Vercelが指定した値以外の、同じホスト名のA/AAAA/CNAMEレコードを削除します。メール用のMXレコードやTXTレコードは消さないでください（メールが止まります）。削除後、Vercelのドメイン画面で「Refresh」を押して再確認します。

2. wwwありは開くのに、wwwなしだと開かない

症状: www.example.com は表示されるのに、example.com だと「サイトにアクセスできません」になる。

原因: wwwなしドメイン（ルートドメイン）用のAレコードを設定していない。またはAレコードの値が間違っている。

確認すること: ドメイン会社のDNS設定に、ホスト名 @（または空欄）のAレコードがあるか。値がVercelの画面に表示されたものと一致しているか。

対処: Vercelの Settings > Domains で example.com が追加されているか確認し、ドメイン会社側でホスト名 @ のAレコードをVercel指定の値で追加します。反映を待って開き直します。

3. wwwなしは開くのに、wwwありだと開かない

症状: example.com は表示されるのに、www.example.com がエラーになる。

原因: www 用のCNAMEレコードを設定していない。Vercel側に www.example.com をドメインとして追加していない。

確認すること: Vercelの Settings > Domains に www.example.com があるか。ドメイン会社のDNS設定に、ホスト名 www のCNAMEレコードがあるか。

対処: Vercelに www.example.com を追加し（wwwなし側へのリダイレクト設定も選べます）、ドメイン会社側でホスト名 www のCNAMEレコードをVercel指定の値で追加します。反映を待って確認します。

4. 鍵マークが付かない・SSL証明書が発行されない

症状: 「この接続は保護されていません」と表示される。httpsで開けない。

原因: DNSがまだVercelに向いていない（反映待ち）。CAAレコードという設定が証明書の発行を止めている。Cloudflareのプロキシ機能が間に入っている。

確認すること: Vercelのドメイン画面が「Valid Configuration」になっているか。ドメイン会社のDNS設定にCAAレコードがあるか。

対処: まずDNS設定を正しくして反映を待ちます（証明書はDNS確認後に自動発行されます）。CAAレコードがある場合は、Let's Encryptからの発行を許可する設定を足すか、CAAレコードを削除します。Cloudflareを使っている場合は9番を見てください。

5. 古いサイトが表示され続ける

症状: 独自ドメインを開くと、前のホームページや「工事中」ページが出る。または、Vercelのログイン画面のようなものが出る。

原因: DNSの反映がまだ終わっておらず、古いサーバーに繋がっている。ブラウザが古い表示を覚えている（キャッシュ）。Vercelのプレビュー保護機能（Deployment Protection）が有効で、認証画面が出ている。

確認すること: スマホのWi-Fiを切って、モバイル回線で同じURLを開いてみる（別回線だと最新の状態が見えることが多いです）。出ている画面がVercelのログイン画面なら、開いているURLがプレビューURLでないか。

対処: 別回線で新しいサイトが見えるなら、反映待ちかキャッシュです。待つか、11番のキャッシュ対処を試します。プレビューURL（長いランダムな文字列入りのURL）ではなく本番のURLを共有し直します。本番URLで認証画面が出る場合は、VercelのSettings > Deployment Protectionの設定を確認します。

6. デプロイは成功したのに404が出る

症状: Vercelのデプロイは「Ready」なのに、URLを開くと「404: NOT_FOUND」になる。

原因: リポジトリの直下に index.html がない（静的サイトの場合）。ビルドの出力先ディレクトリの設定が合っていない。ドメインを別のプロジェクトに割り当てている。

確認すること: https://your-project.vercel.app のURLでも404になるか。GitHubのリポジトリ直下に index.html（またはNext.jsなら package.json）があるか。

対処: vercel.appのURLでも404なら、プロジェクトのファイル構成と出力設定を見直します。vercel.appでは表示されるのに独自ドメインだけ404なら、ドメインの割り当て先プロジェクトを確認します。サブフォルダにサイト本体がある場合は7番のRoot Directoryを設定します。

7. 別のフォルダやプロジェクトを公開してしまっている

症状: デプロイは成功するのに、READMEだけのページや、まったく別のサイトが表示される。

原因: 1つのリポジトリに複数のフォルダがあり、サイト本体のフォルダを指定していない。Vercelでインポートするリポジトリを間違えた。

確認すること: サイト本体（index.html や package.json）がリポジトリのどのフォルダにあるか。VercelのプロジェクトがどのリポジトリとBranchに接続されているか。

対処: Vercelの Settings > Build and Deployment で Root Directory をサイト本体のフォルダに設定し、Deploymentsから「Redeploy」を実行します。リポジトリ自体が違う場合は、正しいリポジトリで新しくプロジェクトを作り直します。

8. 画面は出るが一部の機能が動かない（環境変数不足）

症状: サイトは表示されるのに、データが読み込まれない、フォームが送信できない、APIエラーが出る。ローカルでは動く。

原因: .env.local などに書いた環境変数が、Vercelに登録されていない。.env はGitHubに上げない運用なので、Vercelには自動で伝わりません。

確認すること: ローカルの .env 系ファイルにどんな変数があるか。Vercelの Settings > Environment Variables に同じ名前の変数が登録されているか。

対処: Vercelの Settings > Environment Variables に必要な変数を登録します。登録後は自動では反映されないので「Redeploy」を実行します。秘密のキーの値そのものは、チャットやAIに貼らないよう注意してください。

9. Cloudflareを使っていて表示がおかしい（オレンジ色の雲）

症状: Cloudflareでドメインを管理していると、リダイレクトが無限に繰り返される、SSLエラーが出る、Vercelの設定が有効にならない。

原因: CloudflareのDNS設定で「プロキシ」（オレンジ色の雲のマーク）がONになっていて、CloudflareがVercelとの間に入っている。

確認すること: CloudflareのDNS設定画面で、Vercel向けのレコードの雲マークがオレンジ色かグレーか。

対処: 初心者は、Vercel向けのレコードの雲マークをクリックしてグレー（DNS only）にするのが一番確実です。オレンジのまま使いたい場合は、CloudflareのSSL/TLS設定を「Full」にするなど追加設定が必要です。まずはグレーで動かしてから検討してください。

10. 設定ミスか、ただの反映待ちか分からない

症状: DNSを設定したのに繋がらない。直すべきなのか、待つべきなのか判断できない。

原因: DNSの反映には数分〜最大48時間かかるため、正しい設定でも待ち時間が発生する。

確認すること: Vercelのドメイン画面のステータス（「Valid Configuration」なら設定は正しく、あとは待つだけです）。DNS反映確認サイト（dnschecker.orgなど）で、自分のドメインが世界のどこからVercelの値に見えているか。

対処: Vercel側の表示が有効になっているなら、設定は触らずに待ちます。1時間待っても無効のままなら、1番のレコード競合と値の打ち間違いを確認します。待っている間に設定を何度も変えると反映がさらに遅れるので、触りすぎないでください。

11. 自分のスマホやPCだけ古い表示になる

症状: 他の人は新しいサイトが見えているのに、自分の端末だけ古い表示のまま。更新したはずの変更が反映されない。

原因: ブラウザのキャッシュ（一度見たページの保存データ）が残っている。スマホは特にキャッシュが強く残りやすい。

確認すること: シークレットウィンドウ（プライベートブラウズ）で同じURLを開くと最新になるか。

対処: シークレットウィンドウで最新が見えるなら、キャッシュが原因です。PCはスーパーリロード（MacはCommand+Shift+R、WindowsはCtrl+Shift+R）を試します。スマホはブラウザの閲覧履歴とキャッシュを削除するか、しばらく待ちます。

12. Vercelのビルドで失敗する

症状: デプロイが「Error」になり、サイトが公開されない。ログに赤いエラーが出ている。

原因: コードにエラーがある（型エラー、構文エラー、存在しないファイルの読み込みなど）。ローカルとVercelでNode.jsのバージョンが違う。必要なパッケージがpackage.jsonに入っていない。

確認すること: 手元で npm run build を実行して、同じエラーが出るか。Vercelのビルドログの、一番最初に出ている赤いエラー文。

対処: まずローカルでビルドを通します。ローカルで失敗するなら、Vercelでも必ず失敗します。

npm run build

エラー文の全文をコピーして、AIエージェントに貼って原因を聞きます（秘密のキーや個人情報が含まれていないか確認してから）。直したらpushすれば、Vercelが自動で再デプロイします。

AIに聞くためのプロンプト集

GitHubとVercelでサイトを公開する直前です。公開前チェックをしてください。

サイトの種類（LP/ポートフォリオ/ブログなど）:
使っている技術（分かればでOK。HTMLだけ、Next.jsなど）:
フォルダ構成（分かる範囲で）:

公開前に確認すべきことを、初心者向けにチェックリスト形式で教えてください。
特に、秘密のキーや上げてはいけないファイルの確認方法を具体的に教えてください。

これからこのフォルダをGitHubにpushします。

フォルダにあるファイル名の一覧:
.gitignoreの中身（あれば）:

秘密のキー、パスワード、個人情報が含まれていそうなファイルがないか確認する手順を教えてください。
.gitignoreに追加すべき項目も提案してください。
ファイルの中身のうち、秘密の値そのものは貼りません。

Vercelのデプロイがビルドで失敗しました。

表示されたエラー文（秘密の値は伏せています）:
ローカルでnpm run buildを実行した結果:
最近変更したファイル:

エラーの原因の候補と、初心者でも安全に試せる直し方を、順番に教えてください。

Vercelに独自ドメインを設定しています。

ドメイン名の形（例: example.com、www.example.comのどちらを設定したいか）:
ドメインを買った会社:
Vercelの画面に表示されている指示（AレコードかCNAMEか）:
今のDNS設定画面にあるレコードの種類（分かる範囲で）:

どのレコードを追加して、どれを消すべきか、初心者向けに手順を教えてください。
メールが止まらないように、消してはいけないレコードも教えてください。

Vercelの独自ドメイン設定が反映されません。

設定してからの経過時間:
Vercelのドメイン画面の表示（Valid/Invalidなど画面に出ている言葉）:
別回線（スマホのモバイル回線など）で開いた結果:

このまま待つべきか、設定を見直すべきか判断してください。
見直す場合は、確認する場所を順番に教えてください。

サイトを更新したのに、古い表示が出続けます。

更新してからの経過時間:
シークレットウィンドウで開いた結果:
別の端末や回線で開いた結果:
Vercelのデプロイが成功しているか:

キャッシュ、DNS反映待ち、デプロイ失敗のどれが原因か切り分ける手順を教えてください。

Vercelで公開したサイトの一部機能が動きません。ローカルでは動きます。

動かない機能:
表示されるエラー（画面に出ている範囲だけ):
ローカルの.envにある変数の名前だけの一覧（値は貼りません）:

Vercelの環境変数の設定で確認すべきことと、設定後にやるべきことを教えてください。

GitHubとVercelでサイトを公開できました。

サイトの種類:
サイトの目的（集客/ポートフォリオ/告知など）:

公開後にやるべき確認と設定を、優先度順のチェックリストにしてください。
表示確認、スマホ確認、OGP、独自ドメイン、アクセス解析など、初心者が忘れやすいものを含めてください。

実務での使い方14選

この組み合わせは、個人のポートフォリオだけではなく、実務でそのまま使えます。hashshでも、AIで作ったLPをVercelのプレビューURLでクライアントに確認してもらう運用を実際に回しています。

特にAIエージェントと相性がいいです。Claude CodeやCodexにLPを作らせ、GitHubへ置き、Vercelで公開する。修正があれば、AIに差分を作らせて、プレビューURLで確認する。この流れができると、Web制作のスピードはかなり上がります。

AIエージェントをまだ入れていない人は、次の記事から始めてください。

あわせて読む Claude Codeインストール完全ガイド｜初心者向け サイトを作る側のAIエージェント、Claude Codeの導入手順です。

あわせて読む Codex CLIインストール完全ガイド｜初心者向け手順 ChatGPT課金中なら始めやすいCodexの導入手順です。

社外向けに公開するサイトでは、問い合わせ先や運営者情報を載せる、独自ドメインを使うなど、信頼感の部分も忘れずに整えてください。

まとめ

GitHubとVercelを使うと、サイト公開は「push して待つだけ」になります。

最初から完璧に理解しなくて大丈夫です。まずは小さなサイトを1つ公開してください。公開までの流れを一度体験すると、AIで作ったページを仕事に使う感覚がかなりつかめます。

詰まったら、この記事のエラー対処12パターンとプロンプト集に戻ってきてください。

よくある質問

更新履歴

• 2026-07-02 独自ドメインのDNS設定手順、エラー対処12パターン、AIプロンプト集、実務活用14選、FAQを増補