Gatsby.js – a Better Way to Create Static Websites

If you do, you also remember the pains of being front-end developer – handling the complexity of web typography, struggling with image optimization, preparing proper image sizes for various screen resolutions on your own. Imagine how much time did you waste on tasks.

Luckily, the state of front-end development has been greatly improved and with every year we gain more and more tools that help us create better, faster, more performant websites. And one of these tools is Gatsby.js – a modern static site generator based on known and well-liked React.

But what the heck is static site generator – you ask. Well, it’s a tool that lets you create sites based on static files in easy and pleasant for the developer way. „Static” means, that you’re not gonna have any dynamically loaded content in your website. Once you build your website and deploy it – it stays the same and you can’t change it via CMS nor API. You can though use CMS to change the content, that triggers a new build, and swaps the content already deployed on a server. As a result, you get plain HTML/CSS/js site which is lightweight and super easy to host.

With Gatsby, you can easily handle your project complexity, cause you can use React components, which are simply awesome when it comes to the scalability of the front-end project. Also, there's no need to worry about such things as typography, complex styles, reusability of your code, image optimization and so much more! But enough with the talking – come on, I'll show you some code!

Setup

To start your adventure with Gatsby, you simply need to install gatsby-cli as a global package and create a new project with it.

It will create simple boilerplate with index page along with 404. From now on, you can create your own pages by simply adding other .js files into the „pages” folder. You'll probably ask how to provide a proper routing for them? Just use Gatsby Link component, and pass a name of the file into the „to” props.

We're not getting too deep into this, cause I have something even more exciting to show you. After all, you can always check the documentation, which is really well written. You can check it out right here.

Plugins

The power of Gatsby is in plugins. Those little bits of code will save your time on all those repetitive tasks mentioned in the first paragraph. Check out Gatsby’s plugin directory - https://www.gatsbyjs.org/plugins/ . There is basically a plugin for everything! When you're done with the setup (which should take few minutes only), you can proceed to the more exciting part, which is adding proper plugins to your website so it can leverage the true power of modern frontend tools. ESLint, Styled Components, Typography.js are at your hand. Simply install them into your repository, and declare them in gatsby-config.js file.

And if you're still not convinced that developing site with Gatsby is real fun, take a look what Dan Abramov has to say about it.

The smartest way to handle images

The thing that I would like to explore a little bit more here is managing your visual assets. It was always a pain for a developer, to handle multiple .jpgs and .pngs with proper dimensions, sizes etc. Gatsby seems to alleviate this struggle by giving you a possibility to load just one big file, which is being compressed during the build time. It also allows you to create sourceset with multiple versions of the same image so that every device can download only one – optimal size for itself. The basic setup should look like this:

First, we need to setup our gatsby-config.js so it can resolve image files. Thanks to that, we will be able to create GraphQL queries. The sharp transformer plugin will allow us to apply complex operations on our image.

Now let's add an image to our assets/images folder. After that, let's proceed to the index.js page where we can write our first GraphQL query. Our image file name is winter.jpg so it's pretty simple, but if the name would be more complex like background-image-winter-2x.jpg then our regex would come in handy, cause winter regex will resolve it anyway with just a few special signs added. Don't forget about that super cool imageSharp function – it allows you to do some magic with your files. The fluid property allows you to create responsive images, with maximum height and width, and also – you can compress the file easily by just setting the quality (from 0 to 100).

After that, in our Gatsby console (if it runs) we will be able to see, that gatsby-cli is taking care of compressing and creating multiple version for our sourceset.

Next, we need to destructure data prop into our IndexPage component – and from this prop, we will be able to pull our transformed images. It is a prop automatically provided by Gatsby when the GraphQL query is present in the component file. In this case, we're getting srcSet from a query so we can apply it into simple <img> tag. Check it out:

And here we are! Our image is displayed on the screen – and adjusts to the size by loading file with optimal dimensions.

What's even cooler, we can forget about srcSet and <img> tag, and use gatsby-image component, which can leverage features provided by sharp image transformer. Instead of getting simple srcSet string, we're receiving GatsbyImageSharpFluid object, which encodes the image in base64 – now it's 100% responsive and even smarter than the srcSet.

There’s one more awesome feature – base64 provides blur effect while loading, which gives user feeling of the immediate page render. Don't forget to check other possibilities of image encoding using sharp transformer – you'll find it in gatsby-image documentation.

So where can i host it?

This part is probably the most exciting. To generate a website from all this React stuff you simply need to run gatsby build command. After that, in your public folder, you'll find a static page, that you can host on any hosting – even on the s3 bucket! But underneath the superficial simplicity of static page, you'll find super smart solutions like PWA features, aggressive prefetching, responsive images encoded in base64 and so much more! Now go ahead and try it yourself!

But is it still worth to use it in 2019?

Of course! Gatsby is widely supported both by the community and core team (and apparently even by creators of React). It will definitely dominate the market of static websites because no other solution offers so much for so little effort. Just take a look at what we achieved in only a few steps! We’ve created a fully functional static site with routing and image processing. Our site offers out-of-the-box PWA features and maximum score on a performance audit. It would be a lot more complicated if we choose to do the same in classic, plain HTML/CSS/js front-end stack.

Photo by Markus Spiske on Unsplash