How to Generate Static Sites with JavaScript Static Sites Generators

by Luigi Nori Date: 13-12-2019 Library JavaScript Framework Node.js compiler static

Static websites and so-called JAMstack have become pretty popular recently. And with 2020 on the horizon, this trend doesn't seem to be stopping. Why? Why is old-school HTML + CSS + JS  trio in its redesigned and renamed form gaining so much attention? In this article, we'll explore what the JAMstack is and what's so good about it, as well as check out some of the best NodeJS-based Static Sites Generators (SSGs). Let's get started!


The JAMStack

For starters, let's talk a bit about the JAMstack and static websites themselves. As you might already know, stack in programming is a term used to reference some toolset - a collection of libraries and frameworks. The popular examples of that are MEAN (MongoDB, ExpressJS, Angular, and NodeJS) and MERN (React instead of Angular) stacks. So, as you can see, there's some decrypting going on here.

Now, let's get back to the JAMstack and, more specifically, to its definition:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

I think the text above is self-explanatory. With this information, we can make sense of the JAM shortcut:

  • JavaScript - web developer's best friend, a place where all the logic is executed. Usually present both on the generator and client-side;
  • APIs - providers for JS to pull data from;
  • Markup - templates, processed at deployment time of your website.

"JAMstack", as a term, was first used by Netlify around 2015. Its primary purpose was to convince developers to well-known and somewhat disliked static websites. A new name was meant to change people’s mindsets about old technology. As we know today - this strategy worked!

The main idea behind the JAMstack is the removal of any tight connection between the client and the server. The only way to receive your data is through APIs. Such data can be later processed together with markdown and other resources to create a static website that is then served to the client.


Now that we know all the terminology, it's time to explore the reasons and benefits behind the JAMstack.


Pricing is probably one of the most important advantages of static websites. To host them, you need no powerful server, no CMS and, what comes with it, less money. Remember, you process/prebuild your website to the form of static assets (HTML, JS, CSS, text files, etc.). These can be served ridiculously cheaply with no higher demands than just standard, low-priced hosting.


Performance is the next focus point of static websites. This might seem pretty obvious - static assets are fast - it's in their nature. Nothing can beat them in this category. Using JAMstack, you can easily achieve high Google Lighthouse scores, thus getting higher in search results too! Outside from that comes the ease-of-use of Content Delivery Networks (CDNs), which can boost your website's delivery speed even more!

Stability & confidence

This one might be a little tricky. What does confidence mean? Well, mainly the stability of your website and its architecture. With JAMstack, things are really straightforward. There's nothing more to it than just the static frontend and the generation process.

Your data comes from different APIs. Other functionalities can be provided with serverless systems. The main idea behind it is that you use 3rd party APIs and services to provide additional features to your website. There are many public serverless providers, including AWS, Google Cloud, and Microsoft Azure, all of which play nicely with static websites.


JAMstack-based websites are easily scalable. It's mainly due to the performance and architecture solutions behind them. Earlier mentioned, CDNs play an essential role here. Improving the delivery process can mean nothing more than providing more faster CDNs.


Yet another holy grail of static websites. When using JAMstack, having good SEO ranking is much easier than with Single Page Applications (SPAs). Static websites get better Lighthouse scores and are more likely to be fully indexed by Google and other search engines. That's where SPAs are truly lacking. You have to use Server-Side Rendering (SSR) to get the same SEO performance as static websites provide pretty much out-of-the-box.


Last but not least, there are security reasons. With your what could be backend spread into the number of APIs and other 3rd party services, the risk of severe security issues is significantly reduced.


Of course, static websites have some disadvantages too. Probably the biggest one being that they are static. Again, what it means is that you don't have any real backend running behind them. And, as not every functionality can be well-substituted by serverless services, JAMstack isn't suitable for everyone.

Furthermore, static websites are not as "upgradable" as their dynamic counterparts. To update their content, you need to pre-process it first. And, the more and more pages your website has, the slower this process becomes. That's why the build performance that many tools advertise so much is so important.

So, with all that said, the decision is yours to be made. Whether you'll choose the static or dynamic path for your future website, it's always good to first consider the pros and cons of both solutions.


Now it's time to explore some of the best JAMStack tools. But before that, let me provide some general details over the following generators.

First, the tools listed below are based on NodeJS (JavaScript) and grouped by the used JS framework. Second, all the tools here are general-purpose - no documentation generators or other specialized libraries and frameworks.



GatsbyJS landing page

GatsbyJS is arguably one of the most popular static websites generators out there. It allows you to utilize popular tools like Webpack and, most importantly, React to create stunning-looking static websites. Besides that, the build speed of GatsbyJS is fast enough to handle even complex, multi-page setups. Great community, docs, and vast ecosystem make this generator one of the best in its category. A great number of plugins (both first and third-party ones) allow you to pull data from countless sources (with the help of GraphQL) and add different functionalities to your website with ease.


Next.js landing page

Next.js is yet another React-based SSG. It's created and supported by Zeit and is well-known within the React community. Not only it's a generator but a full-blown framework with other functionalities such as SSR built-in. It gives you a choice on what type of website you want to create. With that said, Next.js can be considered an All in One (AiO) tool for everything that has something to do with React-powered websites. It has excellent documentation and an even better community behind it.

React Static

React Static GitHub repo

React Static, as the name implies, is a progressive Static Site Generator (SSG) for React. Being tightly connected with React, it has great support for all the related libraries and tools, such as Redux. It has a great build and resulting website performance. It also simplifies the development experience with hot-reloading out-of-the-box. All this and more is documented in fine-tuned GitHub-based docs.



Gridsome landing page

Starting the list of Vue-based SSGs, we have Gridsome. It's somewhat like a GatsbyJS counterpart but for Vue! It has equally impressive build and resulting website performance, Progressive Web Applications (PWAs) and SEO optimizations support, and other JAMstack goodness! Maybe it doesn't have the community as big as GatsbyJS has, but, as it's a relatively new project, I think it looks great! With that said, its documentation and community involvement are truly impressive.


Nuxt.js landing page

Nuxt.js is a full-blown framework. What does it mean? Mostly that it's a Next.js Vue alternative and that it has as much as three rendering modes: SSR, static website, and SPA. Nuxt.js as AiO solution allows you to choose what's the best for your website. It's very stable, well-known, and has great docs, community, and ecosystem. With all that in mind, it's the right choice for any kind of demanding Vue project.


VuePress landing page

VuePress is a little bit different than previous tools. It's very minimalistic and allows you to generate your page's content with the help of simple markdown files. It features rich plugin architecture and leverages the power of the Vue ecosystem. It is somewhat tailored towards documentation websites; however, with the option of using custom Vue components in your content, this tool can be used for many different purposes. In general, its main pros are simplicity and ease-of-use.



Hexo landing page

Hexo is NodeJS and Markdown-based SSG, tailored towards blog writers. It's fast and has a rich plugins collection. These provide different kinds of features to your Hexo-based static website. The framework also has a well-developed theme system with several themes listed on its official page. Naturally, you can create your own plugins and themes to suit your personal needs. Hexo also has detailed documentation and a fine-sized community.


Eleventy landing page

Eleventy (or 11ty) is a simple SSG, a JS alternative to Jekyll. It's incredibly flexible, works well with data, and supports a lot of different templating engines and languages (markdown, html, hbs, etc.). 11ty's overall simplicity, ease-of-use, and progressive nature make it a valuable tool. Also, docs are great and very informative.


Sapper landing page

Sapper is an SSG based on the Svelte framework, that on its own, is recently getting a lot of traction. Because of the nature of Svelte, which moves a lot of processing to the compilation step, it's fast by default. Sapper also has SSR support and other AiO framework goodness. So, if you like Svelte, are interested in it, or want to try it out, then Sapper might be the choice for you.


Now that you know what JAMstack is and what tools are there to deal with it, it's time for you to make a website! Go, pick one of the generators above and try for yourself to find out how nice static websites can be. There's no other magic way to find the best tool for you, besides just trying them all out. With that said, I hope that this article provided at least a little inside to how big and exciting the static world can be.

by Luigi Nori Date: 13-12-2019 Library JavaScript Framework Node.js compiler static hits : 7203  
Luigi Nori

Luigi Nori

He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.


Related Posts

How to use the endsWith method in JavaScript

In this short tutorial, we are going to see what the endsWith method, introduced in JavaScript ES6, is and how it is used with strings in JavaScript. The endsWith method is…

What are javascript symbols and how can they help you?

Symbols are a new primitive value introduced by ES6. Their purpose is to provide us unique identifiers. In this article, we tell you how they work, in which way they…

Callbacks in JavaScript

Callback functions are the same old JavaScript functions. They have no special syntax, as they are simply functions that are passed as an argument to another function. The function that receives…

How to create PDF with JavaScript and jsPDF

Creating dynamic PDF files directly in the browser is possible thanks to the jsPDF JavaScript library. In the last part of this article we have prepared a practical tutorial where I…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Node.js and npm: introductory tutorial

In this tutorial we will see how to install and use both Node.js and the npm package manager. In addition, we will also create a small sample application. If you…

How to connect to MySQL with Node.js

Let's see how you can connect to a MySQL database using Node.js, the popular JavaScript runtime environment. Before we start, it is important to note that you must have Node.js installed…

JavaScript Programming Styles: Best Practices

When programming with JavaScript there are certain conventions that you should apply, especially when working in a team environment. In fact, it is common to have meetings to discuss standards…

Difference between arrow and normal functions in JavaScript

In this tutorial we are going to see how arrow functions differ from normal JavaScript functions. We will also see when you should use one and when you should use…

JavaScript Arrow functions: What they are and how to use them

In this article we are going to see what they are and how to use JavaScript Arrow Functions, a new feature introduced with the ES6 standard (ECMAScript 6). What are Arrow…

How to insert an element into an array with JavaScript

In this brief tutorial you will learn how to insert one or more elements into an array with JavaScript. For this we will use the splice function. The splice function will not…

What is the difference between primitives types and objects in JavaScript?

In this short tutorial we are going to look at the differences between primitive types and objects in JavaScript. To start with, we're going to look at what primitive types…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration