Top 5 Static Site Generators for 2020

With 34% of all the websites today powered by WordPress there is no doubt WordPress is the reigning king of web development. However, it is still open to vulnerabilities from multiple sides.

Today, running a WP powered website requires you to keep an eye on core updates for one. Stay on top of your plugin and theme updates for two. Make sure you are using a secure hosting environment and recent versions of important technologies such as PHP and MySQL for example. And finally, take at least the basic steps like the use of two-factor authentication, to keep WordPress, FTP, or Hosting account credentials secure.

A plethora of API and CDN options, modern browsers abilities and all of the WP drawbacks together evolved the web development scene towards better frontend solutions.

It is not that Wordpress is a bad option. It is more than right now, the use of static site generators and super-fast CDN-powered distribution is a far better option from performance and security standpoint.

Enter static site generators

Static site generators allow for the creation of static HTML-based websites that don't rely on databases or other external data sources. They completely avoid server-side processing when accessing the website.

Static sites have many advantages to dynamic websites and are becoming more popular each day. They are served faster, they offer great flexibility and they also come up with several security benefits.

Also, it's easy to deploy and host static websites as there are no special requirements that need to be covered by the hosting provider.

Thinking about going with the static site generator for the next project!? You’ve come to the right place. In this post, I’ll cover the top 5 static site generators for 2019 and what makes each one distinctive.

Gatsby

Gatsby is based on React and GraphQL which allows pulling data from different sources (such as Wordpress for example, which is becoming more and more popular these days) into your project. That makes Gatsby a great choice if you want to access data in an easy and consistent way.

Gatsby is known for being optimized for speed as it only loads the parts of the website which are needed at that exact moment. It also prefetches resources for other pages. That's why navigating between pages on the sites built with Gatsby feels incredibly fast.

Unlike few other SSGs I’ll talk about here, Gatsby comes with a plugin system that allows for additional functionality. Sitemap, robots txt, image manipulation etc. all are available through the use of a proper plugin. For example, if you want to pull data from another source such as Wordpress, the only thing you have to do is find the right plugin.

Below are some specific pros and cons of using Gatsby;

Pros

• Based on React
• PWA-ready by default
• A comprehensive plugin system is available
• Data is pulled into Gatsby by using GraphQL
• Fast static HTML pages with prefetching capabilities
• Solid community and recent $15M Series A funding

Cons

• Solid knowledge of JS, React, and GraphQL is necessary to use Gatsby

Who’s Using Gatsby

Here are a couple of brands that have used Gatsby for their websites and projects:

• Flamingo
• Airbnb Engineering & Data Science website
• Braun
• NYC Pride 2019
• Hopper
• Figma
• Timely
• Snap Kit

Next.JS

Next.JS (made by ZEIT, a company focused on making cloud computing accessible to everyone) is a React framework and can be used PWAs, server-rendring apps, and static websites among many things. NEXT.JS provides features such as:

• Server rendering
• CSS-in-JS
• Static exporting
• Automatic code splitting for faster page loads and file system based routing
• Webpack-based dev environment which supports Hot Module Replacement (HMR)
• Fully extensible with complete control over Babel and Webpack

Below are some specific pros and cons of using NEXT.JS;

Pros

• NEXT.JS is based on React and JavaScript
• It comes with its own configuration. All you need is to run npm run dev and start building your website or application
• Very easy to get started with. There's a high learning curve
• Seamless integration with ZEIT's hosting service
• Backed by an organization and has good support in the open-source world
• Zero configuration so it's possible to start quickly and easily
• Code splitting out of the box

Cons

• Basic understanding of JS and React is necessary
• No integrated plugin system is available

Who’s Using NEXT.JS

Here are some brands that have used NEXT.JS for their websites and projects:

• Marvel
• Invision
• Nike
• Hulu
• Boosted Boards
• Ticketmaster
• Open Collective
• Twitch
• IOTA
• A24

Nuxt.JS

NUXT.JS is a progressive, opensource, VUE.js framework. It includes a bundle analyzer and lots of opportunities to fine-tune an app or website. NUXT.JS has a powerful modular architecture that allows you to choose from more than 50 modules to make your development faster and easier.

This framework bundles the following: Vue 2, Vue Router, Vuex, Vue Server Renderer, and vue-meta.

Below are some specific pros and cons of using NUXT.JS;

Pros

• Based on Vue.js framework
• Very easy to learn and understand
• Various build options available
• Comes with integrated state management (Vuex)

Cons

• Not limited to generating static sites
• Requires understanding of Vue.js framework

Who’s Using NUXT.JS

Here are some brands that have used NUXT.JS for their websites and projects;

• Ozon
• Note
• Fox News
• Upwork
• Icons8

Hugo

Hugo is a static site generator that has more than 30,000-star ratings on GitHub. It is based on the Go programming language. Hugo comes with an ultra-fast build process and makes the creation of static websites quite seamless. It is deemed to be the fastest SSG right now.

What's special about Hugo is that it comes with a theme library comprised of more than a hundred themes that you can use to build your website.

Below are some specific pros and cons of using HUGO as a static site generator;

Pros

• The building process is super fast
• A system with themes and lots of available templates
• Flexible framework structure with the support of various content types

Cons

• In order to use HUGO, you will need an understanding of the Go programming language which is not so common in the current web development world

Who’s Using HUGO?

Here are some brands that have used HUGO for their websites and projects;

• Pharma Seal
• Bypass Censorship
• 1Password Support
• Cocoon & Cosy
• Hartwell Insurance
• Pace Revenue Management

Jekyll

Jekyll is a static site generator that is built based on Ruby. It's available since 2009 and it's also the engine behind popular GitHub Pages.

GitHub Pages are public web pages for users and organizations, freely hosted on GitHub's domain or a custom domain. It's one of the most popular static site generators nowadays.

Below are some specific pros and cons of using JEKYLL as a static site generator;

Pros

• Works well with GitHub pages
• Easy to learn and its core concepts are simple
• Huge and supportive community
• A long list of available plugins

Cons

• Setting up a Ruby environment will be necessary in order to use Jekyll first
• Ruby is not among the top trending programming languages anymore, so some developers might find it outdated

Who’s Using Jekyll?

Here are some brands that have used Jekyll for their websites and projects;

• Spotify for developers
• TwitchCon
• Netflix Devices
• UN World Statistics
• Site Leaf
• 18F
• Pattern Lab
• Boxy Suite
• Digital Democracy
• Light Burn

Which static site generator is for you?

Static site generators are gaining a lot of traction in the last couple of years. Choosing one may be overwhelming at first sight. After all, there are more than 400 SSGs right now.

That's why I've chosen five that are most used and that will continue to have an important role in the upcoming period.

Resources

StaticGen - List of Static Site Generators for JAMstack Sites
How to SSG - How to Choose the Best Static Site Generator for Your 2019 Project.
Headless CMSes, What Are Those? - If you are going SSG route you'll need a headless CMS.
What exactly is JAMstack? - SSGs and headless CMSs are a part of JAMstack web dev architecture. But what is JAMstack? Check it here.