Static Site Deployment

Introduction

Your HTML files work locally, but the web expects HTTP. Deployment means putting your static files on a server or hosting platform so anyone can visit them with a URL. This chapter compares local preview, static hosts, and Nginx on Linux, plus MIME types, 404 pages, and caching basics.

Prerequisites

• HTML project structure and formatting
• How web pages work
• Project: small static site

Local File vs HTTP Server

Opening a file directly:

file:///Users/you/my-site/index.html

Problems:

• paths behave differently than on a real site
• some features (modules, fetch, certain APIs) may fail
• share URLs are impossible

Serving over HTTP:

http://127.0.0.1:5500/index.html

Use Live Server, npx serve, or Python's built-in server while developing:

# Serve current directory
npx serve .
 
# Python 3
python3 -m http.server 8000

Then open http://localhost:8000/.

What Static Hosting Needs

A static deploy is usually:

1. Upload HTML, CSS, JS, images, and fonts.
2. Point a domain at the host.
3. Ensure index.html is at the site root (or configured default).
4. Serve correct MIME types for each file extension.

No database or Java server is required for pure static sites.

GitHub Pages (Concept)

Good for portfolios and docs:

1. Push site files to a GitHub repository.
2. Enable Pages in repository settings.
3. Choose branch and folder (/root or /docs).
4. Visit https://username.github.io/repo-name/.

Watch relative paths if the site is served from a subpath:

<!-- May need a base path or absolute paths from site root -->
<link rel="stylesheet" href="/my-repo/css/styles.css">

Read the host docs for project pages vs user/org sites.

Netlify and Vercel (Concept)

Both support drag-and-drop or Git-connected deploys:

They provide HTTPS, CDN, and preview URLs for branches. Forms and server logic need serverless functions or external services.

Nginx on Linux

For a VPS, Nginx can serve files directly. See also Linux and Nginx topics in the Linux track.

Minimal site config idea:

server {
    listen 80;
    server_name example.com;
    root /var/www/my-site;
    index index.html;
 
    location / {
        try_files $uri $uri/ =404;
    }
}

Place built files in /var/www/my-site/:

/var/www/my-site/
├── index.html
├── about.html
├── css/
├── js/
└── images/

Reload Nginx after config changes. Use HTTPS (Let's Encrypt) in production.

MIME Types

Browsers use MIME types to interpret files:

Wrong MIME type symptoms:

• CSS downloads instead of applying
• JavaScript shown as plain text
• images fail to render

Major hosts configure common types automatically. Custom servers may need explicit types blocks.

Custom 404 Page

When a URL is missing, return a helpful page:

Host configuration varies:

• GitHub Pages: 404.html at root
• Netlify/Vercel: 404.html in publish directory
• Nginx: error_page 404 /404.html;

Caching Basics

Browsers cache static files to speed repeat visits. Servers send headers like:

Cache-Control: max-age=3600

For HTML you are actively editing, short cache or no cache helps you see updates. For hashed asset filenames (app.a1b2c3.css), long cache is safe because the URL changes when content changes.

As a beginner:

• hard refresh after deploy (Cmd+Shift+R / Ctrl+Shift+R)
• check DevTools Network Disable cache while debugging
• purge CDN cache if your host uses one (production issue)

Pre-Deploy Checklist

• All internal links work
• Images and CSS return 200 in Network panel
• Unique <title> per page
• meta description on important pages
• favicon present (optional)
• 404.html exists (optional)
• No references to localhost in production HTML
• HTTPS enabled on production domain
• Case-sensitive paths match uploaded file names

Mini Exercise

Deploy your chapter 35 site to one free static host:

1. Zip or push the project folder.
2. Deploy and note the public URL.
3. Open every page from the live URL.
4. Fix any broken asset paths.
5. Share the link and confirm Open Graph preview if you added OG tags.

FAQ

Do I need Node.js to deploy static HTML?

No for plain HTML. You only need Node if you use a build tool or dev dependencies locally.

Why does my site work locally but not online?

Common causes: wrong relative paths, wrong base path on GitHub Pages, missing files in upload, or case mismatch (About.html vs about.html).

Can I host only HTML without a domain?

Yes. Hosts give you *.github.io, *.netlify.app, or similar URLs.

Does deployment include forms?

Static hosting serves files. Forms need a backend, form service, or serverless handler.

What comes next?

HTML resources and book recommendations — where to learn more after this track.