What is a static site generator?

#tutorial #webdev #jamstack

In ancient times, 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.

What is static web hosting?

Katie ・ Aug 19 ・ 2 min read

#tutorial #webdev #jamstack

I never want to do that again.

How it works

Here's what those files looked like :

/katie/index.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>
    <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>
    <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>
    <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>
    <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 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 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

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” episode of Learn With Jason. (If you prefer to read it, expand “Read the transcript” on the episode page 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

Choosing a headless CMS without losing your head

Katie ・ Aug 24 ・ 17 min read

#webdev #jamstack #productivity #discuss