Episode 1 — Fundamentals / 1.2 — Client Server Architecture
1.2.g — What is Web Hosting and How It Works
Big Picture: A website is files and programs on a computer that stays online. Web hosting is how you rent space on a server so the world can reach your site 24/7 — usually together with a domain name and DNS so people do not have to memorize IP addresses.
Navigation: ← 1.2.f — Static vs Dynamic Websites · Episode 1 — Fundamentals →
1. What is Web Hosting?
Web hosting means renting space on someone else’s server (or on a pool of servers) so you can store your website’s files — HTML, CSS, JavaScript, images, server-side code, databases — and make them accessible on the internet around the clock.
| Idea | Plain English |
|---|---|
| Not buying the machine | You pay a hosting provider to run hardware in a data center, keep it powered, cooled, and networked. |
| Always-on | The server stays connected 24/7 so visitors can open your site anytime (measured by uptime). |
| Public reachability | The host gives you a public IP (or a hostname behind a load balancer / CDN) so browsers worldwide can request your pages. |
| Bundled extras | Plans may include email, backups, SSL, control panels, databases, or one-click installs — depends on the product. |
One-line definition: Web hosting is paying for reliable, internet-connected server space where your site lives and answers HTTP(S) requests.
2. How Web Hosting Works
You upload (or deploy) your files to the host. The server stays on the internet 24/7. When someone types your domain, DNS resolves it to your server’s IP address (or CDN target). The browser sends an HTTP(S) request; the server returns your files (or runs your app and returns a response).
┌─────────────────────────────────────────────────────────────────────────┐
│ HOW WEB HOSTING WORKS (END-TO-END) │
└─────────────────────────────────────────────────────────────────────────┘
YOU HOSTING PROVIDER
─── ─────────────────
│ 1. Upload website files
│ (FTP/SFTP, Git, panel, CI)
▼
┌──────────────┐ ┌────────────────────────────────────┐
│ Your site │ ────────────▶ │ SERVER (24/7 on the internet) │
│ files / app │ stored on │ Web server + your content │
└──────────────┘ └───────────────────┬────────────────┘
│
│ always connected
▼
┌───────────────┐
│ INTERNET │
└───────┬───────┘
│
VISITOR │
─────── │
│
Types "yoursite.com" │
│ │
▼ │
┌─────────────┐ 2. DNS: domain → IP ┌────────▼─────────┐
│ Browser │ ──────────────────────────▶ │ DNS returns host │
│ │ lookup │ server IP (or CDN) │
└──────┬──────┘ └───────────────────┘
│
│ 3. HTTP(S) request (e.g. GET /)
└──────────────────────────────────────────┐
▼
┌────────────────┐
│ Server sends │
│ files / response│
└────────┬───────┘
│
┌───────────────────────────────────────────┘
▼
┌─────────────┐
│ Browser │ 4. Renders the page
└─────────────┘
Mental model: The host gives your site a reachable address on the internet; DNS is the directory that maps your human-readable domain to that address; the web server is what fulfills each request.
3. Types of Web Hosting
At a glance
| Type | Analogy | Typical cost | Best when you… |
|---|---|---|---|
| Shared | Apartment building | ~$2–15/mo | Are new, have a small site, want low cost. |
| VPS | Condo | ~$5–80/mo | Need more control or predictable resources. |
| Dedicated | Own house | ~$80–300+/mo | Need full hardware, high load, or policy reasons. |
| Cloud | Hotel chain | Pay-as-you-go | Need elastic scale, many regions, rich services. |
| Managed | Property manager + building | Premium | Want the provider to run updates, backups, tuning. |
| Serverless | On-demand kitchen | Free tier + usage | Want no servers to patch; code runs when called. |
| Static | Bulletin boards everywhere | Free / very cheap | Ship pre-built HTML/CSS/JS (and assets) only. |
3.1 Shared Hosting
What it is: Multiple websites on one server, sharing CPU, RAM, and disk I/O. Each tenant has an isolated account, but the machine is still one shared pool.
| Typical cost | About $2–15/month (intro promos vs renewal differ a lot). |
| Analogy | Apartment building — one building, many units; shared walls, plumbing, and elevators. |
| Pros | Cheap, easy onboarding, control panels (cPanel/Plesk), one-click WordPress, often email included. |
| Cons | Noisy neighbor risk, limited peak performance, little root control, scaling often means upgrading plan or migrating. |
| Good for | Beginners, small sites, low-traffic blogs, brochure sites. |
| Example providers | Hostinger, Bluehost (also SiteGround, DreamHost, and many others). |
3.2 VPS (Virtual Private Server)
What it is: One physical server runs several virtual machines. You get dedicated slices of CPU/RAM/storage (plan-dependent) and usually root access to your VM.
| Typical cost | Roughly $5–80/month depending on cores, RAM, SSD, and bandwidth. |
| Analogy | Condo — your own unit and locks inside a larger building; clearer boundaries than a dorm room. |
| Pros | More control than shared, more predictable resources, run custom stacks, resize to bigger VMs. |
| Cons | You administer more (updates, firewall) unless you buy managed VPS; still shared physical node if hardware fails. |
| Good for | Growing sites, small APIs, staging servers, learning Linux and deployment. |
| Example providers | DigitalOcean, Linode (Akamai), Vultr, Hetzner Cloud. |
3.3 Dedicated Server
What it is: You rent an entire physical machine — all CPUs, RAM, and disks are yours. The provider houses it and connects it; you configure software (or pay for managed dedicated).
| Typical cost | Often $80–300+/month (GPUs, premium networks, or enterprise SLAs cost more). |
| Analogy | Your own house — full plot; no upstairs neighbor thumping the floor. |
| Pros | Strong performance for that box, full control, predictable (no other customer’s VM on the same CPU). |
| Cons | Expensive, you operate patching/hardening unless managed, scaling is a bigger step (new server / migration). |
| Good for | High traffic, large databases, gaming/voice hosts, enterprise workloads with specific needs. |
| Example providers | OVH, Hetzner (dedicated lines), plus many enterprise hosters. |
3.4 Cloud Hosting
What it is: Your workloads run on a hyperscale provider’s pool of machines. You use VMs, managed databases, load balancers, and auto-scaling; you pay for what you use (pay-as-you-go) and can span regions.
| Typical cost | Highly variable — tiny dev VMs can be a few dollars a month; production with HA, data transfer, and managed services can run hundreds to thousands. |
| Analogy | Hotel chain — busy night? Allocate more rooms across the network; quiet night? Pay for less. |
| Pros | Elastic scale, global regions, huge catalog of services (IAM, queues, ML, etc.), API-driven automation. |
| Cons | Bill surprises if untracked, security needs real discipline, finops overhead. |
| Good for | Scalable apps, SaaS, APIs, mobile backends, data and ML pipelines. |
| Example providers | AWS, Google Cloud, Microsoft Azure. |
3.5 Managed Hosting
What it is: The provider runs much of the stack and operations for you — updates, security patches, backups, monitoring, sometimes CDN and caching — so you focus on the site or product, not raw servers.
| Typical cost | Premium vs DIY; often tens to hundreds/month per site or environment. |
| Pros | Less ops burden, support from specialists, stacks tuned for WordPress or similar platforms. |
| Cons | Less flexibility than rolling your own, higher price, some platform lock-in. |
| Good for | Business-critical WordPress, agencies with many client sites, teams without dedicated ops. |
| Example providers | WP Engine, Kinsta. |
3.6 Serverless
What it is: No server management for you in the traditional sense. You upload code (or connect a repo); the platform runs it on demand and scales automatically. You do not SSH into a box you “own.”
| Typical cost | Free tiers plus per-invocation, duration, and egress; can be very cheap for low/spiky traffic. |
| Pros | No patching servers, automatic scaling, fast deploys for APIs and frontends paired with the platform. |
| Cons | Cold starts, timeouts, platform limits, state lives in databases/storage you wire separately. |
| Good for | JAMstack backends, event-driven jobs, APIs with unpredictable traffic, preview deployments. |
| Example providers | AWS Lambda, Vercel, Netlify (Functions), Cloudflare Workers. |
3.7 Static Site Hosting
What it is: Hosting meant for static files — HTML, CSS, JS, images — built ahead of time. No classic per-request server-side rendering on the host (optional edge functions are add-ons). Often Git push → build → CDN.
| Typical cost | Often free for personal/small projects or very cheap; watch build minutes and bandwidth caps on free tiers. |
| Pros | Simple mental model, fast global CDN, small attack surface for plain static pages, great DX with Git. |
| Cons | No traditional server session on origin; dynamic behavior needs client JS, serverless, or a separate API. |
| Good for | Docs, landing pages, blogs via static site generators, SPAs with an external API. |
| Example providers | GitHub Pages, Netlify, Vercel, Cloudflare Pages. |
4. Hosting Comparison Table
| Type | Cost (typical) | Performance | Control | Scalability | Technical skill needed |
|---|---|---|---|---|---|
| Shared | $2–15/mo | Variable; shared pool | Low | Limited; plan upgrades | Low — panels & installers |
| VPS | $5–80/mo | Good for the resources you buy | High (root VM) | Medium — resize VM / add nodes | Medium — Linux, SSH, updates |
| Dedicated | $80–300+/mo | Very high per box | Very high | Step changes (new hardware) | Medium–high — unless managed |
| Cloud | Pay-as-you-go | High if architected well | High (IaaS/PaaS) | Very high — autoscaling, regions | Medium–high — IAM, networking, cost |
| Managed | Premium monthly | Good–high (tuned) | Medium | Depends on product | Low–medium — less raw ops |
| Serverless | Usage-based | Excellent for bursty workloads | Medium (platform guardrails) | Very high | Medium — events, limits, cold start |
| Static | Free–low | Excellent via CDN | Low–medium | High via CDN & builds | Low–medium — Git, build config |
Renewals, bandwidth/egress, and support tiers change totals — always read the fine print.
Cost vs control (quick visual)
LOW COST ◄────────────────────────────────────────────► HIGH COST
shared static (free) VPS cloud dedicated
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
LOW CONTROL ◄──────────────────────────────────────► HIGH CONTROL
5. Key Hosting Concepts
| Concept | What it means |
|---|---|
| Uptime | Fraction of time the service is available. 99.9% per year ≈ ~8.7 hours downtime allowed annually (exactly 365.25 × 24 × 0.001 ≈ 8.76 hours). 99.99% is stricter. Real SLAs vary by tier and provider. |
| Bandwidth | Data moved to visitors (especially egress). Video, downloads, or viral traffic can hit limits or extra fees. |
| Storage | Disk for files and databases. SSD/NVMe is usually faster than HDD for web workloads; busy DBs benefit most. |
| SSL/TLS certificates | Enable HTTPS (encryption + identity). Many hosts automate Let’s Encrypt; browsers warn on plain HTTP. |
| cPanel / Plesk | Web control panels for domains, email, files, DBs — common on shared hosting. |
| FTP / SFTP | File upload protocols. SFTP rides on SSH and is encrypted; legacy FTP often is not — prefer SFTP/SCP. |
| SSH access | Secure shell — command-line login to a Linux server. Typical on VPS, cloud VMs, and some advanced plans. |
6. How to Choose a Host
Use your project type first; then narrow by budget, traffic, and how much ops you want.
START: What are you building?
│
┌───────────────────────┼───────────────────────┐
▼ ▼ ▼
Static site / doc WordPress / small Custom app / API
portfolio, blog SSG business brochure needs DB + backend
│ │ │
▼ ▼ ▼
Static host (Git → CDN) Shared or managed WP VPS, PaaS, or cloud
GitHub Pages / Netlify / Hostinger / Bluehost DigitalOcean /
Vercel / Cloudflare Pages or Kinsta / WP Engine AWS / GCP / Azure
│ │ │
└───────────────────────┴───────────────────────┘
│
Need huge scale / multi-region?
│
┌──────────┴──────────┐
▼ ▼
YES NO
│ │
▼ ▼
Cloud + autoscaling VPS or managed tier
(AWS/GCP/Azure) may be enough
| Your situation | Lean toward |
|---|---|
| First site, minimal budget | Shared or free static hosting. |
| WordPress, want less ops | Managed WordPress (e.g. Kinsta, WP Engine) or solid shared. |
| Custom stack, need root | VPS or cloud VM. |
| Spiky or global traffic | Cloud + CDN, or serverless/edge. |
| Mostly pre-built files | Static host + CDN. |
| Compliance / dedicated iron | Dedicated or specific cloud contracts. |
7. Domain + Hosting = Your Website
A domain registrar sells yoursite.com. DNS (at the registrar or a DNS host) points that name to your hosting (A/AAAA to IP, or CNAME to a platform). The visitor only types the domain; DNS and the host do the rest.
┌──────────────────────────────────────────────────────────────────────────┐
│ DOMAIN + DNS + HOSTING — COMPLETE PICTURE (VISITOR VIEW) │
└──────────────────────────────────────────────────────────────────────────┘
┌──────────────────┐
│ DOMAIN REGISTRAR │ Registers "yoursite.com" (yearly fee)
│ (Namecheap, etc.) │ You control renewal & WHOIS privacy
└─────────┬────────┘
│
│ Nameservers → where the zone is hosted
▼
┌──────────────────┐
│ DNS HOSTING │ Records: A, AAAA, CNAME, MX, TXT…
│ (Registrar, │ e.g. www → server IP or CDN hostname
│ Cloudflare, │
│ Route 53…) │
└─────────┬────────┘
│
│ Resolves to your hosting endpoint
▼
┌──────────────────┐
│ HOSTING SERVER │ Stores files / runs your app
│ or CDN edge │ Serves HTTPS responses
└─────────┬────────┘
│
│ HTML, CSS, JS, APIs…
▼
┌──────────────────┐
│ VISITOR │ Browser opened yoursite.com → sees your site
└──────────────────┘
Remember: Registration and hosting are different products. Same company is convenient; splitting (domain at A, DNS at B, site at C) is common and valid.
8. Popular Hosting Providers
Prices move constantly — verify renewal, bandwidth/egress, and currency on each site.
| Provider | Ballpark pricing | Model | Best use case |
|---|---|---|---|
| Hostinger | ~$2–12/mo promos (renew higher) | Shared, some VPS | Beginners, budget WordPress, small sites |
| Bluehost | ~$3–15/mo intro bundles | Shared + WordPress focus | Starters, simple business sites |
| DigitalOcean | ~$4–40+/mo Droplets common | VPS (“Droplets”), K8s, PaaS | Devs, startups, predictable VMs |
| Linode (Akamai) | Similar to DO | VPS, Kubernetes | Same profile as DO |
| OVH / Hetzner | VPS from low single digits (region-dependent); dedicated higher | VPS + dedicated | Price-conscious EU/US infra, bare metal |
| AWS | Free Tier for new accounts; then pay-as-you-go | Full cloud | Scale, many services, global |
| Google Cloud | Credits + usage-based | Full cloud | Data, ML, multi-region |
| Azure | Usage-based + enterprise deals | Full cloud | Microsoft ecosystem, hybrid |
| Vercel / Netlify | Free tiers; Pro ~$15–20+/mo per seat/project rules | Static + serverless | Frontends, SSG, preview deploys |
| Cloudflare Pages | Generous free tier; paid for teams/limits | Static + Workers | Static sites + edge logic |
| WP Engine / Kinsta | ~$30–100+/mo per site (plan-dependent) | Managed WordPress | Serious WP, agencies, SLAs |
9. Deploying Your First Website (Brief Overview)
| Step | What you do |
|---|---|
| 1. Buy a domain | Choose a registrar; enable privacy if offered; note nameserver settings. |
| 2. Choose hosting | Match host type to your stack (static vs WordPress vs custom app). |
| 3. Upload or deploy files | SFTP, control panel file manager, Git push, or CI/CD. |
| 4. Configure DNS | Point A/AAAA to the server IP or CNAME to the platform hostname; add MX if email is separate. |
| 5. Enable HTTPS | Install/enable TLS (often one-click); redirect HTTP → HTTPS. |
| 6. Test | Try mobile, another network, and basic checks (SSL, main pages, forms). |
10. Key Takeaways
- Web hosting = renting space on an always-on server so your files/app are reachable on the internet 24/7.
- Flow: upload/deploy → DNS maps domain to host → browser requests → server responds.
- Shared is cheap and easy; VPS adds control; dedicated is whole-machine power; cloud is elastic; managed cuts ops; serverless avoids server babysitting; static hosts excel at fast, cheap file delivery.
- Know uptime, bandwidth, storage (SSD vs HDD), SSL, panels, FTP/SFTP, SSH — they appear on every plan and ticket.
- Domain ≠ hosting: the name (registrar) and the computer (host) connect through DNS.
Explain-It Challenge
Without scrolling back, explain in your own words:
- What web hosting is, using the idea of renting space on a computer that stays online.
- The path from typing a domain to getting a web page, including DNS and the server.
- One pro and one con of shared hosting vs a VPS.
- Why 99.9% uptime still allows roughly ~8.7 hours of downtime per year.
- How static site hosting differs from a classic PHP shared host if you need a contact form that sends email (what changes in your architecture?).
Navigation: ← 1.2.f — Static vs Dynamic Websites · Episode 1 — Fundamentals →
Section 1.2 complete. You have moved from the client–server model through HTTP, the full browser journey, frontend vs backend, static vs dynamic sites, and finally how hosting puts your work on the internet. Return to the episode hub: Episode 1 — Fundamentals.