Gatsby.js, a new and versatile static site generator

Gatsby is a static site generator with generic data sources. That’s also what makes it special. You can plug in a wide variety of data sources into Gatsby and it will generate static pages out of that. You can use anything from CSV or markdown files to a WordPress installation as a backend.

Writing sites in Gatsby is roughly the same as writing a single page app in React. The data from your data store of choice is made available through GraphQL. GraphQL is somewhat of a standardised API that allows plugin developers to make data available in a consistent way.

I’m tempted to rewrite my blog display and portfolio pages with Gatsby, because I actually have some custom pages written into the WordPress theme that I use. One of those is my /resume which follows the jsonresume spec and uses its own little build system.

So currently my website is a WordPress theme and a bunch of hacked-on pages, but it would be really cool if I could support multiple data sources out of the box AND to have it statically rendered instead of making PHP and MySQL serve every hit, even if the content is not changing outside of my edits (except for new comments and additions).

Apart from my personal curiosity, Gatsby obviously makes use of React in a pretty smart way, since it can both render things interactively or live-update some components of the site from an external API, but the default rendering target is HTML which speeds up the first page load significantly.

When changing pages, the rendered page is simply replaced by the next route, like in a React SPA.

There are a lot of beautiful examples of Gatsby on the official repository, here are some of my favourites (built with Gatsby at the time of writing):

You can see many more in the official README.md

Let me know which static site generators you frequent and if you have taken gatsby for a spin already or if you’d be curious to do so!

Leave a comment

Your email address will not be published. Required fields are marked *