static-site-generator-code

When I began to look at creating my own website, I ran across quite a few blogs advising me to use a static site generator like Jekyll or Middleman. The problem was, no one bothered to explain in layman’s terms what a static site generator was. How am I supposed to work with something when I don’t even know why it’s useful?

After some research, I found out that static site generators are tremendously promising tools that can deliver a superior website, though they require a lot of upfront work as well. Consider this your introduction to static site generators and why they’re important.

The Beginner’s Guide to Static Site Generators

What is a static site?

First of all, let’s define a static site. Websites can be generally divided into two categories – static and dynamic.

A static website is one that is designed, stored and delivered to the user as-is. It doesn’t change between the point when you hit save and when the user clicks on it. You write the HTML, format it with CSS, and upload the page to your server.

Dynamic websites, conversely, are constructed by a server-side controller that can substitute content into the site through another program. A simple example of this is WordPress. You use a simple browser-based interface to input content and the server backend renders it on a webpage dynamically using PHP.

case-point-wordpress-technorms

Dynamic web pages are useful for hosting updated content and adding content through a simpler interface than raw HTML. Imagine running a blog in a static format where you have to hand-code every new post from scratch- talk about a nightmare.

Each type of website has its own advantages. Dynamic websites tend to be capable of more fancy stuff than their static counterparts, as well as being easier to manage.

However, static websites are cheap to store, easy to build, and load much faster. If you’re making a website without a lot of dynamic or interactive elements, it’s worth looking at using a static site of HTML, CSS and some JavaScript.

personal-site-html-css-javascript

In a world where mobile devices are quickly becoming the dominant type of device people use to browse the web, having a fast and lightweight website is crucially important. Users’ attention spans grow shorter every year, and every second your site spends loading that super cool client-side scripting increases the chances users will bail.

Web designers also have a tendency to over-design. You can add in a bunch of crazy scripts, but you probably shouldn’t.

You should make your website as simple as possible for the sake of good design and loading quickly. Look at this and tell me they don’t have a point.

What is a static site generator?

A static site generator is a set of tools for building static websites automatically based on a set of input files. You give it some text files and content, and the generator will give you back a complete website.

More at TechNorms
PDFelement 6 Pro is the Ultimate Tool to Manage and Edit PDF Files

For this guide, we’ll just look at using Jekyll, the static site generator cooked up by one of the founders of GitHub.

one-include-file-ssg

In Jekyll, you have a set of nested templates. Each one has a bit of content you’ll put on every webpage. For example, head.html has a bit of code the generator will paste into the head of every HTML page you create. Change head.html and you change the head of every HTML page. This makes updating and managing the site infinitely easier.

The whole generation system works like this. You leave holes in the HTML pages and put in special placeholders that tell the generator what to fill in there.

How do I generate content?

Content comes when you feed in specially formatted .markdown files. Markdown is a special markup language that is amazing for blogging. You can type in plain English with a few symbols for formatting and the computer converts it into HTML.

At the top of every .markdown file for your content, you also must put an info box. Enter it like this:

layout: post

title: title here

Content starts here

Everthing between those sets of three dashes won’t appear within the body of the story but is instead accessed as a variable. If you look within your other page templates, you might see:

{{ page.title }}

This tells the static site generator to substitute whatever you put after the colon beside “title” in each individual post. That way you can define a page title once within the text and the generator pastes it everywhere in the HTML for you.

The really cool part is that you can roll your own variables and use those to substitute in content.

For example, I started putting together a blog with links to all my old stories. My HTML template has a link at the bottom of every page with “Original Link” as a link. The code looks like this:

<p><a href="{{ page.original }}" target="_blank">Original Story</a

In this case, the generator knows to fill in whatever link I define under “original: (link)” in every post to substitute there. Simple, and so much more efficient than manual editing.

That’s the real reward of static site generators. They’re an absolute pain to set up and get right, but once they’re ready adding new content and maintaining the system is incredibly easy.

Final Thoughts

Hopefully, this helped clear up some differences between static and dynamic websites and why it matters. Static websites have tremendous potential, especially in a mobile-first world. A good website that’s done the work to set up its static generator could do well.