Static site hosting for beginners

You do not need to become a “DevOps person” first

Beginners often meet static site hosting through a fog of adjacent terms: JAMstack, CDNs, SSG, CI, SPA. Only one idea is mandatory at the start: your website is a folder of files, and hosting makes that folder available at an https:// address.

This guide is a narrative path from “I have HTML” to “people can open it,” using StaticHost as the concrete host. It stays honest about limits so you do not learn magic that fails later.

Scene 1: The folder

Create a folder named my-site. Inside it, create index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello</h1>
    <script src="script.js"></script>
  </body>
</html>

Add a small styles.css and script.js. If you can open index.html and see your heading, you already have a static site. Generators like Hugo only automate making many such files; they are optional. See HTML hosting for beginners for a longer HTML-only onboarding.

Scene 2: Why “static”

Static means the server does not build the page per visitor. It sends the file. That is enough for resumes, portfolios, class projects, and landing pages. It is the wrong tool for a full WordPress blog with plugins running on the server—use a PHP host for that runtime.

Scene 3: First publish on StaticHost

Sign up. There is a short trial (~1 day), then paid plans—no forever-free tier. Starter at $9/mo gives 1 site and 2 GB, which is plenty for early projects.

Zip the *contents* of my-site (the files themselves), not the parent directory that only contains my-site. Upload the zip. Open the HTTPS preview link as soon as it appears. You should see “Hello.”

If you see a directory oddity or 404 at /, you probably nested the folder in the zip. Fix: zip a static site without 404.

Scene 4: The rule that surprises beginners with apps

If you later use React or Vue tutorials that talk about pretty URLs like /dashboard, know this: StaticHost returns 404 for paths that are not real files. The server uses try_files $uri $uri/ =404. Tutorials written for platforms with SPA fallback hide that. Here, use hash routes or generate real files. Bookmark host a single-page application for the day you need it. On day one with plain HTML, you can ignore routers entirely.

Scene 5: Changing something

Edit locally. Zip again (or use GitHub if you are ready—git deploy, remembering the host never runs npm for you). Deploy. Preview. If the new version is wrong, roll back in deploy history. That safety net is why beginners should still prefer a real host over overwriting files blindly on random student hosting.

Scene 6: Your own domain

Buy a domain from any registrar. In StaticHost, add the domain and create the DNS records it shows. When DNS verifies, a certificate is issued for HTTPS on that name. Until then, share the preview URL. Mixed content notes: free SSL guide.

Scene 7: Growing without drowning

When one site is not enough—client work, staging, class plus portfolio—look at Pro ($30: 3 sites, 10 GB, staging), Scale ($65: 10 sites, 30 GB), or Business ($130: 30 sites, 100 GB, teams). You still will not get email or cPanel on this product; keep expectations file-shaped.

complementary reading: what static hosting is, how to put an HTML website online, free vs paid.

Beginner mistakes worth naming early

Uploading the project folder that contains node_modules and source instead of the build output.
Expecting the host to run npm install.
Linking CSS as C:\Users\…\styles.css.
Announcing the custom domain before the certificate exists.
Following an SPA tutorial’s deploy section written for a different vendor’s redirects.

Avoid those and hosting feels calm. The calm is the feature.

A realistic week shipping static site hosting for beginners

Monday starts with a broken relative CSS path that only appears once the files leave a designer’s laptop. You flatten the zip so index.html sits at the archive root, redeploy to StaticHost, and HTTPS preview finally matches local intent. nginx behaves like try_files $uri $uri/ =404 with no SPA index fallback.

Wednesday adds a custom domain. DNS is created exactly as the dashboard specifies; verification lags an hour; the certificate appears afterward. Someone asks whether email is included—you point them at a mail vendor and keep MX untouched. Preview HTTPS is available immediately; custom-domain certificates issue only after DNS verifies.

Thursday an engineer enables history-mode routing for a “cleaner URL.” Refresh on a nested path 404s. You revert to hash routing for the week’s deadline and schedule prerender work properly instead of inventing an nginx rewrite StaticHost will not apply. WordPress/PHP needs a different kind of host.

Friday staging on Pro receives a build with staging API URLs baked via public env prefixes. Production stays on last week’s known-good deploy until Monday’s review. Rollback remains one click if marketing’s late copy drop breaks mobile layout. There is a short trial (~1 day), not a forever-free tier; no cPanel, no email, no built-in CDN product.

Plans: Starter $9 (1 site, 2 GB), Pro $30 (3 sites, 10 GB, staging), Scale $65 (10 sites, 30 GB), Business $130 (30 sites, 100 GB, teams).

That week is what static site hosting for beginners looks like when the host stays boring and the team respects file truth.

Failure table (first-month beginners)

Symptom	Likely cause	Fix
Preview shows wrong folder / 404 at `/`	Nested zip	Zip files inside `my-site`, not the parent
Styles missing	Path like `C:\Users\…` or wrong relative link	Use simple `styles.css` next to HTML; redeploy
“Host should npm install”	Tutorial from another vendor	Build locally if needed; upload output only
React deep link 404	History router on strict nginx	Hash routes or real files—SPA guide
Domain not HTTPS yet	DNS not verified	Wait for verification; then certificate
Email broken	Changed MX while editing web DNS	Restore MX; StaticHost is not mail
Trial ended	No forever-free tier	Starter $9 or a free host for classwork

Scene 8: Your first rollback drill

Intentionally deploy a zip with a typo in the heading. Confirm preview shows it. Roll back in deploy history. Confirm the previous heading returns. That five-minute drill teaches more confidence than any glossary of JAMstack terms. When you later add a custom domain, keep the same habit: fix files → redeploy → preview → only then worry about DNS.

Plans if you grow: Pro $30 (3 sites, staging), Scale $65, Business $130. Still no cPanel, no email product, no built-in CDN, and no remote npm/Hugo/Jekyll. Complementary reading already linked above stays your map.

FAQ

Do I need to learn Git on day one?

No. Zip upload is enough. Learn Git when you want history in the repo, not only on the host.

Is coding required?

For a hand-written site, basic HTML/CSS helps. You can also export HTML from some design tools and host the export—designers guide.

Can my site have a contact form?

The form can post to a third-party form endpoint. StaticHost will not process mail server-side for you.

What is staging?

A place to preview a non-production version. Pro and above include staging suited to that workflow.

Will this work for my school assignment?

If the assignment asks for a public HTTPS URL for static files, yes. If it requires server-side PHP grading scripts on the same host, you need whatever the syllabus specifies.