PortfolioIntroduction
Writing code, pushing to GitHub, then uploading to a server—that's a lot of work. By linking GitHub × Vercel, you can create an environment where sites are automatically published just by pushing to GitHub.
This article introduces the integration method and how it works.
What Happens After Integration
Create code with Claude Code / Cursor
Store and version control code
Auto build and deploy
Once configured, sites automatically update every time you push to GitHub without conscious effort.
Integration Setup Steps
Prerequisites
- Have a GitHub account
- Have a Vercel account (can sign up with GitHub account)
- Repository created on GitHub
Step 1: Log into Vercel
Log into the Vercel dashboard (vercel.com). If you signed up with GitHub, integration is already prepared.
Step 2: Create New Project
Select "Add New" → "Project."
Step 3: Select GitHub Repository
A list of GitHub repositories to integrate appears; select your target repository and click "Import."
Step 4: Confirm Settings and Deploy
Confirm project name and build settings, then click "Deploy." In most cases, auto-detected settings work fine.
Choose target repository from GitHub
Framework auto-detected
Initial deploy with "Deploy" button
URL issued, site published
Post-Integration Behavior
After integration, behavior works as follows:
| GitHub Action | Vercel Behavior |
|---|---|
| Push to main branch | Deploy to Production |
| Push to other branches | Deploy to Preview environment |
| Create PR | Generate preview URL per PR |
| Merge PR | Auto-deploy to Production |
Especially convenient: preview environments are auto-generated per branch. When you want to "verify changes before going to production," you don't need to set up a separate environment.
Environment Variable Settings
API keys, secret keys, and other information you don't want directly in code can be set as Vercel environment variables.
From Vercel project settings, select "Environment Variables" and add necessary variables.
Example:
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://...
Tell Claude Code "use this environment variable" and it will implement code that references it.
When Settings Are Unclear
When stuck on integration or environment variable settings, there are several approaches:
Ask Claude Code
Give instructions like "write Vercel environment variable setup steps to a file" and it outputs procedures as text.
Reference Vercel Documentation
Vercel's official documentation is comprehensive. "Docs" links from settings screens often lead to relevant pages.
Ask ChatGPT
Asking "this isn't working with Vercel and GitHub integration" often gets solution suggestions.
Common Troubles
Build Fails
When builds work locally but fail on Vercel, check the following:
- Node.js version: Can specify version in Vercel project settings
- Environment variables: Verify none exist locally that are missing in Vercel
- Dependencies: Verify all required packages are in package.json
Showing Claude Code error logs and asking "what's causing this error?" is also effective.
Deployment Doesn't Start
If pushing to GitHub doesn't start deployment, check webhook settings in Vercel dashboard under "Settings" → "Git."
Summary
- GitHub × Vercel integration enables auto-deploy on push
- Preview environments auto-generated per branch for convenience
- Configuration is one-time, then works seamlessly
- When stuck, consult Claude Code or ChatGPT
Once configured, the flow of "write code → push to GitHub → site updates" becomes automated. Put effort into the initial setup, and everything becomes easier afterward.