Static Site Generator
Definition
A static site generator is a program you run on your own machine, or on a build server, that reads source files and writes out a website. The sources are usually Markdown or MDX for the words, a template language for the layout, and a config file naming the site title, the URL structure and which plugins to load. The generator walks that content, applies the templates once per page, and drops the result into an output folder — commonly 'dist', 'public', 'build' or '_site'. The generator is not part of the running website; it finishes its build step and exits, and only its output is ever uploaded. Hugo is fast and written in Go, Eleventy is small and JavaScript-based, Astro leans on components, and Jekyll is the one GitHub Pages grew up with.
Why It Matters
Writing forty pages of documentation by hand means copying the same header into forty files and fixing it in forty places when the logo changes. A generator keeps one layout and one navigation list, so that edit happens once. It also does the tedious correct things for you: slugs from filenames, a sitemap, an RSS feed, tag pages, syntax highlighting, and a build that fails loudly when a link points at a page that no longer exists. The cost is a toolchain — a Node or Go version, a lockfile, plugins that drift — so for a five-page static site a generator can be more machinery than the job deserves. Reach for one when the page count, or the number of people editing, is what is growing.
How It Works
You install the generator and lay content out the way it expects, typically a 'content' or 'src' folder of Markdown files with YAML front matter at the top for title, date and tags. Running the build command starts a pipeline: read and parse each source file, resolve front matter into variables, render the matching template, then write an HTML file to the output folder at the path the URL should have — content/guides/dns.md becomes guides/dns/index.html. Assets get processed in the same pass, so stylesheets are compiled, images resized, and filenames often stamped with a content hash such as main.4f1c8a.css. What lands in the output folder is the build artifact, and it is the only thing a host ever needs.
Real-World Example
A consultancy keeps its handbook in eighty Markdown files and builds it with Eleventy into a 'public' folder of about 11 MB. Rather than wire up a repository and a deploy pipeline for something only twelve people read, they zip that folder and drop it on 99helpers, where it goes live at handbook.99helpers.site. The next edit is the same three actions: build, zip, upload — roughly ninety seconds. If a rebuild ever ships a broken navigation, version history rolls the site back to the previous upload without touching the generator at all.
Common Mistakes
- ✕Uploading the source folder rather than the output folder — Markdown and templates are not a website, and the browser will offer them as downloads or show raw text
- ✕Leaving the site URL in the config file set to localhost — generators bake that value into canonical tags, feeds and sitemaps, which then all point at a machine nobody else can reach
- ✕Treating the dev server as proof the site works — it rewrites paths and serves extensionless URLs in ways a plain file host does not, so problems only appear after publishing
Related Terms
Static Site
A static site is a website made of finished files — HTML, CSS, JavaScript, images — that are sent to the browser exactly as they are stored. Nothing is assembled on the server when a visitor arrives.
Build Step
A build step is the command that turns source files into the folder a web server can actually serve. It runs before publishing, produces an output folder, and is not part of the live site.
Build Artifact
A build artifact is the set of files a build produces — the finished HTML, CSS, JavaScript and images that actually get served. It is what you publish, not the source you edit.
Static Hosting
Static hosting is a service that stores a folder of finished web files and serves them over HTTP, without running any application code of yours. You upload the folder; the host answers requests for the files in it.
URL Slug
The readable, hand-picked part of a web address that names one particular thing — the 'acme-pitch' in acme-pitch.99helpers.site. It is chosen, short and made only of lowercase letters, digits and hyphens.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →