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!

JAMStack

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.

Reasoning

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

Pricing

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

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.

Scalability

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.

SEO

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.

Security

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.

Downsides

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.

Tooling

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.

React-based

GatsbyJS

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

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.

Vue-based

Gridsome

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

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

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.

Other

Hexo

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

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

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.

Conclusions

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 : 8310  
 
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 upload files to the server using JavaScript

In this tutorial we are going to see how you can upload files to a server using Node.js using JavaScript, which is very common. For example, you might want to…

How to combine multiple objects in JavaScript

In JavaScript you can merge multiple objects in a variety of ways. The most commonly used methods are the spread operator ... and the Object.assign() function.   How to copy objects with…

The Payment Request API: Revolutionizing Online Payments (Part 2)

In the first part of this series, we explored the fundamentals of the Payment Request API and how it simplifies the payment experience. Now, let's delve deeper into advanced features…

The Payment Request API: Revolutionizing Online Payments (Part 1)

The Payment Request API has emerged as the new standard for online payments, transforming the way transactions are conducted on the internet. In this two-part series, we will delve into…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

How do you stop JavaScript execution for a while: sleep()

A sleep()function is a function that allows you to stop the execution of code for a certain amount of time. Using a function similar to this can be interesting for…

Mastering array sorting in JavaScript: a guide to the sort() function

In this article, I will explain the usage and potential of the sort() function in JavaScript.   What does the sort() function do?   The sort() function allows you to sort the elements of…

Infinite scrolling with native JavaScript using the Fetch API

I have long wanted to talk about how infinite scroll functionality can be implemented in a list of items that might be on any Web page. Infinite scroll is a technique…

Sorting elements with SortableJS and storing them in localStorage

SortableJS is a JavaScript extension that you will be able to use in your developments to offer your users the possibility to drag and drop elements in order to change…

What is a JWT token and how does it work?

JWT tokens are a standard used to create application access tokens, enabling user authentication in web applications. Specifically, it follows the RFC 7519 standard. What is a JWT token A JWT token…

Template Literals in JavaScript

Template literals, also known as template literals, appeared in JavaScript in its ES6 version, providing a new method of declaring strings using inverted quotes, offering several new and improved possibilities. About…

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…

Clicky