Connect GitHub to Vercel once, then every push can ship your web app for you. Vercel’s Git integration supports automatic deployments from GitHub, GitLab, and Bitbucket [source: Vercel]. That means you can stop dragging files around like it is 2009.
TLDR: Link your GitHub repo to Vercel. Pick your framework, add any environment variables, and click Deploy. After that, push code to GitHub and Vercel builds the latest version for you. For example, a small team shipping 10 updates per week can avoid 10 manual deploys, which may save 30 to 60 minutes of boring click-work.
Why this setup is so nice
GitHub is where your code lives. Vercel is where your app goes live. When they talk to each other, your workflow gets much cleaner.
You write code. You commit it. You push it. Vercel notices. Then it builds and deploys your app.
No zip files. No FTP. No “wait, did I upload the right folder?” panic.
Honestly, it feels like magic the first time it works. The second time, it just feels normal. Then manual deploys start to feel rude.
What you need before you start
Before connecting GitHub to Vercel, make sure you have these items ready:
- A GitHub account with your web app in a repository.
- A Vercel account. The free plan is fine for many personal projects.
- A working app, such as Next.js, React, Vue, Svelte, Astro, or a plain static site.
- A build command, if your app needs one. Example: npm run build.
- Environment variables, if your app uses API keys or secrets.
If your app runs locally, you are already halfway there.
Step 1: Push your web app to GitHub
Start with GitHub. Your code must be inside a GitHub repository.
If you already have a repo, great. If not, create one. Then push your project.
- Open your project folder.
- Run git init, if Git is not set up yet.
- Add your files with git add .
- Commit with git commit -m “first commit”
- Connect the remote GitHub repo.
- Push with git push.
Yes, Git can be fussy. It drives me crazy that one missing remote URL can waste five minutes. But once the repo is online, the rest is much smoother.
Step 2: Import the GitHub repository into Vercel
Now go to Vercel. Log in. On the dashboard, click Add New, then choose Project.
Vercel will ask you to connect a Git provider. Choose GitHub. You may need to give Vercel permission to access your repositories.
You can allow access to all repos, or only select repos. For most people, selecting only the repo you need is cleaner.
After that, find your app repo and click Import.
Step 3: Check the project settings
Vercel usually detects your framework. If it sees a Next.js app, it sets things up fast. If it sees a static site, it often handles that too.
Still, check these fields:
- Framework Preset: Pick your app type, such as Next.js, Vite, or Astro.
- Build Command: Common examples are npm run build or next build.
- Output Directory: Common examples are dist, build, or .next.
- Install Command: Usually npm install, pnpm install, or yarn install.
If you are not sure, check your package.json file. The scripts section usually gives the answer.
Step 4: Add environment variables
This part matters. Do not place private API keys in your code.
If your app uses values like database URLs, payment keys, or email service keys, add them in Vercel.
Look for Environment Variables during setup. Add each key and value. For example:
- NEXT_PUBLIC_SITE_URL for a public site URL.
- DATABASE_URL for a database connection.
- STRIPE_SECRET_KEY for a payment secret.
Be careful with names. API_KEY and Api_Key are not the same. Computers are petty like that.
Step 5: Click deploy
Now click Deploy. Vercel will install dependencies, build your app, and publish it.
If all goes well, you get a live URL. It usually looks like this:
your-project-name.vercel.app
Open it. Test the main pages. Click buttons. Try forms. Break things now, not after users find them.
If the build fails, read the error log. The answer is often near the bottom. Common problems include missing environment variables, wrong build commands, or package version issues.
How automatic deployments work
Here is the fun part. After the first deploy, Vercel keeps watching your GitHub repo.
- Push to the main branch, and Vercel creates a production deployment.
- Open a pull request, and Vercel creates a preview deployment.
- Merge the pull request, and the latest version goes live.
Preview deployments are great for teams. A designer can check a button change before it hits the real site. A client can review a page without asking for screenshots. A developer can test a fix without touching production.
A simple real-world example
Say you run a small online portfolio. You change your homepage text on Tuesday. You push the change to GitHub. Vercel deploys it.
On Wednesday, you add a case study in a new branch. Vercel creates a preview link. You check it on your phone. It looks good. You merge the branch. The case study goes live.
No server panel. No manual upload. No weird folder named final final latest.
Quick tips to avoid silly mistakes
- Keep your main branch clean. Treat it like the live version.
- Use pull requests. They make previews easy.
- Check build logs. They are boring, but useful.
- Add a custom domain after the first deploy works.
- Never commit secrets. Use Vercel environment variables instead.
Connecting GitHub to Vercel is one of the easiest upgrades you can make to your web app workflow. Set it up once. Then let your code ship itself while you get back to building.
