HOSTING / LESSON 12
Your First Vercel Deployment.
Deploying your first site
Loading the lesson…
Loading activities…
Browse lessons
HOSTING / LESSON 12
Deploying your first site
Loading the lesson…
Loading activities…
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.
Here's the game plan.
Sound simple? Good... because it kinda is!
If you've got a project on GitHub you want to put online, follow along.
Log in to Vercel and click "Add New" in the top right corner. Then pick "Project."
You'll see a list of your GitHub repositories. Find the one you want and click "Import."
Don't see your repository? Try this.
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.
Click the "Deploy" button and watch the magic happen.
Nothing ready yet? That's fine. Vercel has templates you can deploy instantly.
From your dashboard, click "Add New" > "Project." Then look for the "Browse Templates" link.
A few good ones for beginners.
Click any template to read more about it.
Click "Deploy" on the template page, and Vercel does three things for you.
All in one click!
After you hit Deploy, Vercel shows you the build happening in real time. Here's what's going on behind the curtain.
Vercel copies your code over from GitHub. This only takes a few seconds.
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.
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.
Vercel takes the built code and puts it on servers all around the world. That's the last step.
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.
That's it. Your website is on the internet, and anyone in the world can pull up that URL.
Let's break down what Vercel just did for you without being asked.
You didn't configure a single bit of that. Vercel just handled it.
Head back to your Vercel dashboard and click on your project. Here's what you'll find.
This is the live version of your site. It gets a special URL like your-project.vercel.app.
Every deploy shows up here. You can see when each version went live and who pushed it.
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).
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.
If your build fails, don't panic. Click on the failed deployment to see what went wrong. These are the usual suspects.
package.json is correctMake sure Vercel has permission to see it. Go to Settings > Git Integration and adjust the GitHub permissions.
If your site looks different than you expected, check that Vercel detected the right framework. You can change that in your project settings.
your-project.vercel.appYou've deployed to production. Now, what about testing changes BEFORE they go live? That's where preview deployments come in...