How to launch your first project with GitHub and Vercel (visual step-by-step)

GitHub stores your code and its history. Vercel turns that code into a live website and updates it every time you save a change to GitHub. Together they are one of the simplest ways to put a modern website or web app online, and the free tiers cover most first projects.

This is the exact path we used to rebuild this website. No prior experience with either tool is assumed.

What you need

• A free GitHub account (github.com).
• A free Vercel account. Sign up with your GitHub account, which connects the two for you.
• A project folder with your website's code. If you built it with an AI app builder, it may already be on GitHub; skip to step 4.
• Either the terminal or the free GitHub Desktop app. Both paths are shown below.

Step 1: Create the project on your computer

If you already have a project folder, skip ahead. To start fresh, a framework's setup tool creates a working starter site. For example, with Node.js installed:

npm create vite@latest my-site
cd my-site
npm install
npm run dev

The last command starts a local preview, usually at http://localhost:5173. Open it in your browser to confirm the starter site works before going further.

Step 2: Create an empty repository on GitHub

A repository ("repo") is a project's home on GitHub.

Private or public both work with Vercel. Private is the safer default for business projects.

Step 3: Push your code to GitHub

"Pushing" uploads your code and its history to the repository.

Option A: the terminal

From inside your project folder, run the commands GitHub showed you. They look like this:

git init
git add .
git commit -m "First version"
git branch -M main
git remote add origin https://github.com/YOUR-USERNAME/my-site.git
git push -u origin main

Skip git init if your setup tool already created a git repository. Refresh the GitHub page and your files should appear.

Option B: GitHub Desktop

1. Open GitHub Desktop and choose File → Add Local Repository, then pick your project folder.
2. If it says the folder is not a repository yet, click create a repository in that message.
3. Click Publish repository, choose private or public, and publish.

From now on, saving work to GitHub is two buttons: Commit (save a snapshot with a short note) and Push origin (upload it).

Step 4: Import the repository into Vercel

Step 5: Get your live address

When the build finishes, Vercel shows a preview of the site and a live address ending in .vercel.app. That address is real and public. Share it with a colleague and open it on your phone.

Step 6: Make a change and watch it update

Edit a line of text in your project, then push it:

git add .
git commit -m "Update headline"
git push

Or in GitHub Desktop: Commit, then Push origin. Within a minute or two Vercel rebuilds and the live site shows the change. You never upload files to Vercel by hand.

Step 7: Use preview links for bigger changes

Every push to your main branch updates the live site. For anything you want to review first, work on a separate branch. Vercel builds every branch at its own preview address, so you can check it before it goes live. By default, preview addresses are protected so only people on your Vercel team can open them; Vercel also offers a shareable link when you want someone outside the team to look.

In GitHub Desktop, use Current Branch → New Branch, then commit and push as usual. On GitHub, open a pull request to merge the branch into main when you are happy with the preview.

Step 8: Connect your own domain

1. In your Vercel project, open Settings → Domains and click Add Domain.
2. Enter your domain, for example yourbusiness.com. Vercel will suggest adding the www version too; accept it.
3. Vercel shows the DNS records to add at the company where you bought the domain (your registrar).

DNS changes can take from a few minutes to a few hours to spread. Vercel shows a green check when the domain is configured, and it adds the secure (https) certificate for you.

Environment variables: where secret keys go

If your site talks to a database, a form service, or an AI model, it needs keys. Never put them in your code, because your code lives on GitHub. Instead:

1. In Vercel, open Settings → Environment Variables.
2. Add each key with a name (for example DATABASE_URL) and its value.
3. Choose which environments get it (Production, Preview, Development).
4. Redeploy so the new values take effect. Existing deployments do not pick them up automatically.

On your computer, keep the same keys in a .env.local file and make sure .env* files are listed in .gitignore so they are never pushed.

Common errors and how to fix them

The build failed

Open the failed deployment in Vercel and read the build logs from the bottom up; the first red error is usually the real one. Then run the same build on your computer:

npm run build

If it fails locally too, fix it there first. If it only fails on Vercel, a missing environment variable is the most common cause.

Refreshing a page shows a 404

Single-page apps (common with React and Vite) handle their own page addresses in the browser. When someone refreshes /about, the server looks for a file that does not exist. Add a vercel.json file to the project root that sends every path to your app:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Frameworks like Next.js handle this for you and do not need it.

My changes are not showing up

Check three things in order: the push actually reached GitHub (look at the repository's latest commit), Vercel started a new deployment for it, and you are looking at the right address (the live domain, not an old preview link). A hard refresh clears your browser's cache.

Common questions

Is this free?

GitHub and Vercel both have free plans that cover most personal projects and small sites. Commercial or team use may need a paid Vercel plan; check their current terms.

Can I use this with an AI app builder?

Yes. Lovable, v0, Bolt, and Replit can all sync or export to GitHub. Once the code is on GitHub, steps 4 to 8 work the same. See choosing where to build.

What about a database?

Vercel connects to hosted databases, and some can be added from its Marketplace. See database vs. data warehouse for a walkthrough using Neon.