Home / Journal

How to Set Up a Static Website: A Quick Overview

How to Set Up a Static Website: A Quick Overview

A static website is just a set of files — HTML, CSS, maybe a little JavaScript — that a host serves exactly as they are. There's no server-side code running on each request, no database to maintain, and nothing to patch at 2 a.m. That makes static sites fast, cheap (often free), and hard to hack — which is why so much of the modern web, including this very site, runs this way.

Let me walk you through the whole path, start to finish. It's shorter than you'd think.

Step 1 — Build the files

At its simplest, a website is one file: index.html. Create a folder for your project and drop this in it:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Site</title>
  <link rel="stylesheet" href="/style.css" />
</head>
<body>
  <h1>Hello, world.</h1>
  <p>My first static website.</p>
</body>
</html>

A typical small project grows into something like this:

my-site/
├── index.html
├── about.html
├── style.css
└── assets/
    └── logo.png

That's genuinely it — open index.html in a browser and it works. The <link> tag pulls in your styles from style.css, where you control the look:

body { font-family: system-ui, sans-serif; max-width: 720px; margin: 2rem auto; }
h1 { color: #b91c1c; }

Note: For a few pages, hand-writing HTML is perfect. Once you have a blog or dozens of pages, a static site generator — Astro, Eleventy, Hugo, or Jekyll — lets you write content in Markdown and generates the HTML for you. Same end result: plain static files.

Step 2 — Preview it locally

Double-clicking the file works, but to test it like a real site (correct paths, no browser quirks), serve it over http:// from your project folder. If you have Python:

python3 -m http.server

Then open http://localhost:8000. (More ways to do this in A Quick Way to Fire Up a Web Server.)

Step 3 — Put it online (free, with HTTPS)

This is the part that used to be hard and now takes minutes. Several hosts serve static sites free, on a global CDN, with automatic HTTPS:

  • Cloudflare Pages and Netlify — connect a Git repo or literally drag-and-drop your folder; every push (or drop) redeploys automatically. Netlify's drag-and-drop ("Netlify Drop") is the fastest way to go live.
  • Vercel — deploy from a Git repo or its vercel CLI; fast edge network and a generous free tier.
  • GitHub Pages — serves a site straight from a GitHub repository, for free.

Pick one, point it at your folder or repo, and you'll get a live URL like your-site.pages.dev in under a minute. No servers to rent, no SSL certificates to install — the host handles all of it.

Step 4 — Add your own domain

To use a custom domain, add it in your host's dashboard and update your domain's DNS — usually a CNAME record pointing your domain at the host (e.g. your-site.pages.dev). The host provisions the HTTPS certificate automatically, and within minutes your site answers on your own name.

That's the whole loop

Build → preview → deploy → (optional) domain. Edit a file, push or re-upload, and your changes are live worldwide seconds later. No patching, no database backups, no surprise bills.

If you want the deeper "why" — how static-on-the-edge hosting actually works and why it's faster and safer than the old server-and-database setup — read Hosting on the Edge: Why This Site Has No Server.

Hope this helps — now go ship something!

← All articles