Deployment and Custom Domains

From localhost to yoursite.me

contain

The Three Parties

When your site is live at yourname.me, three different companies are doing three different jobs:

Role What it does Examples
Registrar Sold you the name Namecheap, GoDaddy
DNS Maps name to server address Namecheap, Cloudflare
Host Runs your actual code Vercel, GitHub Pages

The registrar and DNS provider are often the same company, but they don't have to be.

A House Analogy

  • Registrar = the city that issued your street address ("123 Main St")
  • DNS = the post office's address book (how mail finds "123 Main St")
  • Host = the actual house where you live (where visitors show up)

Buying a domain only gets you the address. You still need a house (host), and the address book (DNS) has to point to it.

Path A: GitHub Pages

GitHub Pages (Recap)

Two flavors:

  • User site: push to a repo named yourusername.github.io
    • URL: https://yourusername.github.io
  • Project site: push to any repo, enable Pages in Settings
    • URL: https://yourusername.github.io/repo-name

Good for: static HTML/CSS/JS, portfolios, Mini Projects #1 and #2.

Not good for: anything that needs a server (hiding API keys, database, Next.js).

Path B: Vercel

Why Vercel?

  • Serves static sites (like GitHub Pages) and has a real server behind it
  • Lets you set environment variables to hide API keys
  • Auto-deploys every time you git push
  • Free forever for personal projects

If your app calls an LLM API or needs to hide a key, you need Vercel (or Render, or similar).

Deploy to Vercel in 5 Steps

  1. Go to vercel.com, click Sign Up, choose Continue with GitHub
  2. On the dashboard, click Add New... → Project
  3. Pick the GitHub repo you want to deploy
  4. (If needed) Add Environment Variables for API keys
  5. Click Deploy

What you should see: a confetti animation, then a URL like your-app-abc123.vercel.app. Click it and your site is live.

Every future git push to main redeploys automatically.

A Note on Environment Variables

In your code:

const apiKey = process.env.OPENAI_API_KEY;

In the Vercel dashboard:

  • Settings → Environment Variables
  • Name: OPENAI_API_KEY, Value: sk-..., Environment: Production
  • Redeploy after adding

Your code reads the key on the server, so the browser never sees it.

Custom Domains

Do You Even Need One?

Skip it if:

  • You just need something working for Demo Day
  • yourproject.vercel.app is fine for a class demo or job application
  • You don't want to deal with DNS waiting

Get one if:

  • You want a personal brand URL for your portfolio
  • You want a memorable link to share
  • You enjoy figuring out how things work

A custom domain is nice-to-have, not required for this course.

Free Domain via Student Pack

The GitHub Student Developer Pack gives you 1 free year of a .me domain from Namecheap.

Steps:

  1. Apply at education.github.com/pack (approval takes hours to days)
  2. Once approved, claim the Namecheap offer
  3. Create a Namecheap account
  4. Search for a .me name, add to cart, check out (free with coupon)

Namecheap auto-renews after 1 year. Turn off auto-renew if you don't plan to pay.

Binding the Domain: Overview

Two sides to configure:

  • On Vercel: "Here's the name I want to use for this project"
  • On Namecheap: "Here's which host this name should point to"

It's cleaner to add the domain on Vercel first, because Vercel will tell you exactly which DNS records to add.

Step 1: Tell Vercel About the Domain

  1. Open your Vercel project
  2. Go to Settings → Domains
  3. Type yourname.me (or www.yourname.me), click Add
  4. Vercel will say "Invalid Configuration" - expected at this point
  5. Below the error, Vercel shows the DNS records you need to add

What to copy: an A Record (@ → 76.76.21.21) for the apex, or a project-specific CNAME for www (Vercel shows something like xxxx.vercel-dns-017.com - use exactly what Vercel gives you).

Step 2: Add DNS Records at Namecheap

  1. Log in to Namecheap → Dashboard
  2. Find your domain, click Manage
  3. Go to the Advanced DNS tab
  4. Delete any default "parking page" records
  5. Click Add New Record, enter the records Vercel gave you
  6. Click the green checkmark to save

What you should see: your new records listed, with "Type: A Record" or "Type: CNAME Record" and values from Vercel.

The Waiting Game

DNS changes don't take effect instantly.

  • Best case: 5 to 10 minutes
  • Typical: 30 minutes to a few hours
  • Worst case: up to 48 hours

While you wait:

  • Vercel re-checks every minute or so
  • Once it sees your DNS records, the red "Invalid" turns green "Valid"
  • Then Vercel auto-issues a free SSL certificate (another ~1 min)
  • Finally, https://yourname.me loads your site

Don't panic at minute 10. Go get coffee.

How to Check Progress

Is DNS propagated?

  • Visit whatsmydns.net, enter your domain, check the A record
  • Or in a terminal: nslookup yourname.me
  • You should see Vercel's IP (76.76.21.21)

Is Vercel happy?

  • Refresh the Domains page in your Vercel project
  • Status should turn from "Invalid Configuration" to "Valid Configuration"

Common Issues

"Invalid Configuration" that won't go away
Your DNS records don't match what Vercel asked for. Double-check the type (A vs CNAME) and value.

Still seeing a Namecheap parking page
You forgot to delete the default "URL Redirect" or "CNAME" records Namecheap added. Delete them.

Site loads, but no HTTPS / "Your connection is not private"
Vercel is still issuing the SSL cert. Wait 5 more minutes.

Typed the wrong domain
Remove it from Vercel and start over. No real damage.

Recipe Card

Deploy + Domain in 10 Lines

1.  Push code to GitHub
2.  vercel.com → Sign in with GitHub
3.  Add New Project → pick repo → Deploy
4.  (Optional) Add env vars → Redeploy
5.  Get education.github.com/pack approved
6.  Claim Namecheap .me domain
7.  Vercel → Settings → Domains → Add yourname.me
8.  Copy the DNS records Vercel shows you
9.  Namecheap → Advanced DNS → paste records, save
10. Wait, check DNS, celebrate.

Bookmark this slide.

Plan B If Something Breaks

  • Deployment broken? Keep your yourname.vercel.app URL and submit that for Demo Day
  • Domain not resolving by Demo Day? Submit the vercel.app URL, fix the domain later
  • Nothing works? Submit the GitHub repo URL with screenshots

A working vercel.app URL is a real URL. The custom domain is bonus.

References

Questions?

Ask in class, at office hours, or by email.

Remember: custom domain is optional. Your vercel.app URL already works.