The Mental Model
Your code is a letter.
Every deploy follows the same path a letter takes through the postal system. You write it, drop it off, it gets sorted, addressed, and delivered.
You drop your code in. It's sealed and timestamped.
Your code gets built, tested, and packaged for delivery.
It translates "myapp.com" into the actual server location.
It delivers your site from the closest warehouse to the user.
The Commit Chain
Your Messy Desk
Files you're actively editing. Nothing is saved yet.
The Outbox
Files marked for commit. Ready to be sealed.
The Sealed Envelope
A snapshot in time. Permanent and timestamped.
Drop in the Mailbox
Send to the cloud. GitHub receives your code.
The Address Book
It's just a phone book.
When you type "myapp.com" into your browser, it doesn't know where that is. It asks DNS: "What's the IP address for this name?"
DNS translates human-friendly names into machine-friendly numbers. That's it. No magic. Just a lookup table that says "this name lives at this address."
When you "point a domain" to Vercel, you're updating this phone book entry to say: "Send everyone looking for myapp.com to Vercel's servers."
$ dig myapp.com
myapp.com → 76.76.21.21
;; ANSWER SECTION:
Type: A Record
TTL: 300s
Status: NOERROR
A Record
Points a domain directly to an IP address. The most common record type. Like writing a street address in the phone book.
CNAME
Points a domain to another domain. Like saying "John's mail goes to Mary's address." Used for subdomains and aliases.
Nameserver
The phone book itself. Tells the internet which server is responsible for answering DNS queries about your domain.
The Assembly Line
Build
npm run build — compiles your code into optimized static files.
Test
Run checks — does it compile? Do links work? Does it break anything?
Deploy
Ship it — push the built files to production servers worldwide.
▶ Building...
✓ Compiled successfully
✓ Generating static pages (12/12)
▶ Deploying...
✓ Uploaded build artifacts
✓ Production: https://myapp.vercel.app
Common Patterns
✗ Dead Ends
"I'll deploy when it's perfect"
Ship early, fix fast. Perfect is the enemy of live.
"I need a custom server"
Vercel and Netlify handle everything. You don't need to manage servers.
"DNS is too complicated"
It's just a phone book. Name → Address. That's all it does.
"I'll skip version control"
You will lose everything. Git is non-negotiable.
✓ Clean Pipeline
Deploy on every commit
Fast feedback loop. Push code, see it live in 30 seconds.
Use environment variables
Never hardcode secrets. Use .env.local and platform settings.
Check the build logs
They tell you exactly what failed. Read the error, fix the line.
Start with a free tier
Vercel, Netlify, Railway — all free to start. No credit card needed.
The Exercises
Ship your first deployment.
The Repo
Create a GitHub Repository
- →Create a new repo on GitHub
- →Push your project code to it
- →Verify files appear on GitHub
The Deploy
Connect to Vercel
- →Import your GitHub repo in Vercel
- →Wait for auto-deploy to finish
- →Visit your live URL
The Domain
Custom Domain (Optional)
- →Buy a domain (Namecheap, etc.)
- →Add DNS records in Vercel
- →Verify domain is connected
📋 Quick Reference Cheatsheet
Push
git push origin mainDeploy
vercel --prodDNS
A Record → IP