What Is Deploy and Why Vercel
Deploy is the act of publishing your project on the internet so anyone can access it. Until now, your code lived only on your computer (and maybe on GitHub). Deploying means taking that code and putting it on an always-on server, with an address anyone in the world can type into a browser. The Vercel is a platform that does this heavy lifting for you, for free, in a few seconds.
🧠 Analogy: Deploying is Opening the Store to the Public
Imagine you’ve built an entire store inside your home: shelves ready, products arranged, a beautiful display window. But the door is locked, and no one outside knows it exists. Deploying is like opening this door and putting up a sign on the street. Suddenly, anyone who passes by can get in.
- •Your home = your computer (only you can see it)
- •The sign on the street = the public URL (the address)
- •Open the port = the deploy (publish)
- •Vercel = the shopping mall that takes care of all this for you
💡 Why Vercel instead of your own server?
The traditional way would require you to rent a server, install an operating system, configure a web server (Nginx), manage a security certificate (HTTPS), and update everything manually. Vercel does all of that for you in seconds: automatic HTTPS, an update with every git push, and a generous free plan for personal projects. It's the fastest path from code to a live site. (You'll learn to run your own server in Track 3 — that has its place, too.)
Create an Account and Connect GitHub
Before publishing anything, you need a Vercel account and connect it to your GitHub. The good news: you don't even create a password. You sign in with your GitHub account, and Vercel can now "see" your repositories. This is the step that connects the two tools.
Go to the Vercel website
Open your browser and go to the official address.
# In your browser, type:
https://vercel.com
# Click the "Sign Up" button (Create account)
Choose "Continue with GitHub"
You don’t need to create a new password. Use your GitHub login.
When you click, GitHub opens a screen asking you to authorize Vercel. This gives Vercel permission to view your repositories. Click Authorize.
Choose which repositories to grant access to
You decide: all repositories or only the ones you choose.
GitHub asks whether Vercel can access all the repositories or only a few (Only select repositories). To get started, granting access only to the project you want to publish is safer. You can always add more later.
👁 What you’ll see on the screen
After authorizing, Vercel takes you to the Dashboard. It’s a dark screen with the title "Overview" and a big button in the center:
# Vercel Dashboard (first time)
[ + Add New... ] [ Import Project ]
Let's build something new.
Import a Git Repository to get started.
This is the starting point. In the next topic, you’ll click Import is to do the first deploy.
⚠️ Common Error
Problem: "I connected, but my repository doesn’t appear in the Vercel list."
Solution: Almost always, it’s because when authorizing, you chose "Only select repositories" and didn’t include this repo. Go to Vercel → Settings → Git (or directly on GitHub: Settings → Applications → Vercel) and add the repository to the list of allowed repositories. Refresh the page and it will appear.
First Automatic Deploy
Now for the fun part: import the repository and see the site live. You'll click very few buttons. Vercel reads your code, figures out how to build it, and gives you a working URL in seconds. And here's the best part: from now on, every git push updates the site automatically.
Step 1: Import the repository
In the Dashboard, click Add New → Project. Vercel lists your GitHub repos. Find yours and click Import.
# List of repositories in Vercel
meu-portfolio [ Import ]
landing page [ Import ]
Step 2: Check the settings (usually automatic)
Vercel automatically detects the project type. For a simple HTML/CSS site, you don't need to change anything. For frameworks (React, Next.js), it fills in the correct build settings for you.
# Automatically detected:
Framework Preset: Other (static site)
Build Command: (empty — not needed)
Output Directory: ./
Step 3: Click Deploy
Click the blue button Deploy and watch. Vercel shows the build logs in real time.
Running build...
Cloning github.com/voce/meu-portfolio
Installing dependencies...
Build completed in 8s
✓ Deployment Ready
Production: https://meu-portfolio.vercel.app
Step 4: Open your URL
Vercel shows a celebration screen ("Congratulations!") with a button Visit. Click it. Your site is live and accessible from anywhere in the world. Send the link to someone to test it.
🧠 Analogy: The Automatic Conveyor Belt
Think of a factory conveyor belt. You put the raw material (your code) at one end, and the finished product (the live website) comes out the other. You don’t have to assemble anything manually: the conveyor belt does everything. Once configured, it runs on its own: every time you send new code (git push), the pipeline starts, builds the new version, and publishes it. This is called continuous deployment.
💡 Tip: The next deployment is even easier
This whole step-by-step process only happens the first time. Once it’s imported, you never have to go to Vercel to publish again. Just edit your code locally and run:
$ git add .
$ git commit -m "new text on the home page"
$ git push
# Vercel detects the push and updates the site automatically
Preview Deploys: Each Branch Gets a URL
One of Vercel’s most useful features is right here. When you create a branch a new one and open a Pull Request, Vercel automatically publishes a separate version of the site, with its own temporary URL. That way, you can see the change running for real before before changing the official site. Production stays untouched while you test.
👁 What you’ll see in the Pull Request
You create the branch, push it, and open the PR on GitHub. Within seconds, a Vercel bot comments on the PR itself with the preview link:
# Automatic comment on the Pull Request
✓ Vercel
Latest commit deployed to Preview.
Preview: meu-portfolio-git-feature-novo-botao.vercel.app
Inspect: vercel.com/voce/.../deployments
This link is exclusive to that branch. The production URL won’t even know about it.
🌐 Production URL
- •Comes from the branch
main - •Fixed address:
meu-app.vercel.app - •It’s the version the public sees
- •It only changes when you merge into main
🧪 Preview URL
- •Comes from any branch / PR
- •Unique address with the branch name
- •Only you and those reviewing the PR can see it
- •Updates with each new push to the branch
✓ What TO DO
- ✓Test major changes on a separate branch
- ✓Share the preview link for someone to review
- ✓Open the preview on your phone before merging
✗ What NOT to do
- ✗Test everything directly on the branch
main(will go live) - ✗Share the preview link as if it were the final site
- ✗Forget to close or merge old open PRs
Project Settings: Build, Env, and Framework
For most simple projects, Vercel gets everything right on its own. But it's worth understanding three adjustments that you’ll find in Settings: the build command, environment variables, and framework. Knowing where they are can get you out of a lot of trouble when a deploy doesn't work as expected.
Build Command - How to build the site
It’s the command Vercel runs to turn your code into the final website. Plain HTML sites don’t need it. Framework projects do.
# Simple HTML/CSS site:
(leave blank — there is no build)
# React / Vite project:
npm run build
# Where the result goes (Output Directory):
dist
Environment Variables - Project secrets
They're secret values (API keys, passwords, tokens) that you do NOT put in the code. You add them in Settings → Environment Variables, and Vercel injects it at build time without exposing the secret in the repository.
# Example of a variable registered in Vercel:
Name: API_KEY
Value: sk-xxxx... (hidden)
Env: Production, Preview, Development
You’ll dive deep into this in the Module 2.4 - Environment Variables.
Framework Preset - The project type
Vercel recognizes dozens of frameworks and fills in the correct build and output settings for each one. You just confirm.
Next.js → automatic build, zero config
Vite → npm run build, output dist/
Other → static site, no build
⚠️ Common Error
Problem: "The deploy failed with 'Build failed' / the page opens blank."
Solution: Almost always, the Output Directory is wrong (Vercel is looking for the site in a folder that doesn't exist) or you forgot to register a Environment Variable. Open the deploy logs (button View Build Logs), read the last red line, and adjust it in Settings. Then, in Deployments, click the three dots → Redeploy.
Custom Domains
The URL meu-app.vercel.app it works perfectly, but for something professional you'll want your own address, like www.seunome.com. This is the custom domain. You buy the domain from a registrar (Registro.br, Namecheap, GoDaddy) and connect it to Vercel.
Step 1: Add the domain to Vercel
Go to Settings → Domains, enter your domain and click Add.
# In Settings → Domains:
seunome.com [ Add ]
Step 2: Vercel gives you the DNS records
It shows values you need to paste into your registrar’s dashboard (where you bought the domain).
# Copy these records:
Type: A Name: @ Value: 76.76.21.21
Type: CNAME Name: www Value: cname.vercel-dns.com
Step 3: Paste them into the registrar's dashboard and wait
On the site where you bought the domain, go to "Manage DNS" and add the records. Then just wait: DNS propagation takes anywhere from a few minutes to a few hours. Vercel also generates the HTTPS certificate for free, automatically.
🧠 Analogy: DNS is the Phone Book
O DNS and like a giant phone book on the internet. When someone types seunome.com, the browser checks this list to find the "number" (the server) where the site lives. When you paste in DNS records, you’re basically writing in the list: "if someone looks up yourname.com, send them to Vercel." Propagation is how long this new entry takes to reach all the lists around the world.
💡 Tip: Start without buying a domain
You don’t need your own domain to learn or work on personal projects. The URL .vercel.app is free, has HTTPS, and works forever. Buy a domain only when the project is for real (portfolio, business). You can always add one later without redeploying.
🎉 You did it!
If you've made it this far, you know how to take a project from GitHub and put it online with its own URL, branch previews, and even a custom domain. That's modern deployment in action. In the next module, you’ll learn the Supabase, to give your site a database and backend.
📚 Module Summary
Next Module:
2.2 - Supabase: Database in Minutes (give your site a real backend)