Connect with us
static site generators

Resources

How Static Site Generators Will Affect The Web Design Industry

It’s funny how static HTML & CSS are still the best choices for speed, efficiency, and security. Even after all these years the web finds its way back to simplicity with static site generators.

These tools are like command line programs that let you generate and update raw HTML files for your server. They’ve been around for a few years and their popularity seems to keep growing rapidly.

Let’s dive into the world of static sites to see what they can offer webmasters and what they hold for the future.

What Are Static Site Generators?

It’s important to remember that the early web was solely made of static websites. They relied on HTML and CSS, no databases and no dynamic CMS’ like WordPress.

These static sites meant fewer HTTP requests and less load on the server. Back 20 years ago this was fantastic because computers were basically tortoises.

Nowadays there’s so much you can do with PHP and Rails and newer JS-based libraries like Node.js. But there’s one thing none of these features can match: performance.

Static websites will always be faster and perform better. This is the idea behind static site generators.

They’re tools that you download to your computer and run locally to create HTML websites. They each have their own templating languages that makes editing simple.

But with these tools you don’t need to edit the raw HTML directly. This is how web development has improved over the past few decades.

Typically the workflow looks something like this:

  • Download static site gen tool
  • Setup a new site, pick theme & fill in details
  • Create new pages usually written in Markdown
  • Compile those pages into HTML, upload to server

Some people argue against static generators because they are very technical. There is no GUI or admin panel. Most of the time they run through a command line so you’ll need to get comfortable with shell scripting.

If this sounds like a big hurdle to overcome then static site generators may not be for you.

But to get a more well-rounded understanding you can skim through these related posts:

The Biggest Pros & Cons

Static sites offer incredible benefits on the user experience side, but offer a huge barrier to entry for the common webmaster.

These are the biggest points for using static sites.

Pros

  • Speed and high performance even under heavy load
  • Fewer files to manage and simpler templating
  • Greater security without potential holes in site code or database queries

Cons

  • No dynamic features
  • Editing/uploading changes can be annoying
  • Requires a command line for creating sites; no GUIs at all

Undeniably the biggest benefit is speed from all points. Whether you’re pulling 1k visitors a day, hour, or minute, speed is the name of the game.

With raw HTML/CSS there isn’t much caching required. Server caching helps images but there is no need to optimize databases or cache queries or anything like that. So you’re pretty much guaranteed a better performance with a static site.

However you’ll also be limited solely to frontend languages. HTML, CSS, and JavaScript. That’s it.

Sites like Facebook, Google, or pretty much any big blog cannot function as static websites. The same goes for sites that need a GUI editor. Static site generators do not have visual interfaces which radically increases the barrier to entry for anyone wanting to learn.

So what are static sites good for? Simple projects that don’t need much updating.

Personal portfolios, business sites, very small blogs, or small information websites can all flourish with static site generators.

But keep in mind that static sites are not for everyone and they vary from project-to-project.

It is possible to run a small blog on a static site generator. It also comes with fewer security flaws by avoiding a CMS like WordPress. But it requires a lot more work to update.

You’ll have to weigh the pros and cons yourself to decide if this is a tool worth learning.

Picking A Static Generator

There are literally dozens of static site generators to choose from. And it seems like new ones are popping up every year.

This trend is most popular with frontend developers and server engineers who understand the significance of performance. But it’s wise to start with just one and master that before moving on.

These are my top two faves and possibly the unofficial industry standards.

Jekyll

jekyll builder

By far the most popular generator you can try is Jekyll. This runs on Ruby, which may be confusing since I said that static site generators don’t need any programming languages.

Jekyll runs on ruby locally on your computer. This uses Ruby to generate static HTML files which you then upload to the server(which doesn’t need Ruby). But don’t worry, you’ll never need to run Ruby commands to get Jekyll working.

All site content can be written in markdown and compiled into page templates. From there you can either FTP files or push them up through Git.

Plus Jekyll is the official generator for GitHub Pages so if you’re a developer this is an excellent resource to try.

Hugo

hugo static site builder

The 2nd resource I recommend is Hugo. Hugo is written in Go which is quite a strange language, but definitely a progressive one.

It works much like Jekyll where you’d install Go, then download Hugo and run it via the CLI. They have a huge introductory guide for beginners with mini-guides for many of their features. You’ll learn how to generate clean URLs, ToC’s, shortcodes, RSS feeds and so much more.

Hugo is great if you’d like a little more functionality. It’s certainly competitive and supports all the same stuff as Jekyll like GitHub pages and Git-based file uploads.

Jekyll & Hugo are widely considered the most popular but there are many generators to look into. Here are a few others you might try:

If you’re just getting started I recommend Jekyll. It’s the most popular one and it has tons of tutorials online for free.

The Future Of Static Sites

Will these static site generators ultimately gobble up the web design industry?

Most likely not. But they’re gonna make a dent!

With such a high barrier to entry I cannot imagine anyone wanting to just start with one of these tools. A non-techie will always prefer the WordPress dashboard over a Markdown editor any day of the week. Not to mention the technical CLI/install process can be a bit much.

Still I think web aficionados will lead the way with these tools. They do have a bright future and I fully understand the appeal. They offer a more streamlined process than WordPress and they’re more technical than manually editing HTML/CSS.

Take a look at the generators listed above and see what you think. You can also read through these guides to get started and see if static sites are right for you.

Getting Started

If your curiosity gets the best of you then static site generators can be a fun resource to play with. I recommend Jekyll but you can dig through tons of other tools, all free, and see which one(s) you like best.

Take a look at StaticGen which is a huge curated repo of the best free static site generators. This can get you started on the right track with free tools for your own testing.

But no matter what you use there’s plenty of room for static site generators to take over the web in the coming years. And if you can ride the wave early you’ll have an easier time learning new static site tools as they come out.

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design for web & mobile. You can see more work on his portfolio site and follow his tweets @jakerocheleau.

Click to comment

More in Resources

To Top