Web Dev Academy Hosting & deployment · Vercel, Netlify & Cloudflare Tool 57 / 64
Hosting & deployment

Vercel, Netlify & Cloudflare

Push to Git, and your site is built and served from a global edge network seconds later. These platforms turn deployment into a single git push.

Demo 01

The three platforms at a glance

All three give you Git-connected deploys, a global CDN, free HTTPS and preview URLs — but each leans somewhere different. Pick one to highlight what it's known for.

Demo 02

From git push to live — watch the pipeline

This is the magic. You push code; the platform clones it, installs deps, runs your build, then ships the static output to edge regions worldwide. Hit deploy to watch a simulated build log stream.

idle
$ awaiting push…
# The whole deploy is literally just:
git add -A
git commit -m "new feature"
git push origin main   # ← Vercel/Netlify/CF build & deploy automatically
Demo 03

Lighting up the edge network

After the build, your assets are copied to data centers around the globe so every visitor is served from the node nearest them. Deploy in Demo 02 to watch the regions go green here.

US-West US-East São Paulo London Frankfurt Tokyo Sydney Mumbai
Demo 04

Configuration as code

Beyond zero-config, each platform reads a small config file from your repo for redirects, headers, build commands and serverless functions. Same idea, slightly different filenames.

// vercel.json — Vercel
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
# netlify.toml — Netlify
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to   = "/index.html"
  status = 200
Demo 05

What you get for free

The reason these took over: a huge amount of production infrastructure, configured for you, at no cost for hobby projects.

🌍

Global CDN

Assets cached at the edge in hundreds of cities.

🔒

Automatic HTTPS

Free SSL certs, auto-renewed, on every domain.

🔀

Preview deploys

Every pull request gets its own live URL.

Edge / serverless functions

Run backend code without managing servers.

↩️

Instant rollback

Every deploy is immutable — revert in one click.

📊

Analytics & logs

Real-user metrics and function logs built in.

i
The platform cards, the build log, the deploy pipeline and the edge-region world map are all simulated with vanilla JavaScript running in your browser — the real Vercel, Netlify and Cloudflare platforms run their builds and serve traffic from machines in the cloud. The config snippets and the git push flow are real. The shared CSS shell provides page styling.

↑ All 64 tools