The Jamstack (JavaScript, APIs, and Markup) is increasingly becoming the development stack of choice on the Web. The title on the Jamstack website suggests that the Jamstack is “the modern way to build websites and apps” and that it “delivers better performance”.
Performance is certainly one of the benefits the Jamstack brings to the table, together with better security, scalability, and developer experience. Sites built on this type of architecture make use of pre-rendered static pages served over CDNs, can get data from multiple sources, and replace traditional servers and their databases with micro service APIs.
What makes possible the creation of static sites quickly and relatively painlessly are static-site generators (SSGs).
There are tons of static-site generators in a range of programming languages, such as JavaScript, Ruby, Go, and more. You’ll find an exhaustive, unfiltered list on staticsitegenerators.net, but if you’d like something more manageable, check out the Jamstack website”s list, where you can filter static-site generators by name or by the number of GitHub stars.
In this article, I’m going to list seven popular static-site generators and their main features, so that you can form a better idea of which one among them would be a good fit for your project.
What Are Static-site Generators?
Table of Contents
A common CMS (content management system) — like WordPress for instance — builds the web page dynamically as it’s being requested by the client: it assembles all the data from the database, and processes the content through a template engine.
On the other hand, static-site generators —
apply data and content to templates, and generate a view of a page which can be served to the visitors of a site.
The greatest difference between a static-site generator and a traditional web application stack is that, instead of waiting until a page is requested and then generating its view on demand each time, a static-site generator does this in advance so that the view is ready to serve ahead of time. And it does so for every possible view of a site at build time. — “What is a Static Site Generator? And 3 Ways to Find the Best One”
If you’re curious and would like to learn more, this great article by Brian Rinaldi looks closely at the inner workings of static-site generators.
But, what about all the good things that come with CMSs, like content creation and update by non developers, team collaboration around content, and so on? Enter the headless CMS.
A headless CMS —
is a content management system that provides a way to author content, but instead of having your content coupled to a particular output (like web page rendering), it provides your content as data over an API. — “Headless CMS explained in 2 Minutes”
This way, the editorial team, for example, can continue working from their familiar, user-friendly admin interface and the content they produce or update is just one data source among others that static-site generators can access via the exposed API. Popular headless CMS software include Strapi, Sanity, and Contentful. Also, WordPress has a REST API that allows devs to use it as a headless CMS.
So, the modern Jamstack tooling makes it possible to build a statically-served website and still get the benefits of a content management system.
Now, let’s go through some static-site generator options.
1. Gatsby
Gatsby is a full-blown framework for building static websites and apps. It’s built in React and leverages GraphQL for manipulating data. If you’re curious and want to delve deeper, check out “Getting Started with Gatsby: Build Your First Static Site” on SitePoint and the docs on the Gatsby website.
Here are some of Gatsby’s strong points:
- With Gatsby you get to work with the latest web technologies — with React, webpack, modern JS, CSS and so on all ready for you to just start coding your site.
- Gatsby’s rich plugin ecosystem allows you to use any kind of data you prefer from one or more sources.
- Easy deployment and scalability, which is mainly due to the fact that Gatsby builds static pages that don’t require complicated setups.
- Gatsby is a progressive web apps (PWA) generator:
You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. — Gatsby website
- gatsby-image combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites.
- Plenty of starter sites are available for you to grab freely and customize.
2. Next.js
Next is a versatile framework for the creation of server-rendered or statically exported JavaScript apps. It’s built on top of React and is created by Vercel.
To create a Next app, run the following command in your terminal:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter" cd into nextjs-blog, your newly created directory, and type the command to open your Next JS app’s development server on port 3000:
npm run dev To check that everything works as expected, open http://localhost:3000 in your browser.
Next.js has great docs, where you can learn more about building and customizing your Next-based apps.
Here are a number of Next’s best features:
- Next renders on the server by default, which is great for performance. For a discussion of the pros and cons of server-side rendering, check out this article by Alex Grigoryan on Medium.
- No setup necessary: automatic code-splitting, routing and hot reload out of the box.
- Image optimization, internationalization, and analytics.
- Great docs, tutorials, quizzes and examples to get you up and running from beginner to advanced user.
- Built-in CSS support.
- Tons of example apps to get you started.
3. Hugo
Hugo is a very popular static-site generator with over 49k stars on GitHub right now. It’s written in Go, and advertises itself as being the fastest framework for building websites. In fact, Hugo comes with a fast build process, which makes building static websites a breeze and works great for blogs with lots of posts.
The docs are great and on the platform’s website you’ll find a fantastic quickstart guide that gets you up and running with the software in no time.
Here are some of Hugo’s most loved features:
- Designed and optimized for speed: as a rule of thumb, each piece of content renders in about one millisecond.
- No need to install extra plugins for things like pagination, redirection, multiple content types, and more.
- Rich theming system.
- Shortcodes available as an alternative to using Markdown.
- Since December 2020, Hugo offers Dart Sass support, and a new filter to overlay an image on top of another — Hugo 0.80: Last Release of 2020!
Continue reading Static Site Generators: A Beginner’s Guide on SitePoint.
