It’s a generator. You get it.
You ever hear a song at a party for the first time and you’re like “Man, I kinda like this song” and then you hear someone else go “Woah, retrooooo! I feel like I’m back in middle school!” and you’re like what this song is new to me.
That’s how I feel about Static HTML Site Generators. Or, to be, more accurate, that’s how I feel about the
That’s the sort of language I’ve been hearing around HTML generators and static pages for a while now, so hey, there’s probably something to it. What are HTML generators, what are the use cases for them, and why are they becoming so popular? Let’s find out!
Review – What Defines a Static Webpage?
If you started programming within the last five years, odds are that you remember static webpages as something you did for the first five minutes of your bootcamp before moving onto dynamic pages and writing static off forever as something archaic to laugh at from the comfort of the future, like we do at Michael Douglas’ cellphone in Wall Street.
So why use static?
The thing is, dynamic web pages are super cool – they give us online shopping and user accounts and personalized content and all sorts of nifty stuff. The most magical things on the internet are done through dynamic websites and apps. BUT. Static sites are faster than dynamic sites. Much faster. You ever load a plain html file in your browser? It feels like lifting a box that you thought was pull of old kettlebells but turned out to be empty – it’s disorienting how easy it is, how quickly the page loads. And it’s way more secure. Dynamic apps, with all their forms and whatnot, have a much larger attack surface for anyone trying to hack your site.
When to use static
“But David” I hear you say. “Static web sites sound so boring. I didn’t get into development to make GeoCities sites. I want to make beautiful, exciting websites, and thinking about sticking to static makes me want to commit seppuku.” I totally understand. The interaction between users and data is a beautiful thing . But you know what else is beautiful? Single-page marketing sites with pictures, text, a ‘contact’ box and that’s it.
If you’re coming from a very backend-y development education, this might not be something you focused on a lot in your education; it’s easy to hear ‘static site’ and think ‘mid-90s’, but the truth is that the people making static pages are also the people at the very forefront of pushing CSS and aesthetics in web pages to their limits.
Another place that devs have gotten a lot of use out of static HTML sites is as blogs, portfolios, and personal sites for themselves and for clients. Let’s be honest, do you really need a comments section on your blog? Why? So strangers can tell you that you need to learn Haskell? Come on.
Static Site Generators
Okay, so we’ve established that static web pages have the potential to be jaw-droppingly gorgeous, faster and more secure than their dynamic cousins. So what’s the problem? Just write some HTML and some CSS, throw in a bit of JS, and let’s party!
Except, as it turns out, that sucks. You write a page, you finish it, then you realize that you want to use a similar page somewhere else in your app, and that you have to copy-paste it. You do this a couple more times and before you know what happened, your code has exploded. You realize that you don’t like static sites anymore. You miss React. You start crying and ripping up your “I Heart Static Websites” t-shirt.
There, there. It’ll be okay! Know why? Because we have static site generators! Basically, what these generators do is make creating a bunch of static HTML easier without giving us an entire programming language. And boy are there lots of these things. We’ll look at a few today, but there are a bajillion of them, so feel free to explore to your heart’s delight!
Probably the most well known option, Jekyll is built on Ruby and geared towards blogging. Many Rails devs love it as a nice lightweight way to write a blog with all the customization that CMSes deny them, but with a nifty Templating Engine called Liquid that lets them do stuff like loop through all of their blog post files and add the files’ markup to the blog index file.
Static site generators are available for nearly every major language – Node has Hexo, Google Go has Hugo, Python has Pelican. They generally give you a file system of some sort to start with, a place to add content (HTML), a place to specify styles(CSS), a place to create the rules of how your site gets generated(language depends on the generator), and a build tool (usually some specific command in terminal). When you run the build tool, it spits out a directory of HTML, CSS, JS and images, ready for hosting, no database or anything needed.
Particularly if you’re planning to work at an agency, there’s a high likelihood that you’re going to be doing these sorts of stylish, lightweight builds, and that you’re going to be doing them often. Invest some time in learning a static generator or two. Rebuild your personal site using it! And have fun!