Top Static Site Generators For 2019
--
This post has been published first on CodingTheSmartWay.com.
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:
- Server-rendered by default
- Automatic code splitting for faster page loads
- Simple client-side routing (page based)
- Webpack-based dev environment which supports Hot Module Replacement (HMR)
- Able to implement with Express or any other Node.js HTTP server
- Customizable with your own Babel and Webpack configurations
Take a look at https://nextjs.org/ to find out more:
PROs
- Based on React and JavaScript
- Easy to get started with, high learning curve (and even higher if you have already a basic understanding of React)
- Seamlessly integrates with ZEIT now hosting service
- Next.js is backed by an organisation and also has a strong support in the open-source world
- Start with zero configuration
- Code splitting out of the box
CONs
- Requires some basic understanding of React
- No integrated plugin system available
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:
- Build server-side-rendered Vue.js SPAs (single-page-applications)
- Build standard SPAs
- Generate static webpages from Vue.js code
The Nuxt.js framework bundels the following:
- Vue 2
- Vue Router
- Vuex
- Vue Server Renderer
- vue-meta
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
- Based on Vue.js
- Easy to learn and to understand
- Offers multiple build options
- Comes with integrated state management (Vuex)
CONs
- Not limited to generating static sites
- Requires some basic understanding of Vue.js
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
- Based on React
- Data is pulled into Gatsby by using GraphQL
- Very comprehensive plugin system available
- Produces very fast static HTML pages with prefetching capabilities included
- PWA-ready by default
CONs
- You will need to have a solid grasp of JS, React, and GraphQL in order to get going with Gatsby.
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
- Jekyll works very well with GitHub Pages which makes it extremly easy to get your Jekyll site hosted.
- Jekyll is easy to learn and in general comes with a great simplicity in it’s core concepts.
- Jekyll has a huge community, so it’s easy to find help to any topic related to Jekyll.
- If you want to extend the standard functionality of Jekyll you can make use of a long list of available plugins.
CONs
- Jekyll is based on Ruby. That means that you have to set up your Ruby development environment to make use of Jekyll first.
- As Ruby is not included in the top trending programming languages for web development in 2019 you might find Jekyll a little bit outdated.
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
- Very fast build process
- Theming system with lots of templates available
- Flexible framework structure with support of different content types out-of-the-box
CONs
- You need to have a basic understanding of the Go programming language which is not so common in web development right now.
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!
