As of right now, there are multiple options to choose from when it comes down to Static Site Generators. It doesn’t matter which language you prefer. Would you like to code in ? There’s Next.js¹ and Gatsby² among the most popular ones. You like to write in Go? Hugo³ would be the best option for you. JavaScript If Ruby is the language of your choice you should probably go with Jekyll⁴ or Middleman⁵. You can explore the whole list of 458 static site generators ⁶. More enjoyable version of the list ⁷. here here With the sheer number of options available, choosing one will be a tough nut to crack. In this article, I’d like to go through some of the most popular options and help you make the best decision for your project. Jekyll This Static Site Generator is built on top of Ruby. The first version on Github was released in 2009, making it the oldest SSG from the top 4 that I’m describing in this article. Jekyll is also the engine behind GitHub Pages which explains why it’s the most popular option right now. Jekyll’s popularity on over time: GitHub Jekyll Stars on GitHub (data fetched with ) https://github.com/timqian/star-history The biggest advantage Jekyll has over other SSGs is it’s simplicity. You don’t have to put in a lot of effort to set up a simple blog-aware website. Jekyll Pros 👍: 👍 Simplicity It’s very simple and fast to set up and deploy your site on Github Pages as they fit well together. 👍 Huge community What means a plethora of tutorials that’ll show you how to get started. You’ll also for sure find support as you face some difficulties. 👍 Liquid templating engine If you’re coming from the most popular CMS options available on the market, like WordPress, you should feel well with Liquid templating structure. 👍 A whole lot of available open-source plugins In most cases you’d like to do more with your websites than just generate static files. That’s when the long list of Jekyll plugins comes to help you. Jekyll Cons 👎: 👎 Ruby environment needed It might be a tough nut to crack, especially for Windows users since it’s not officially supported by Jekyll. 👎 Building time Plugins availability can be a Con as well. If you’ll use a couple of it then it’ll definitely slow down your building process. Hugo Hugo’s first release came out in the second half of 2014. It’s powered by Go programming language aka. Golang⁸. Hugo’s general structure is very similar to the one offered by Jekyll. It’s really important to mention that Hugo is unbeatable when it comes down to building times. It turns out that Hugo can be as much as 63 times faster than Jekyll when handling big amounts of posts⁹! Hugo’s popularity on GitHub over time: Hugo Stars on GitHub (data fetched with ) https://github.com/timqian/star-history Hugo Pros 👍: 👍 Incredible fast building Hugo is unbeatable when it comes down to building times. I personally don’t know any faster Static Site Generator than Hugo, which makes it great choice for big websites. 👍 Flexible You don’t have to search and install any plugins since Hugo supports multiple content types alone. 👍 Cross-platform Hugo has binaries for Windows, Linux, FreeBSD, NetBSD, macOS, and Android for x64, i386 and ARM architectures. Hugo Cons 👎: 👎 Golang Syntax Go language is definitely not the most popular programming language so you may have some difficulties with Hugo’s syntax at the beginning. 👎 No built-in asset processing There’s no asset pipeline built into Hugo, so you have to use external tools. Next.js The first version of Next.js was released on October 26th, 2016 which makes it the youngest contender in this article. Even though it’s popularity has been rising insanely fast, it may be a little bit concerning for some that Next.js is not a pure Static Site Generator, but can be used as one. So what exactly is Next.js? In a nutshell: it’s a framework for server-rendered or statically-exported JavaScript applications. Next.js’s popularity on GitHub over time: Next.js Stars on GitHub (data fetched with ) https://github.com/timqian/star-history Next.js Pros 👍: 👍 Single Page App feeling Since Next.js is built on top of React.js it brings to it all the advantages React has like pre-fetching and JSX template system to name a few. 👍 Automatic Code Splitting Pages never load unnecessary code. 👍 Great learning materials If you’re not familiar with building Single Page Applications you can get started very fast ¹⁰. here 👍 You can jump to full PWA anytime If is no more sufficient, you can enable Node.js server. static page Next.js Cons 👎: 👎 Learning curve Comparing to what you’ve to learn going the Jekyll/Hugo way it’s a lot harder to jump into Next.js if you’re totally green with React, JS, JSX etc. 👎 Static page building time It’s hard to beat Hugo in this area. Building time for large websites could be pretty long. Gatsby Gatsby’s first release took place on October 6th, 2015. It’s worth mentioning that it has one of the most active communities of all the Static Site Generator projects — 807 contributors as of right now. To cut a long story short, Gatsby is a static Progressive Web App generator. Gatsby’s popularity on GitHub over time: Gatsby’s Stars on GitHub (data fetched with ) https://github.com/timqian/star-history Gatsby’s Pros 👍: 👍 GraphQL inside Data directly into our components — in the shape and form we want. GraphQL is pretty big topic, you can read more about it . here 👍 PWA by default You don’t have to put much effort to turn your Gatsby static website into offline available app. Setting up Gatsby service workers is as easy as pie! Just one gatsby-plugin. 👍 Growing plugin ecosystem There are dozens of plugins, you can easily connect most popular Headless CMS, Google Analytics, image optimization, service workers and more!¹¹ 👍 Data & code prefetching Site would feel like a single page app while still benefiting from the performance of a static site. 👍 Great community and learning materials It’s easy to get started with Gatsby’s step by step tutorial available ¹² here Gatsby’s Cons 👎: 👎 Learning curve JS, React, GraphQL. 👎 Long building times Comparing to all of the above Static Site Generators it takes Gatsby a lot time to throw out the files after you hit the build command. Summary This is what we learned so far by using Static Site Generators at Bejamas. Let me wrap things up a little bit at the end: If you’re seeking simplicity and pretty short learning curve — you better go with Jekyll. Building a big site, want to change and add a whole lot of new posts? Choose Hugo. In any other cases, I’d suggest you to go with Gatsby or Next.js. Why? Because javascript is eating the web development world. If you’re fresh in this field and looking for something that has a big community, is trending and has a good outlook for the future — you should definitely go with the last two frameworks described in this article. That are just my thoughts though. What you think of it? Are there any pros or cons that I didn’t bring to the table? This article was originally posted on our company website: https://bejamas.io/blog/guide-into-static-site-generators/ Footnotes https://nextjs.org/ https://www.gatsbyjs.org/ http://gohugo.io/ https://jekyllrb.com/ https://middlemanapp.com/ https://staticsitegenerators.net/ https://www.staticgen.com/ https://en.wikipedia.org/wiki/Go_(programming_language) https://forestry.io/blog/hugo-vs-jekyll-benchmark/ https://nextjs.org/learn/ https://www.gatsbyjs.org/plugins/ https://www.gatsbyjs.org/tutorial/

Google

Progressive

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Guide into Static Site Generators

Too Long; Didn't Read

Companies Mentioned

Denis Kostrzewa

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Guide into Static Site Generators

Too Long; Didn't Read

Companies Mentioned

Denis Kostrzewa

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES