What is a static site generator?
Tags: tutorial, webdev, jamstack
Published: 2020-08-19 12:12:47

---
title: What is a static site generator?
description: "Jamstack 101"
published: true
date: 2020-08-18 03:00:00 UTC
tags: tutorial,webdev,jamstack
canonical_url: https://katiekodes.com/what-is-static-site-generator/
---

[In ancient times](https://dev.to/katiekodes/what-is-static-web-hosting-5gko), I’d **hand-write** a folder full of `.html`-typed files and upload them to a directory `katie` on a web server, where they’d become my site’s “web pages.”

- `/katie/index.html` became `http://www.BestKatie.com`
- `/katie/bio/index.html` became `http://www.BestKatie.com/bio`
- etc.

{% link https://dev.to/katiekodes/what-is-static-web-hosting-5gko %}

I never want to do _that_ again.

## How it works

Here's what those files looked like :

* **/katie/index.html**

```html
<html>
	<head>
		<title>Home • Acceuil</title>
	</head>
	<body>
		<nav><ul>
			<li><a href="/">Home • Acceuil</a></li>
			<li><a href="/bio">About me • Tout sur moi</a></li>
			<li><a href="/blog">Blog</a></li>
		</ul></nav>
		<h1>Home • Acceuil</h1>
		<p>Hello world • Salut le monde</p>
	</body>
</html>
```

* **/katie/bio/index.html**

```html
<html>
	<head>
		<title>About me • Tout sur moi</title>
	</head>
	<body>
		<nav><ul>
			<li><a href="/">Home • Acceuil</a></li>
			<li><a href="/bio">About me • Tout sur moi</a></li>
			<li><a href="/blog">Blog</a></li>
		</ul></nav>
		<h1>About me • Tout sur moi</h1>
		<p>My name is Katie • Je m'appelle Katie</p>
	</body>
</html>
```

* **/katie/blog/index.html**

```html
<html>
	<head>
		<title>Blog</title>
	</head>
	<body>
		<nav><ul>
			<li><a href="/">Home • Acceuil</a></li>
			<li><a href="/bio">About me • Tout sur moi</a></li>
			<li><a href="/blog">Blog</a></li>
		</ul></nav>
		<h1>Blog</h1>
		<hr/>
		<p class="post-date"><time datetime="2020-06-02">June 2, 2020 • 2 juin 2020</time></p>
		<p class="post-summary">I'll introduce you to static site generators • Je vous présente les générateurs de sites statiques</p>
		<hr/>
		<p class="post-date"><time datetime="2020-06-01">June 1, 2020 • 1 juin 2020</time></p>
		<p class="post-summary">I'll teach you all about static web hosting • Je vous enseigne tout sur l'hébergement web statique</p>
	</body>
</html>
```

* **/katie/blog/web-hosting/index.html**

```html
<html>
	<head>
		<title>What is static web hosting? • Qu'est-ce que l'hébergement web statique ?</title>
	</head>
	<body>
		<nav><ul>
			<li><a href="/">Home • Acceuil</a></li>
			<li><a href="/bio">About me • Tout sur moi</a></li>
			<li><a href="/blog">Blog</a></li>
		</ul></nav>
		<article>
			<h1>What is static web hosting? • Qu'est-ce que l'hébergement web statique ?</h1>
			<p class="post-date"><time datetime="2020-06-01">June 1, 2020 • 1 juin 2020</time></p>
			<div class="summary">I'll teach you all about static web hosting • Je vous enseigne tout sur l'hébergement web statique</div>
		</article>
	</body>
</html>
```

* **/katie/blog/static-site-generators/index.html**

```html
<html>
	<head>
		<title>What is a static site generator? • Qu'est-ce qu'un générateur de site statique ?</title>
	</head>
	<body>
		<nav><ul>
			<li><a href="/">Home • Acceuil</a></li>
			<li><a href="/bio">About me • Tout sur moi</a></li>
			<li><a href="/blog">Blog</a></li>
		</ul></nav>
		<article>
			<h1>What is a static site generator? • Qu'est-ce qu'un générateur de site statique ?</h1>
			<p class="post-date"><time datetime="2020-06-02">June 2, 2020 • 2 juin 2020</time></p>
			<div class="summary">I'll introduce you to static site generators • Je vous présente les générateurs de sites statiques</div>
		</article>
	</body>
</html>
```

---

As I said on the [French version](https://katiekodes.com/generateur-site-statique/) of this article -- **_Oh là là_**.

There is so. much. _repetition_ of content across these files!

* `<html> ... </html>`
* `<title> ... </title>`
* `<nav> ... </nav>`
* etc.

---

~ ~ ~ I need some way to be **lazy**. ~ ~ ~

---

Imagine a folder named `katie_important` filled with only the following files, instead:

* **/katie_important/index.txt**

```
- title : Home • Acceuil
- message : Hello world • Salut le monde
```

* **/katie_important/bio.txt**

```
- title : About me • Tout sur moi
- message : My name is Katie • Je m'appelle Katie
```

* **/katie_important/blog/2020-06-01-web-hosting.txt**

```
- title : What is static web hosting? • Qu'est-ce que l'hébergement web statique ?
- answer : I'll teach you all about static web hosting • Je vous enseigne tout sur l'hébergement web statique
- published : 2020-06-01 15:00
```

* **/katie_important/blog/2020-06-02-static-site-generators.txt**

```
- title : What is a static site generator? • Qu'est-ce qu'un générateur de site statique ?
- answer : I'll introduce you to static site generators • Je vous présente les générateurs de sites statiques
- published : 2020-06-02 15:00
```


Now imagine software that could _automatically_ transform the contents of `/katie_important` into the files and folders seen within `/katie/`.

That’d be amazing!

> And it exists. It’s called a **static site generator** _(SSG)_.
> 
> - Any given SSG will ask me to structure and format my files and folders within `katie_important` according to some sort of pattern particular to that SSG.
> - An SSG will also ask me to teach it how I’d like it to transform `katie_important` into `katie` by specifying rules written in a [templating language](https://en.wikipedia.org/wiki/Template_processor) that it understands.

**KatieKodes.com** is written with an SSG. A few well-known SSGs are:

- Jekyll
- Hugo
- 11ty
- Gatsby
- Next.js
- Nuxt
- Sapper
- **[and many more](https://www.staticgen.com/)**

## Additional resources

- Jason Lengstorf and Bryan Robinson give a great “TL;DR” about static sites “[from 13:33 to 17:39 of the Create a Plugin for 11ty](https://www.youtube.com/watch?v=aO-NFFKjnnE&start=813)” episode of Learn With Jason.  _(If you prefer to read it, expand “Read the transcript” on the [episode page](https://www.learnwithjason.dev/create-a-plugin-for-11ty) and from “let’s talk a little bit about what static site generators are in the abstract” through “This is where you and I diverge.”)_
- Want to make even the `katie_important` files easy to maintain?  Look into a [content management system](https://dev.to/katiekodes/choosing-a-headless-cms-without-losing-your-head-3ef9) {% link https://dev.to/katiekodes/choosing-a-headless-cms-without-losing-your-head-3ef9 %}

## Next steps

Go out and try building your next web site with an SSG!