Cobra Developers
Blog, WordPress

What is a static site generator?

The short answer

A static site generator is a program that builds every page of a website ahead of time, combining templates with content or data and writing the results as plain HTML files. A server then hands those files to visitors without running code or querying a database, which makes the site fast, cheap to host, and hard to attack.

A static site generator is a program that turns templates and content into a folder of finished web pages before anyone visits. We use them constantly. A 305 page site for a Kansas defense attorney, a 271 page bail bonds site, and the site you are reading now were all produced by one.

Ours are not exotic. Some are Python scripts. This site is built by a single Node file with no dependencies. The idea is old and simple, and it suits a lot of small business sites better than the systems they usually end up on.

Here is what the term means, minus the jargon.

What does a static site generator do?

A static site generator reads your content and data, runs them through templates, and writes one HTML file per page into an output folder. That folder is the website. Upload it to any host and the site is live, with no database behind it and no program assembling pages on demand.

The inputs are usually three things:

  • Content or data. Text files, a spreadsheet, a data file listing services and cities.
  • Templates. The page layout, with slots where content goes.
  • Assets. Styles, scripts, images.

The output is plain files. Here is a complete, if tiny, generator in Node:

import { mkdirSync, writeFileSync } from 'node:fs';

const cities = ['Peoria', 'Glendale', 'Surprise'];
const page = (city) => `<!doctype html>
<title>AC repair in ${city}</title>
<h1>AC repair in ${city}</h1>`;

for (const city of cities) {
  const dir = `dist/ac-repair-${city.toLowerCase()}`;
  mkdirSync(dir, { recursive: true });
  writeFileSync(`${dir}/index.html`, page(city));
}

Run it and you have three pages. Add a city to the list, run it again, and you have four. Real generators add layouts, navigation, sitemaps, and checks, but that loop is the heart of every one.

What is the difference between build time and request time?

Build time is when a page is assembled before anyone asks for it. Request time is when a page is assembled at the moment a visitor asks. A static site generator does all its work at build time, so at request time the server only has to send a file that already exists.

A system like WordPress works at request time. A visitor arrives, the server runs code, queries a database, builds the page, and sends it. Caching can save the result, but the machinery is still there and still has to be maintained.

Build time (static)Request time (dynamic)
When the page is madeOnce, when you publishOn each visit, unless cached
What the server doesSends a fileRuns code and queries a database
Where errors show upIn the build, before launchIn front of the visitor
Content changesRebuild and redeploySave in a dashboard
Personal or live contentNeeds extra scripting or a serviceNatural

The middle row is underrated. Many template mistakes stop a static build on the developer's machine, before anything reaches the public.

What are the advantages of a static site?

The advantages of a static site are speed, security, low cost, and consistency. Pages are already built, so they arrive quickly. There is no login page, database, or plugin to break into. Hosting plain files is inexpensive. Every page comes from the same templates and data, so facts cannot drift apart.

Consistency is the one we value most. For an automotive business that offers car repair, used cars, and rideshare rentals across many cities, one script produces a page for every service in every city from a single source of truth. Change a price once and the whole site updates.

Scale costs nothing either. The Kansas site includes 170 city and offense pages. The build also knows the attorney prosecutes in three counties and never markets defense work there. A rule like that is easy to enforce in a generator and easy to forget in a dashboard.

We describe that approach in programmatic SEO for local service businesses.

What are the downsides of a static site generator?

The downsides of a static site generator are that edits need a rebuild, there is no dashboard unless someone makes one, and anything interactive needs separate handling. Forms, search, logins, and comments do not come for free. A business that publishes daily through non-technical staff will feel that friction.

None of these are fatal. A contact form can post to a small function or a form service. Search can run in the browser. The bail bonds site is static, and its type-ahead jail finder gets a visitor to the right county jail in a few keystrokes. But each is a decision, where a dynamic system hands you a plugin.

The editing question is the real one. If the owner wants to rewrite pages every week without talking to anyone, a static site is the wrong tool, and we say so in WordPress or a static site.

When is a static site generator the right tool?

A static site generator is the right tool when the site changes monthly instead of daily, when many pages share one shape, and when nobody needs to log in to the public site. Local service businesses, professional practices, documentation, and marketing sites fit. Stores with live inventory, and publications run by staff, usually do not.

A quick test, in order:

  1. Count the edits. If content changes a few times a month or less, static fits.
  2. Count the page shapes. Many pages built from the same pattern favor a generator.
  3. List what must be live. Accounts, carts, and per-visitor content point toward an application.
  4. Ask who edits. If the answer is "a developer, or us by email," static is comfortable.

Do you need a framework, or can you write your own?

You can do either. Established generators come with themes, plugins, and documentation, which helps when several people work on a site. A custom generator is a few hundred lines, does only what the site needs, and has nothing to update. For small, stable sites, writing your own is reasonable.

We lean toward small custom generators. The bail bonds site, including its 145 article blog, comes from one build script and deploys as static files. This site's generator is one file. There is no framework upgrade to schedule, because there is no framework.

That is not a rule for everyone. A team that wants conventions and a large community should use an established tool. We walk through ours in building a static site generator in one file.

Frequently asked questions

Are static sites good for SEO?

Yes. Search engines read plain HTML easily, and prebuilt pages load quickly, which helps the experience measures search engines publish. Titles, structured data, and sitemaps are all generated in the build. What ranks is still the content. The generator only makes it easy to serve well.

Can a static site have a contact form?

Yes. The form's HTML is static, and the submission goes to a small server function or a form service that sends the email. The page itself needs no database.

Can a static site have a blog?

Yes. Posts are written as text files, often in Markdown, and the generator turns each into a page and builds the index. Publishing means adding a file and running the build. That suits a blog updated by one or two people, less so a newsroom.

How is a static site updated?

Someone changes the content or data, runs the build, and deploys the new files. With a hosting platform connected to version control, saving the change triggers the build automatically. The whole cycle usually takes seconds to a few minutes.

Is a static site the same as a single page application?

No. A static site is many prebuilt HTML pages. A single page application is one page that builds its content in the browser with JavaScript.

If you think your site might be a fit, tell us what it has to do and how often it changes. We will tell you plainly if static is the right call.

Who wrote this

The Cobra Developers team. We are a software studio in Arizona that builds and runs its own products and builds websites, web apps, and automation for clients. This post draws on our work on Gayer Law, EZ Swap, One Stop Bail Bonds. Everything here comes from projects we shipped; see all 30 of them.

guest@cobra: ~