Why Static Site Generators

First off, let’s quickly talk about the benefits of Static Site Generators.

Static Site Generators generate your site pages at build-time instead of real-time. This means that when a user requests a page from your site, there is no delay. gjstatic No calls to a database. No generating of HTML. It simply responds with the file itself.

Because of this, the hosting of your files is incredibly easy. By hosting your website in a Content Delivery Network (CDN), your files can be replicated across the world for maximum speed.

Before Static Site Generators, developers would use popular Content Management Systems (CMS). Because of their popularity, they were often targeted by hackers. With Static Site Generators, you don’t need a CMS anymore. This means you don’t have to worry about your website/data being targeted.

Development Workflow
With Static Site Generators, you don’t need to create or manage your own backend server. You also don’t have to run your own database. This makes it incredibly easy to run your site locally, automate builds, switch to a different host, etc.

There are many more benefits, but let’s get on to the list!

How Would I Use a Static Site Generator?
In the JAMstack, we will have data for our content that we grab via an API and we will have our markup that we send to our users. The flow looks like this:

APIs: Get data from a Headless CMS or Markdown files in a GitHub repo
Markup: The markup is generated by a Static Site Generator
A cool workflow is to have a Headless CMS deployed to DigitalOcean and then use a Static Site Generator to generate static pages from that API. We recently did a webinar on how to Host a Headless CMS on DigitalOcean.

And finally, here is our list!

1. Gatsby

Gatsby is my favorite on this list and the one that I use almost daily for personal sites and demo projects. Gatsby has really made a name for itself over the past couple of years, having successfully secured multiple rounds of funding.

I can find a Gatsby plugin for almost everything I need!

The thing that makes me most excited about Gatsby is the plugin ecosystem. For almost every problem I come across, I can usually find a plugin to help.

Gatsby also recently released Gatsby Cloud which is advertised as “the best way to create and deploy Gatsby websites”. It’s worth a look if you are building Gatsby sites.

uses React and GraphQL
Gatsby Cloud for optimized builds
powerful ecosystem of plugins
strong community
backed by multiple rounds of funding
support for PWAs
amazing documentation
2. Next.js

Next.js is another amazing option that is built on top of React. It is also extremely popular in the community and basically the other de facto Static Site Generator that uses React.

Get started with Next.js)

Although we are listing it as a Static Site Generator, it is important to note that that is not all it is. Next.js first and foremost supports server rendering. You also can define serverless functions as API endpoints. This gives you lots of control over how you build and deploy your Next.js applications.

Learn more about Using Next.js as a Static Site Generator for Netlify

server rendering with the option to export as a static site
API routes for serverless functions
backed by Zeit
easily integrated with Zeit Now
PWA support
3. Gridsome

So far, we’ve talked about two Static Site Generators based on React. Now, let’s transition over to a few built on top of Vue, starting with Gridsome.

Although Vue doesn’t quite have the following that React has currently, it’s important to know that the Vue community has continued to grow immensely. Based on the State of JavaScript survey, more and more people are using Vue and love it.

That said, Gridsome is most comparable to Gatsby. Similar to Gatsby, it is powered by GraphQL, which is a fan favorite in the developer community right now. It also has support for PWAs and code splitting out of the box. I hear lots of good things about Gridsome, so if you’ve got some Vue experience, this is a great place to start.

built on top of Vue, an ever-growing community

comparable to Gatsby

powered by GraphQL

PWA support

automatic code splitting

4. Nuxt.js

While Gridsome compares nicely with Gatsby, our next item, Nuxt.js, compares favorably with Next.js. In fact, Next.js was the inspiration for Nuxt.js.

For example, they both support server rendering as well as statically generated content. Nuxt.js states to have the “best of both worlds” with it’s ability powerfully combine the two.

Here’s one extra tid bit that Nuxt.js mentions. Developers don’t need to take advantage of either server rendering or statically generated content to find a reason to use Nuxt.js. As with with the frameworks mentioned above, Nuxt.js adds some niceties on top of Vue (think automatic route configurations) that might be worth considering regardless.

server-rendered AND statically generated content
built with Vue, an ever-growing community
automatic code-splitting
PWA support
5. 11ty

So far, we’ve talked about Static Site Generators that are built on top of JavaScript frameworks. 11ty, on the other hand, is simply built on JavaScript. This means you don’t need to already be familiar with frameworks like React or Vue. If you’re familiar with JavaScript, you’re ready to get going.

11ty brands itself as a “simpler static site generator”. This makes it easy to pick up and easy to customize. One of the favorite features I hear others talk about is the fact that you choose your own templating language. If you are already familiar with something like Handlebars, go ahead and use it.

built on Vanilla JavaScript (no frameworks)
don’t need a previous understanding of React or Vue
choose your templating language
simple and straight to the point
6. Hugo

Hugo is the first Static Site Generator that we will cover that does not use JavaScript. It’s built with Go, an open-source language created by Google. Go isn’t near as popular as JavaScript, but I have heard of more and more developers/companies adopting it.

One of the cool features of Hugo is its built-in templates. These are helpful for getting up and running with Hugo quickly. It takes advantage of shortcuts that can be used in Markdown to add more flexibility and reusability.

built with Go programming language
extremely fast
Go is gaining traction as a language
built-in templates for getting started quickly
useful shortcuts in Markdown
7. Jekyll

Jekyll is another extremely popular option, and it is built with Ruby. Ruby was an incredibly popular programming language most notably with the Ruby on Rails framework. So, if you’re coming from a Ruby/Ruby on Rails background, you’ll want to check in with Jekyll. It is one of the Static Site Generators that has been around the longest.

Jekyll combines Markdown files with the very popular Liquid templating engine. It’s also interesting to note that Github Pages are powered by Jekyll. This means that you can easily deploy your Jekyll site to GitHub for free!

built with Ruby programming language
huge ecosystem of Ruby gems
easily hosted on Github pages
8. Scully

Above, we mentioned several Static Site Generators built with JavaScript, but we never mentioned the Angular framework. Well, Scully is Angular’s answer to the Static Site Generator craze. Scully is still relatively new in comparison to the other options we have talked about so far.

Although Angular might not have the type of community that React has, it is still immensely popular. Angular’s CLI is amazing and with it, you can add Scully to an existing project with one command. Angular has done some amazing things in their upgrade paths in the last several versions and this is just another example of that. The Angular CLI also has some amazing scaffolding commands built in to generate project files for you.

built with Angular
Angular CLI adds Scully easily to an existing project
Angular CLI scaffolding tools are awesome
9. Sculpin

PHP is another incredibly popular language that we haven’t yet talked about. If you are most comfortable with PHP (maybe back from doing WordPress development), then you’ll want to check out Sculpin. It uses Markdown files and a templating engine called Twig.

built with PHP and the Symfony framework
uses Markdown and Twig templating engine
10. Sapper

After all of the talk about JavaScript, we have yet to mention Svelte, one of the most exciting up and coming JavaScript frameworks. Developers love how simple, concise, and fast code is in Svelte. Well, with Sapper, you can take advantage of those benefits by building a statically generated site with Svelte.

Fun fact. Sapper stands for Svelte app maker

Sapper is most easily compared with Next.js, and it actually got its inspiration from Next.js. Similar to Next.js, Snapper has the ability to server render pages as well as define API endpoints. Snapper then offers the ability to export as a static site.

built with Svelte framework
server-rendered views with client-side hydration
export to static site option
code splitting
offline support

Middleman is the last Static Site Generator on our list, and it uses Ruby as its language of choice. Similar to Jekyll above, you’ll want to be familiar with Ruby and the RubyGems ecosystem before jumping into Middleman. One of the things I liked when researching this framework, is that there are videos embedded in their documentation. As a person who learns best from video, I really appreciate this.

Middleman uses ERB as its default templating language, something you might be familiar with if you have worked with Ruby on Rails in the past. Middleman also gives you access to a few other templating languages as well.

Leave a Reply

Your email address will not be published. Required fields are marked *