Your First Vercel Deployment

This is the moment. In a few minutes you're gonna take a project from GitHub and put it on the actual internet, with a real URL you can send to a friend.

The first one always feels like a big deal. For context, I picked up Claude Code having never used it, and in under a month I'd shipped 17 projects across roughly 30 repos. Point being, shipping stuff gets FAST once you've done it once.

What We're Going to Do#

Here's the game plan.

1. Pick a project from your GitHub account
2. Import it into Vercel
3. Watch Vercel build and deploy it
4. Visit your live site

Sound simple? Good... because it kinda is!

Option 1: Deploy Your Own Project#

If you've got a project on GitHub you want to put online, follow along.

Step 1. Go to Your Dashboard#

Log in to Vercel and click "Add New" in the top right corner. Then pick "Project."

Step 2. Import from GitHub#

You'll see a list of your GitHub repositories. Find the one you want and click "Import."

Don't see your repository? Try this.

• Click "Adjust GitHub App Permissions"
• Make sure Vercel has access to that repository
• Come back and refresh the list

Step 3. Configure Your Project#

Vercel shows you a configuration screen. Most of the time you don't need to touch ANYTHING here, because Vercel is smart enough to figure out what kind of project you have.

Here's what you'll see.

• Project Name - What you want to call it on Vercel
• Framework Preset - Vercel detects this automatically
• Root Directory - Usually just leave this blank
• Build Settings - Vercel fills these in for you

Step 4. Deploy!#

Click the "Deploy" button and watch the magic happen.

Option 2: Use a Template#

Nothing ready yet? That's fine. Vercel has templates you can deploy instantly.

Step 1. Go to Templates#

From your dashboard, click "Add New" > "Project." Then look for the "Browse Templates" link.

Step 2. Pick a Template#

A few good ones for beginners.

• Next.js Starter - A basic Next.js app
• Portfolio - A simple personal website
• Blog - A starter blog template

Click any template to read more about it.

Step 3. Deploy the Template#

Click "Deploy" on the template page, and Vercel does three things for you.

• Create a new repository in your GitHub account
• Add the template code to that repository
• Deploy it to Vercel

All in one click!

Watching the Build#

After you hit Deploy, Vercel shows you the build happening in real time. Here's what's going on behind the curtain.

Push --> Clone --> Install --> Build --> Deploy --> HTTPS --> Live!

Cloning#

Vercel copies your code over from GitHub. This only takes a few seconds.

Installing Dependencies#

If your project uses packages (like React or Next.js), Vercel downloads them now. You'll see a TON of text fly by. Totally normal, don't read into it.

Building#

Vercel turns your code into something that can run on the web. For small projects that takes a few seconds. Bigger ones might take a minute or two.

Deploying#

Vercel takes the built code and puts it on servers all around the world. That's the last step.

Viewing Your Live Site#

When the deployment finishes, you get a lil celebration screen with confetti. Your site is LIVE!

Click the preview image or the URL to visit it. The URL will look something like this.

your-project-name.vercel.app

That's it. Your website is on the internet, and anyone in the world can pull up that URL.

What Just Happened?#

Let's break down what Vercel just did for you without being asked.

1. Detected your framework - Vercel figured out if you're using Next.js, React, or something else
2. Used the right build command - Different frameworks need different commands to build
3. Optimized your output - Vercel made your site as fast as possible
4. Distributed globally - Your site was copied to servers worldwide
5. Set up HTTPS - Your site is secure with that little padlock in the browser

You didn't configure a single bit of that. Vercel just handled it.

Understanding Your Deployment#

Head back to your Vercel dashboard and click on your project. Here's what you'll find.

The Production Deployment#

This is the live version of your site. It gets a special URL like your-project.vercel.app.

The Deployment List#

Every deploy shows up here. You can see when each version went live and who pushed it.

Instant Rollback#

Want to go back to an older version? Vercel's Instant Rollback puts a previous production deployment back live in a couple of clicks. On the free Hobby plan you can only roll back to the deployment right before the current one, and paid plans can pick from older ones. Super handy when something breaks (and something WILL break eventually, that's just life).

Automatic Updates#

Here's the really cool part. After this first deployment, every time you push code to GitHub, Vercel deploys it automatically.

You won't click any buttons or run any commands. Push your code and Vercel takes it from there.

We'll see this in action when we get into preview deployments in the next lesson.

Troubleshooting#

Build Failed?#

If your build fails, don't panic. Click on the failed deployment to see what went wrong. These are the usual suspects.

• Missing dependencies - Make sure your package.json is correct
• Build errors - There might be a bug in your code
• Wrong settings - Double-check the framework detection

Can't Find Your Repository?#

Make sure Vercel has permission to see it. Go to Settings > Git Integration and adjust the GitHub permissions.

Site Looks Wrong?#

If your site looks different than you expected, check that Vercel detected the right framework. You can change that in your project settings.

TL;DR#

• Deploying to Vercel takes a few clicks
• Vercel detects your framework and configures everything for you
• Your site gets a URL like your-project.vercel.app
• Future updates deploy automatically every time you push to GitHub
• You can roll back if something breaks (Hobby only goes back one deployment)

What's Next?#

You've deployed to production. Now, what about testing changes BEFORE they go live? That's where preview deployments come in...