Set up your vibe coding environment
Go from zero to a live, auto-deploying app: install Claude Code, connect GitHub, add a Supabase database, and deploy with Vercel.
最終更新日 2026/07/29
★ おすすめワークフロー
Install → Connect → Database → Deploy
Claude Code becomes your AI pair programmer in the terminal, GitHub tracks every change, Supabase gives you a live database, and Vercel auto-deploys on every push.
- 1
入力: A terminal and an empty project folder → 出力: Claude Code installed and running inside your project
Install Claude Code
npm install -g @anthropic-ai/claude-code cd your-project-folder claude Then just describe what you want to build in plain language — no need to open a separate editor.
- 2GitHub無料オプション
入力: Your local project folder → 出力: Your code versioned and backed up on GitHub
Initialize git and push to GitHub
git init git add . git commit -m "Initial commit" gh repo create my-project --public --source=. --push (Or create the repo on github.com first, then `git remote add origin <url>` and `git push -u origin main`.)
- 3Supabase無料オプション
入力: Your app's data needs (auth, database, storage) → 出力: A live Postgres database and connection string
Create a Supabase project
Go to supabase.com → New Project → pick a name and region. Copy the Project URL and anon/service keys into your project's .env file, then ask Claude Code to "connect this project to my Supabase database."
- 4Vercel無料オプション
入力: Your GitHub repository → 出力: A live, auto-deploying production URL
Deploy with Vercel
Go to vercel.com/new → Import your GitHub repository → add your Supabase env vars → Deploy. Every future `git push` to main redeploys automatically.
よくある質問
Do I need to know how to code to start?
Basic familiarity helps for reviewing what Claude Code changes, but you can describe features in plain language and let it write the code.
What if I get stuck installing something?
Paste the exact error message back into Claude Code — it can usually diagnose and fix installation issues on its own.