MODULE 4.1 / 4 OF 4
Vercel and Supabase: the overview
Know what Vercel and Supabase do and how your repository connects to them as the project grows.
1What Vercel does
git add .
git commit -m "new version"
git push
What you see: Once connected, each push creates a new deployment on Vercel with its own URL.
What it is
Vercel publishes websites and apps directly from your GitHub repository. It's the next step after Pages when your project grows beyond a simple page.
Why learn it
It runs code on the server, supports custom domains, and shows a preview of each change before it goes live.
Key concepts
Hosting: where a website is kept online. Deploy: publishing a version. Preview: a temporary URL to check a change.
2Connect the repository to Vercel
gh repo view --web
What you see: The repository opens in your browser; in Vercel, Add New → Project → Import shows your list of repositories.
What it is
Sign in to vercel.com with your GitHub account, click Add New → Project, and import the repository. Vercel detects the project type and publishes it.
Why learn it
You only connect it once. After that, you don't need to open Vercel to publish.
Key concepts
Import: giving Vercel read access to the repository. Framework: the project type (simple page, Next.js, and others), which Vercel detects automatically.
3Each push publishes
git push
What you see: In Vercel, the Deployments list gets a new entry with each push.
What it is
Once the repository is connected, keep using the same routine from part 2: add, commit, push. Vercel publishes automatically.
Why learn it
You don't need to learn a new tool to publish: Git is still the gateway.
Key concepts
Automatic deployment: the service watches the repository and publishes when a new version arrives. Main branch: the one that goes to the official URL.
4Custom domain
nslookup yourdomain.com
What you see: The IP address your domain points to.
What it is
In Vercel's Settings → Domains, add your domain. Vercel will show the DNS record to configure wherever you bought the domain.
Why learn it
It replaces the .vercel.app address with your brand name.
Key concepts
Domain: the website's name (yourbusiness.com). DNS: the list that says where each domain points. nslookup: a lookup of where a domain points right now.
5What Supabase does
type .gitignore
What you see: The contents of the project's .gitignore (if it doesn't exist, the next step creates it).
What it is
Supabase gives your project a database, user login, and file storage without requiring you to install a server.
Why learn it
It turns a page into a system that can save contacts, orders, and registrations.
Key concepts
Database: where records are stored. Login (authentication): identifying the user. Project key: the password your code uses to communicate with Supabase.
6Keep keys out of the repository
echo .env>>.gitignore
type .gitignore
What you see: .env appears in the .gitignore list. Then ask the agent: Create a contact form that saves to Supabase; read the keys from the .env file and never write them in the code.
What it is
Supabase keys go in a .env file, and .gitignore prevents Git from sending that file to GitHub.
Why learn it
A published key is a leaked key: anyone can use your database. In a public repository, this can happen within minutes.
Key concepts
.env: a file with the project's keys and passwords. .gitignore: a list of what Git doesn't send. Environment variable: a way to pass a key to a program without writing it in the code.
HANDS-ON / ~10 MIN
Your next-step map
Check each item when it actually works on your computer, not when you finish reading.
Cheat sheet for part 4
git add .
git commit -m "new version"
git push
gh repo view --web
git push
nslookup yourdomain.com
type .gitignore
echo .env>>.gitignore
type .gitignore
Done criteria
Know what Vercel and Supabase do and how your repository connects to them as the project grows.
Review what you learned
You want a form that saves the contacts it receives. Can GitHub Pages do that on its own?
View the explained answer
No. Pages only displays pages. Saving data requires a database, such as Supabase, and usually hosting such as Vercel.