Deploy to Vercel — Step-by-Step Guide

1

What you need

Two accounts and one folder — that's the entire prerequisites list.

The project folder — the one containing index.html, css/ and js/:

pymastery/
├── index.html (+ learn, modules, practice, playground, setup, deploy)
├── vercel.json
├── css/
│   └── styles.css
└── js/
     ├── main.js · learn.js · modules.js · practice.js · playground.js
     └── data/
         └── lessons.js · modules.js · problems.js

A free Vercel account — sign up at vercel.com (GitHub, email or GitLab login).
For Method 1: Node.js LTS from nodejs.org — install it, then confirm in a new terminal:

Verify Node & npm

node -v
npm -v

Why this deploys so easily: there is nothing to compile. Vercel serves the files exactly as they are, adds HTTPS, a global CDN and a *.vercel.app URL for free.

2

Method 1 — Vercel CLI (fastest)

From zero to a live URL in the terminal, no browser juggling.

Install the Vercel CLI globally:

Terminal

npm install -g vercel

Go to your project folder (the one with index.html):

Terminal

cd path/to/pymastery

Log in — opens the browser once, then remembers you:

Terminal

vercel login

Deploy a preview — answer the prompts like this:

Terminal — vercel (interactive)

vercel

Set up and deploy? Y
Which scope? your-account
Link to existing project? N
Project name: pymastery
In which directory is your code? ./
Want to modify the settings? N
# → "Inspect: https://vercel.com/…/pymastery/…”

Promote it to production — this gives you the real public URL:

Terminal

vercel --prod

Result

Production: https://pymastery.vercel.app [3s]

Open that URL — the site is live. Every page works: curriculum, modules, challenges and the in-browser Python runtime (loaded over HTTPS, which the CDN requires).

3

Method 2 — GitHub + dashboard (auto-updates)

Every git push redeploys automatically. Best for a project you keep improving.

Put the project in a Git repository (skip if you already have one):

Terminal — inside the project folder

git init
git add .
git commit -m "Initial commit — PyMastery site"

Create the repo on GitHub — easiest via the browser at github.com/new (public or private), or with the GitHub CLI:

Terminal — optional GitHub CLI route

gh repo create pymastery --public --source=. --push

If you created the repo in the browser instead, push to it:

Terminal

git remote add origin https://github.com/YOUR-USER/pymastery.git
git branch -M main
git push -u origin main

Import the repo in Vercel — go to vercel.com/new, choose Import next to your repository (grant access the first time).

Confirm the build settings — for this static site they are trivial:

Setting	Value
Framework Preset	Other (nothing to build)
Build Command	leave empty
Output Directory	/ (repository root)
Install Command	leave empty

Press Deploy. Vercel builds in seconds and hands you a *.vercel.app URL. From now on, every git push to main publishes a new production deploy automatically; other branches get shareable preview URLs.

4

vercel.json, explained

This project ships one — here is exactly what each line does.

vercel.json

{
  "cleanUrls": true,
  "trailingSlash": false,
  "outputDirectory": ".",
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ]
}

Key	Meaning
`cleanUrls: true`	Serves `/learn` instead of `/learn.html`. Direct `.html` links keep working, so nothing breaks.
`trailingSlash: false`	One canonical URL per page — avoids duplicate-content SEO issues.
`outputDirectory: "."`	Deploy the folder as-is, no build. (If Vercel ever rejects the file, delete this line — the dashboard default is the repo root anyway.)
`headers`	Small security hardening headers on every response.

Deleting vercel.json entirely also works — Vercel will simply serve the folder with its defaults. The file just makes the behavior explicit and repeatable.

5

Add your own domain (optional)

Turn pymastery.vercel.app into learnpython.com — HTTPS is issued automatically.

In the Vercel dashboard: open your project → Settings → Domains.
Type your domain (e.g. learnpython.com) and press Add.
Vercel shows the DNS records to create. At your registrar:
- Apex domain → an A record pointing to 76.76.21.21
- Subdomain (e.g. www) → a CNAME record pointing to cname.vercel-dns.com
Wait for DNS to propagate (minutes to 24 h) — the certificate is provisioned automatically once it resolves.

6

Updates & redeploys

Changing content later takes seconds.

CLI project — publish changes

cd path/to/pymastery
vercel --prod

GitHub project — publish changes

git add .
git commit -m "Update lesson content"
git push

Task	Command / action
Preview a branch	Push any branch that isn't `main` — you get a preview URL
Roll back	Dashboard → project → Deployments → … → Promote to Production
Rename the project	Settings → Project Name (the URL changes with it)
Unlink this folder	`vercel rm` in the project folder, or remove the integration on GitHub

7

Deploy checklist

Saved in your browser as you tick.

Site works locallypython -m http.server 8099 serves every page Vercel account createdvercel.com sign-in done Code pushed or folder readyeither a Git repo or direct CLI deploy First deployment livethe *.vercel.app URL opens correctly Pyodide loads on the live siteplayground runs code over HTTPS Tested on a phonelayout and navigation feel right on a small screen (Optional) custom domainDNS records added and certificate issued

8

Troubleshooting

Everything below has a one-line fix.

Symptom	Fix
`vercel: command not found`	Reopen the terminal after `npm install -g vercel`, or run it via `npx vercel` instead
Deployed folder shows a file listing / 404	You deployed a parent folder. The directory containing `index.html` must be the project root
Blank page or missing CSS	Check the paths are relative (no leading `/`) — this project already uses relative paths everywhere
Playground never loads the runtime	It needs the jsDelivr CDN — check the browser console. Everything else still works offline of that
“Authentication required” on first CLI run	Run `vercel login` first, then `vercel --prod`
Wrong project linked	Run `vercel link` again inside the correct folder (it creates `.vercel/project.json`)
Old version still showing	Vercel's CDN caches hard — append `?v=2` to test, or wait a few seconds and refresh
Custom domain not securing	Confirm the DNS records exactly as Vercel shows them; apex uses A `76.76.21.21`, www uses CNAME `cname.vercel-dns.com`

That's it. Your copy of PyMastery is live on a free, globally distributed, HTTPS-secured URL — and you deployed it yourself from the terminal. Next stop: the curriculum.