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.
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!
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
backed by multiple rounds of funding
support for PWAs
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
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.
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
automatic code splitting
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
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.
don’t need a previous understanding of React or Vue
choose your templating language
simple and straight to the point
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
Go is gaining traction as a language
built-in templates for getting started quickly
useful shortcuts in Markdown
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
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
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
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
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.