KatieIn 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.htmlbecamehttp://www.BestKatie.com -
/katie/bio/index.htmlbecamehttp://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_importantaccording 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_importantintokatieby 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_importantfiles easy to maintain? Look into a content management system
Next steps
Go out and try building your next web site with an SSG!
