Top Static Site Generators For 2019

This post has been published first on CodingTheSmartWay.com.

Subscribe On YouTube

Static site generators focus on one main task: generate a complete static HTML-based site. This result does not rely on databases or other external data sources and therewith avoid any server-side processing when accessing the website.

In comparison to dynamic websites, static sites have many advantages and therefore are becoming more and more popular. Static sites can be served quickly, they offer a great extend of simplicity and comes with security benefits out of the box. Furthermore it’s easy to deploy and host static sites as there are no special requirements which needs to be covered by your hosting provider.


If you like CodingTheSmartWay, then consider supporting us via Patreon. With your help we’re able to release developer tutorial more often. Thanks a lot!


Based on your background and preferences you’re able to select from a long list of static site generators. In the following you’ll find an overview of my top 5 static site generators for 2019: Next.js, Nuxt, Gatsby, Jekyll and Hugo!

NEXT.JS

Next.js is a very popular static site generator based on React and JavaScript and provided by ZEIT, a company which is focusing on making cloud computing as easy as possible.

Next.js is a very modern platform and providers features like:

Take a look at https://nextjs.org/ to find out more:

PROs

CONs

Course Recommendation To Learn Next.js:

Universal React with Next.js — The Ultimate Guide
by Reed Barger
Learn how to make awesome server-rendered React apps with Next.js
Rating: 4.7 (out of 5)
Go To Course …

React 16 — The Complete Guide (incl. React Router 4 & Redux)
by Maximilian Schwarzmüller
Dive in and learn React from scratch! Learn Reactjs, Redux, React Routing, Animations, Next.js basics and way more!
Rating: 4.7 (out of 5)
Go To Course …

NUXT.JS

Nuxt.js is not only a static site generator based on Vue.js. Infact it delivers multiple build options:

The Nuxt.js framework bundels the following:

Under the hood we use webpack with vue-loader and babel-loader to bundle, code-split and minify your code.

If you’re already familiar with Vue.js and now would like to dive into server-side rendering and the generation of static pages from your Vue.js application the Nuxt.js framework is definitely your choice.

The Nuxt.js website is available at https://nuxtjs.org/:

PROs

CONs

Course Recommendation To Learn Nuxt.js:

Nuxt.js — Vue.js on Steroids
by Maximilian Schwarzmüller
Build highly engaging Vue JS apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach.
Rating: 4.8 (out of 5)
Go To Course …

GATSBY

Gatsby is based and React and GraphQL, so if you’re already have some basic understanding of those technologies Gatsby might be the right choice for you. Maybe you’d ask: Why needs a static site generator GraphQL? The answer here is easy: Gatsby uses GraphQL internally to make data available which is pulled from different sources into your project. E.g. you can use sources like your file system, WordPress, or Contentful. All of the data which is made available from those sources can then be accessed by using GraphQL which makes the way you’re accessing data easy and consistent.

Gatsby is optimised for speed. Gatsby tries to build the fatest possible website, it delivers code and data splitting out-of-the-box. Therewith Gatsby loads only the parts of your website which are needed right now. In addition, Gatsby prefetches resources for other pages. Because of that navigating between pages of your website feels incredibly fast.

Gatsby comes also with a plugin system which makes it easy to extend the static site generator which additional functionality. E.g. if you want to pull data from another source you simply need to find the right plugin, install and configure this plugin and the desired data becomes accessible by using GraphQL in your pages.

The project’s website can be found at https://www.gatsbyjs.org/:

PROs

CONs

Course Recommendation To Learn Gatsby:

Building Awesome Websites With Gatsby, React & GraphQL
by Christopher Hawkes
Rating: 3.8 (out of 5)
Go To Course

React 16 — The Complete Guide (incl. React Router 4 & Redux)
by Maximilian Schwarzmüller
Dive in and learn React from scratch! Learn Reactjs, Redux, React Routing, Animations, Next.js basics and way more!
Rating: 4.7 (out of 5)
Go To Course …

JEKYLL

Jekyll is a a static site generator which is available since 2009 and is build based on top of Ruby. Jekyll is also the engine behind GitHub Pages. GitHub Pages are public web pages for users, organizations, and repositories, that are freely hosted on GitHub’s github.io domain or on a custom domain name of your choice. The fact that Jekyll is powering GitHub Pages is also the reason why Jekyll is the most popular static site generator right now.

Jekyll’s website can be found at https://jekyllrb.com/:

PROs

CONs

Course Recommendation To Learn Jekyll:

Jekyll: make fast, secure static sites and blogs with Jekyll.
by Jana Bergant
Do you want a clean, simple, fast and secure site or a blog and host it free on Github? Jekyll is the best way to go.
Rating: 4.4 (out of 5)
Go To Course …

HUGO

Hugo is a static site generator which is also very popular which is proven by over 30,000 stars on GitHub right now. Hugo is based on the Go programming language which is great if you have already gained some knowledge of Go. Hugo claims that it is the fastest framework for building websites. In fact Hugo comes with an ultra-fast build process and makes building static websites a breeze.

Hugo has a theming system and a theme library which is comprising more than hundred themes which can be used to build you own website.

The project’s website can be found at https://gohugo.io/:

PROs

CONs

Course Recommendation To Learn Hugo:

Migrate from WordPress to Hugo, Step by Step
by Ty Walls
Leave behind the slow, insecure, and expensive confines of Wordpress for Hugo, the world’s fastest static site generator
Rating: 4.7 (out of 5)
Go To Course …

Conclusion

Static side generators gain more and more popularity across the internet. If you’re trying to find the right static site generator for your use case and your technical background the list of available options seems to be overwhelming at first sight.

This post has given you insights in five static site generators which are about to play in important role in the upcoming year. If you’re still unsure which static site generator to use for your upcoming project just give it a try, download it and try to implement a first simple example. Have much fun!

This post has been published first on CodingTheSmartWay.com.

Disclaimer: This post contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support this blog!

CodingTheSmartWay.com Blog

CodingTheSmartWay.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store