With 36% of all the websites today powered by WordPress, there’s no doubt WordPress is the king of web development. However, it’s still open to vulnerabilities from many sides.

Now, running a WordPress powered website requires you to keep an eye on core updates for one, being on top of your plugin and theme updates.

Also making sure you are using a secure hosting environment and keeping current versions of critical technologies like PHP and MySQL, for example. Finally, it takes simple steps like using of two-factor authentication to keep WordPress, FTP or your Hosting account credentials secure.

A range of API and CDN options, with modern browsers abilities and all of the WP drawbacks together grew the web development scene towards helping to find better front-end solutions.

It’s not because WordPress is a bad option, and yes, this blog and many websites I and many others built use WordPress. It’s more than right now, the use of static site generators and a fast CDN-powered distribution is an option from performance and security standpoint.

Entering these static site generators

Static site generators allow for the production of static HTML-based websites that don’t rely on databases or other external data sources.

They avoid server-side processing when accessing the website; Static sites have various advantages to dynamic websites and are becoming popular each day.

They are served faster; they offer great flexibility, and they further come up with several security benefits. Also, it is easy to deploy and host static websites, as there are no specific requirements that need to be covered by any hosting provider, in this post, I’ll cover the 8 static site generators for this year.

1. Gatsby

Gatsby Js

Gatsby is presumably the most popular static site generator for React in the world. The ReactJS site itself is, in fact, built with Gatsby. Therefore, why is Gatsby so popular?

First thing, it plays wonderfully with the React ecosystem, from React components to Webpack and CSS techniques. It also features a rich data plugin system that makes it easy to pull and use data via GraphQL from third-party services and APIs so that you can improve your experience with real data.

Also it’s easy to deploy and works very fast with nearly zero loading times if you built and deployed correctly. It as a variety of starters, templates and even to some extent works in accordance with PWA guidelines. 

2. Cuttlebelle

Cuttlebelle

Cuttlebelle is a lesser-known but highly impressive React static site generator that been built with a vision to better separate editing and coding concerns.

Cuttlebelle lets you use one layout per page-partial and neatly separates content from code, you can extend this static site generator with React components, which opens various possibilities.

You can create a layout for one part of the page and then compose them together to create a single static page. Create Cuttlebelle templates with JSX, compose a layout, fetch data from third-party APIs and test with Jest and deploy it anywhere.

3. Phenomic

Phenomic

Phenomic is a different framework built to make the static site generator experience similar to building a full-blown app: it is a modular website compiler that lets you bring your own renderer such like React, and bundle up with Webpack for example.

It’s built for highly SEO websites and a fast UX, while resources in the ecosystem are scarce, the developers did provide a create-react-app blog template and a set of plugins. People who uses React they can leverage methods supported via the new withInitialProps HOC, to consume any data such like (REST APIs, GraphQL APIs for CMS etc.) via static async getInitialProps(). 

This API comes with another method for the pre-rendering step, called static async getAllPossibleUrls().

4. Hugo

Hugo

Hugo is an amazingly fast framework for building static sites, which is highly flexible and works cross-platform. It supports multiple content types, taxonomies, menus, dynamic API-driven content, and more without plugins.

Hugo also provides over 300 themes out of the box, unlike Gatsby, Hugo with React is not an out of the box thing; however, your Hugo blog can live inside a larger React application. So enjoy the superior performance and SEO of Hugo inside you React application.

5. Jekyll

Jekyll

Jekyll been around here as the world’s most widely used static site generator which mainly suited for blogs and eCommerce, part of the success for this SSG can be attributed to the very fast migration to Jekyll, using importers. Jekyll built with Ruby and integrates into GitHub Pages, and comes with a rich ecosystem of themes, templates and plugins.

Jekyll even provides free website hosting with GitHub Pages, which is a plus and in the React world, Jekyll struggles compared to the big 3 above.

6. Next.js

Next Js

Next.js is from the people behind Zeit. It’s a lightweight framework for static and server-rendered React applications, that also works as an static site generator for React while you can enjoy Next.js capabilities.

The export feature lets you run your Next.js app as a static app without the need for a Node.js server. This will pre-render all pages to HTML, based on the mapping of path name key to page object, called the exportPathMap.

By default next export does not require any configuration, and will generate a default exportPathMap that contais the routes to pages inside the pages directory. Which means you can develop your app enjoying the Next.js features automatic code splitting etc.., then export it almost as is as a static website.

7. 11ty

11ty

11ty is simply the alternative to Jekyll and been built on JavaScript, this means you don’t need to already be familiar with React. It’s zero-config by default but has flexible configuration options.

11ty works with your project’s existing directory structure, it uses independent template engines. 11ty don’t want to hold your content hostage so if you decide to use something else later, having your content decoupled in this way will make migration easier.

8. Sapper

Sapper

Sapper is a framework for building high-performance web apps. You’re looking at one right now! There are two basic concepts, first is the for each page of your app is a Svelte component, and the other is you create pages by adding files to the routes directory of your project.

These will be server-rendered so that a user’s first visit to the app is as fast as possible, and then a client-side app will take over. Building an app with all the best practices code-splitting, offline support, server-rendered views with client-side hydration is fiendishly complicated. Sapper does all the boring stuff for you so that you can get on with the creative part.

Share

8 Static Site Generators in 2020