Top 10 Static Site Generators
With the growth of theand its community, Static Site Generators are becoming more and more popular. In this article, let's take a look at the top Static Site Generators of 2020!
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. 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!
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 repo
- Markup: The markup is generated by a Static Site Generator
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. For almost every problem I come across, I can usually find a plugin to help.
Gatsby also recently releasedwhich 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
- for optimized builds
- powerful ecosystem of plugins
- strong community
- backed by multiple rounds of funding
- support for PWAs
- amazing documentation
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.
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.
- server rendering with the option to export as a static site
- API routes for serverless functions
- backed by Vercel
- easily integrated with
- PWA support
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.
Although Vue doesn't quite have the following that React has currently, it's important to know that the Vue community has continued to grow immensely. Based on thesurvey, more and more people are using Vue and love it.
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
- PWA support
- automatic code splitting
While Gridsome compares nicely with Gatsby, our next item,, 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
- automatic code-splitting
- PWA support
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
- extremely fast
- Go is gaining traction as a language
- built-in templates for getting started quickly
- useful shortcuts in Markdown
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 populartemplating 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. 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
- code splitting
- offline support
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.
- built with Ruby
- ERB as default templating engine
- a plethora of packages, RubyGems
- YAML for frontmatter
Want to improve your coding and design skills?
I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.
We value your privacy. 1-click unsubscribe.
In this article...
What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)