Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

What is a static site generator?

18 Aug 2020 🔖 tutorials web development jamstack
💬 EN ( Lire cet article en français )

Table of Contents

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.” I never want to do that again.

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

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 was 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

  • Jason Lengstorf and Bryan Robinson explained the fundamentals of static sites really well “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.”

Next steps

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

--- ---