Vercel 初心者ガイド

ゴールは「自分のホームページを URL で公開できる」こと。下の手順はそのための準備と操作。

できるようになること

このガイドを終えると、次の成果が手に入る（アカウント作成や CLI インストール自体がゴールではない）。

ブラウザの Vercel ダッシュボードだけでも公開はできる。CLI はターミナルから同じことをコマンドでやるための道具。

やりたいこと	CLI でできること
初めて公開する	`vercel` → プレビュー URL がターミナルに表示される
本番に載せる	`vercel --prod` → 固定の本番 URL に反映
HTML を直したあと更新	同じフォルダで再度 `vercel`（ダッシュボードを開かなくてよい）
AI に任せる	Claude Code / Codex がターミナルで `vercel` を実行できる（人間が画面操作しなくてよい）

手順の「アカウント」「キー」「CLI インストール」は、この CLI を使えるようにする準備。成果は上の URL 公開・更新。

上の成果を得るまでの作業順。1 から順に進める。

ターミナルから Vercel を操作するときのパスワード代わり。ブラウザだけで vercel login するなら、あと回しでもよい。

ここまでで「ターミナルから vercel を打てる」状態になる。Node.js が入っている Mac のターミナルで実行。

インストール — npm install -g vercel
ログイン — vercel login（表示 URL をブラウザで開く）
確認 — vercel whoami で自分の名前が出る
作業フォルダで紐付け — mkdir -p ~/projects/my-homepage && cd ~/projects/my-homepage && vercel link（新規 Project 名はそのまま Enter で可）

~/projects/my-homepage で AI を開く（Claude Code: claude / Codex: Cursor 内など）
次を貼って依頼する:
index.html だけの静的ホームページを作って。タイトルは「私のポートフォリオ」、自己紹介1段落、連絡先リンク1つ。CSSは同ファイル内。画像なし。スマホでも読めるように。
open index.html でローカル表示を確認してから次へ

設定の詳細: Claude Code · Codex

ここで初めて「できるようになること」のURL 公開が達成される。

トークンと API キーは別物 — VERCEL_TOKEN はデプロイ用。OpenAI 等のアプリ用キーは Project の Environment Variables に入れる
秘密情報を HTML に書かない — キーをページ本文や Git に入れない
ルートに index.html — これがないと 404 になりやすい
別アカウントに上がったとき — vercel whoami と vercel switch で Team を確認
本番デプロイ — 個人練習なら vercel --prod でよい。チーム運用では確認フローを決める
最初は HTML 1 枚で十分 — Next.js は慣れてからで OK