The Wild and Wonderful World of Static HTML Site Generators

Image result for generator

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

(TM)

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.

‘Static’ has a meaning in development besides just ‘old.’ There are 50 different definitions to distinguish between static and dynamic, but by and large the difference is that dynamic pages actually generate new HTML all on their own based on changes to their database, while static sites serve up the same HTML each time, and don’t even have a database. In short, static sites don’t have a backend. Keep this in mind – it does NOT have anything to do with animation, movement on the page, Javascript, or the lack thereof. Again, static sites can include Javascript. That’s important.

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.

http://vibrant.pratheev.com/

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.

http://portalplus.omnifi.co.uk/

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!

Jekyll

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.

Gatsby

Gastby

Gatsby is the generator that sucked me into this rabbit hole to start with. Gatsby is a static site generator for React. What this means is that it takes Javascript files that contain React components and generates totally static HTML, CSS and JS from them. The reason this is such a big deal is that we can now make use of reusable React components on our site and move past the problem that made us cry earlier. Every ability that React gives us is now available to us, without having to pay the price of a bulky front end – everything’s static.

Conclusion

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s