How to Deploy Projects on Vercel with GitHub: A Beginner’s Guide

01Why This Guide Exists (and Who It’s For)

Over the last year, a huge number of people have started building entire websites just by chatting with an AI tool. You describe what you want, Claude or ChatGPT writes the HTML, CSS and JavaScript (sometimes a full React or Next.js app), and within minutes you have a working site — on your own computer. The problem almost everyone hits next is the same: the site works perfectly on localhost, but there’s no way for the rest of the world to see it.

That’s exactly the gap this guide closes. Vercel and GitHub together form the fastest, most beginner-friendly path from “code sitting on my laptop” to “live website anyone can visit,” and the process is genuinely the same whether a senior engineer wrote every line or an AI model generated the entire project in one prompt. If you can copy and paste a few commands, you can have a live URL today.

We’ll go step by step: what GitHub and Vercel actually do, how to get your files (AI-generated or not) into a repository, how to import that repository into Vercel, how to configure build settings correctly for different frameworks, how to attach your own domain, and what to do when something doesn’t work the first time.

02What Are Vercel and GitHub, Really?

Before touching any settings, it helps to understand what each tool is actually doing, because the two jobs are completely separate:

• GitHub is a place to store and version your code. Every time you “commit” and “push,” GitHub keeps a full history of your project — think of it as Google Docs version history, but for code, plus a public or private copy that lives on the internet instead of only your laptop.
• Vercel is a hosting and build platform. It watches your GitHub repository, and whenever it sees new code, it automatically builds your project (compiling React/Next.js, bundling assets, etc.) and publishes the result to a live URL with HTTPS already switched on.

Put simply: GitHub answers “where does my code live,” and Vercel answers “where does my website live.” Connecting the two means every update you push becomes a live update automatically — no FTP, no manual uploads, no server management.

03What You Need Before You Start

You don’t need much — this is deliberately a low-barrier stack. Before you begin, make sure you have:

• A GitHub account (free at github.com).
• A Vercel account — you’ll create this using your GitHub login, so no separate signup form.
• Git installed on your computer, or the GitHub Desktop app if you’d rather click buttons than type commands.
• Your project files — a folder containing your HTML/CSS/JS, or a React, Next.js, Vue or other framework project. AI-generated projects work exactly the same way; see the next section.
• A code editor such as VS Code (optional, but helpful for checking file structure).

04Deploying a Website Built by Claude, ChatGPT or Gemini

This is the part most beginner guides skip, and it’s exactly why we wrote this one. A growing number of people are generating full websites — landing pages, portfolios, small business sites, even simple web apps — using AI chat tools, then getting stuck because they don’t know how to “publish” what the AI gave them. Here’s the honest answer: an AI-generated site is just code, and Vercel doesn’t know or care where the code came from.

The only extra step AI-generated projects sometimes need is double-checking that the AI didn’t reference missing files, broken image links, or a font/library it assumed was already installed. A quick local test catches almost all of these before you deploy. If you want the finished site to look genuinely professional rather than “obviously AI-made,” pairing the right typography matters more than people expect — our guides on the best coding fonts for developers in 2026 and font file types explained are useful next reads once your site is live and you’re polishing it further.

05Step 1: Push Your Project to GitHub

Open a terminal inside your project folder and run the following commands one at a time:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

Before the last two lines will work, you need an empty repository already created on GitHub (click the + icon → New repository, give it a name, and leave it empty — no README, no .gitignore — so it matches your local folder). Copy the repository URL GitHub shows you and use it in the git remote add origin line above.

Prefer clicking over typing? In GitHub Desktop, choose File → Add Local Repository, select your folder, then click Publish repository. It runs the same steps behind a simple interface.

06Step 2: Import and Deploy on Vercel

07Build Settings by Framework

Vercel auto-detects most popular frameworks correctly, but it helps to know what it’s actually doing behind the scenes, especially if the auto-detection guesses wrong or you’re deploying a plain static site an AI tool generated.

If your build fails and you’re not sure why, open your project’s package.json and confirm a "build" script actually exists — this is the single most common reason an AI-generated framework project fails its first deploy.

08Environment Variables Explained

Environment variables are values your code needs (API keys, database URLs, feature flags) that shouldn’t be hard-coded into your files. In your Vercel project, go to Settings → Environment Variables, add each key and value, and choose which environments they apply to (Production, Preview, Development).

• Never commit real API keys directly into your HTML or JS files — treat them the same way you’d treat a password.
• After adding or changing environment variables, you need to redeploy for the change to take effect — existing deployments don’t pick up new values automatically.
• For purely static AI-generated sites with no backend calls, you may not need any environment variables at all.

09Connecting a Custom Domain

A vercel.app URL is perfectly usable, but most businesses want their own domain. The process mirrors standard domain-to-hosting setup — the same DNS logic we covered in detail in our guide to connecting a domain to hosting for WordPress applies here too, just pointed at Vercel instead of a WordPress host.

This works the same regardless of whether your business (or your domain extension) is registered in India (.in/.co.in), Australia (.com.au/.au) or the USA (.com/.us) — DNS doesn’t care where you or your registrar are based.

10Automatic Deployments & Preview URLs

The real power of connecting GitHub to Vercel isn’t the first deploy — it’s every deploy after that. Once connected:

• Every push to your main branch automatically triggers a new production build and updates your live site — no manual redeploy button needed.
• Every push to any other branch, and every pull request, gets its own unique preview URL, so you (or a client) can review a change before it goes live.
• Failed builds never take your live site down. If a push breaks the build, Vercel simply keeps your last successful deployment live while showing you the error in the dashboard.

11Vercel Free Tier vs Paid Plans

For most beginners, portfolios, small businesses and even many AI-generated marketing sites, the free plan is genuinely enough to launch on.

12Common Errors & How to Fix Them

• “Build failed” with no clear reason: Open the build logs in your Vercel dashboard — the actual error line is almost always there, even if the summary message isn’t specific.
• 404 on every page except the homepage: Usually a routing/output directory mismatch — confirm the Output Directory setting matches where your build actually places files.
• “Module not found” errors: A dependency referenced in your code isn’t listed in package.json — this is common with AI-generated projects that assumed a library was already installed.
• Environment variable is undefined in production: You likely added it after the last deploy — trigger a redeploy so the new value is picked up.
• Custom domain shows “Invalid Configuration”: Double-check the DNS record values against exactly what Vercel’s dashboard shows, and allow time for propagation before assuming it’s broken.

13When to Bring In a Professional Team

Deploying an AI-generated or hand-built project on Vercel is genuinely something a beginner can do in an afternoon. Where people usually get stuck is everything around the deployment: making the AI-generated design actually look professional, wiring up a real backend or database, setting up proper SEO, connecting analytics, and making sure the site is fast and secure enough to put in front of real customers. That’s the point where working with an experienced website designer in Rajkot or a full-stack development team starts to pay for itself.

Impex Infotech works with founders and businesses across Rajkot, Gujarat, wider India, Australia and the USA who’ve used AI tools to prototype a site and now want it properly deployed, polished and maintained — as well as businesses who want a fully custom build from scratch, including AI-integrated web apps. As a best AI company in Rajkot for practical, production-ready implementations (not just prototypes), we handle the entire pipeline: GitHub setup, Vercel deployment, custom domains, ongoing updates, and design refinement.

14Frequently Asked Questions