What is a static site generator?

Katie - Aug 19 '20 - - Dev Community

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.

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:

Additional resources

Next steps

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .