Web Hosting

“Hosting” just means: a computer that’s always on, connected to the internet, serving your files when DNS sends visitors its way. The interesting part is the spectrum — from a shared box to no server at all.

⏱ ~15 min · 🟡 Intermediate · Prerequisites: Lectures 1–3

🎯 What you’ll be able to do

Place any host on the spectrum: shared → VPS → dedicated → cloud → serverless → static
Explain the difference between static and dynamic hosting (and why it matters for cost)
Understand why you moved your frontend from Hostinger to Cloudflare — and what it cost (nothing)

The mental model

A website is just files (HTML/CSS/JS) and sometimes code that runs (your backend). Hosting answers: whose computer do those files live on, and how much of that computer is yours?

Less yours / cheaper / simpler  ───────────────►  More yours / pricier / more control
   Static    Shared    Serverless    VPS    Dedicated    Cloud (mix of all)

The hosting spectrum

Type	What you get	Analogy	Good for
Shared	A slice of one server, shared with strangers	A bed in a hostel	Cheap small sites (old Hostinger plans)
VPS	A guaranteed virtual slice, root access	Your own studio apartment	Apps needing control, predictable load
Dedicated	A whole physical machine	Owning the house	Heavy, specific workloads
Cloud (AWS/GCP)	Rent any amount, scale on demand	Utilities — pay for what you use	Production apps at scale (your backend)
Serverless (Lambda/Workers)	Just upload functions; no server to manage	Pay-per-ride taxi	Spiky/event-driven workloads
Static / JAMstack	A CDN serves prebuilt files	A billboard — print once, everyone sees it	Frontends, docs, blogs (this site!)

Before you read on, decide where each thing should run:

Static vs dynamic — the key split

STATIC  ── files are prebuilt ──►  CDN just hands them out
          (React build output, this Docusaurus site, a landing page)
          ✅ cheap/often free  ✅ blazing fast  ✅ scales infinitely
          ❌ no per-user server logic at request time

DYNAMIC ── a server runs code per request ──►  builds the response live
          (your Node/DB backend deciding what each user sees)
          ✅ personalized, live data   ❌ needs a running server (costs, scaling)

This is exactly your frontend move

Your React frontend is static — npm run build produces plain files. A static host (Cloudflare Pages) serves them from a global CDN for free, faster than a shared server ever could. That’s why moving the frontend Hostinger → Cloudflare was a pure win: same files, better delivery, lower cost. Your backend (which runs code + talks to a database) still needs a real dynamic host — those are different problems.

How a request reaches your host

Tying lectures 1–3 together:

1. DNS:  ayrisglobal.com → an A record → host's IP (or CNAME → Cloudflare Pages)
2. The host receives the request on port 443
3a. Static host:  finds the prebuilt file, returns it
3b. Dynamic host: runs your code, queries the DB, builds HTML/JSON, returns it

The DNS record type you set depends on the host: an IP → A record; a platform hostname (like your-app.pages.dev) → CNAME. The host’s docs always tell you which.

Where modern frontends actually live

Platform	What it is	Cost
Cloudflare Pages	Static + edge functions, global CDN	Generous free tier
Vercel	Static + serverless, Next.js’s home	Free hobby tier
Netlify	Static + functions	Free tier
GitHub Pages	Static only, from a repo	Free

These deploy straight from a Git push — commit, and it’s live. That’s the modern default for anything frontend.

⚠️ Common misconceptions

Myth	Reality
”Serverless means no servers.”	Servers exist — you just don’t manage them. You pay per execution.
”A static site can’t have dynamic features.”	It can — via API calls from the browser to a separate backend, or edge functions.
”Cloud is always cheaper.”	Cloud is elastic. Idle-but-always-on workloads can be pricier than a fixed VPS.
”I must host the frontend and backend together.”	Common to split: static frontend on a CDN, backend on cloud/VPS. Yours is split.

🧪 Try it yourself

# What does the response tell you about the host? Look at the Server / CF-* headers.
curl -I https://ayrisglobal.com

# See whether a name points at an IP (A) or another host (CNAME)
dig ayrisglobal.com A
dig www.ayrisglobal.com CNAME

A cf-ray or server: cloudflare header is a dead giveaway that Cloudflare is in front of the host.

Check Yourself

What's the difference between static and dynamic hosting?

Static serves prebuilt files as-is (fast, cheap, scales freely) — no per-request code. Dynamic runs code on a server for each request to build a personalized/live response — more powerful but needs a running, scaling server.

Why was moving your React frontend from Hostinger to Cloudflare a clear win?

The frontend is static build output. A CDN-backed static host (Cloudflare Pages) serves it globally, faster, and free — strictly better than a shared dynamic host for files that don’t change per request.

When you point a domain at a host, when do you use an A record vs a CNAME?

A record when the host gives you an IP address; CNAME when it gives you a hostname (like app.pages.dev). The host’s setup docs specify which.

Does "serverless" mean there are no servers?

No — it means you don’t manage them. The provider runs your functions on their servers and bills per execution/time.

When would a fixed VPS actually beat the cloud on cost?

When the workload is always-on but steady — no big spikes. Cloud’s value is elasticity; if you never scale up and down, you pay a premium for flexibility you don’t use. A right-sized VPS at a flat monthly price is cheaper for predictable, constant load.

Why is serverless a poor fit for a backend that must respond instantly and constantly?

Serverless shines for spiky, idle-most-of-the-time work. A constantly-hit backend means functions are always running anyway (so you lose the pay-per-run savings), and cold starts can add latency to the first call after idle. Steady, always-on load is better served by a VPS or cloud compute that stays warm.

You see `cf-ray` and `server: cloudflare` in a response's headers. What does that tell you?

Cloudflare is sitting in front of the real host — as a CDN/proxy. The request hit Cloudflare’s edge first; it either served a cached/static file itself or forwarded to your origin host behind it. It does NOT tell you what the origin host is.

📚 Resources

🟢 Cloudflare — What is web hosting: cloudflare.com/learning/cdn/what-is-web-hosting
🟢 Cloudflare Pages docs: developers.cloudflare.com/pages
🟡 The JAMstack explained: jamstack.org
🔴 AWS — types of cloud computing (IaaS/PaaS/serverless): aws.amazon.com/types-of-cloud-computing

🧾 Key terms

Shared / VPS / Dedicated · how much of a machine is yours · Cloud · elastic rented compute · Serverless · managed pay-per-run functions · Static / JAMstack · prebuilt files on a CDN · Dynamic · code runs per request · Deploy · push files/code live.

One-line summary

Hosting = whose always-on computer serves your files, and how much of it is yours. Static frontends belong on a free CDN host; dynamic backends need real elastic compute. DNS points visitors to whichever you chose.

Still Unclear?

Paste one of these into Claude and push until it clicks:

“I have a React frontend and a Node + Postgres backend. Walk me through which hosting type each should use and why, as if I’m deciding for a real small product on a tight budget.”
“Give me a decision flowchart: starting from a website idea, what questions do I ask to land on shared vs VPS vs serverless vs static vs cloud? Explain each branch.”
“Explain serverless cold starts to me with a concrete timing example, and tell me which of my workloads should NOT be serverless because of them.”

Why AI Can’t Do This For You

AI can list the hosting types — but the actual skill is judgment under constraints: matching a real workload’s shape (traffic pattern, budget, how much control you need, static vs dynamic) to the right host, and owning the bill when you guess wrong. You only build that instinct by deploying your own projects, watching what they cost and how they fail, and learning why your frontend belongs on a free CDN while your backend doesn’t. A prompt can’t feel the trade-off; you have to live one.

Module done? Add it to today’s tracker