DEV Community

Billy Okeyo
Billy Okeyo

Posted on • Originally published at billyokeyo.codes on

My First Experience With Gatsby.js

Alt Text

I've always wanted to try a static site generator and I never knew which one to start with them I came across gatsby...

Hey there, In this article I'll try to shed some light on my very first experience with gatsby which I started learning not more than a month ago.

So what's gatsby...

Gatsby is a static site generator built on top of react, node.js and graphql. It is an awesome framework which you can use for your static sites and also dynamic websites and web apps. To learn more on gatsby you can visit their website at Gatsby.js

From my experience with gatsby I'll say awesome features I have encountered in gatsby and those features made me want to explore gatsby more.

Note : Not all the features I'll mention here are the only features gatsby offers, they are a lot but I'll just talk about those I have tried.

1. Plugins

Gatsby has many plugins to suit all your needs. Whatever you might think of integrating in your site, there is probably a gatsby plugin for that.

For example I wanted to add SEO functionalities in my site, there is a plugin for that. I also wanted to add google analytics to my site and I got a plugin for that. I also wanted to allow my site cache some pages and can be viewed when your internet drops or becomes slow and I again got a plugin for that.

Integrating plugins in your site is also easy since each plugin has it's own page and it will show you how to integrate them into your site.

2. Using a CMS

As developers you might have this issue whereby, you are working on a project for a client and they want to use a CMS of their choice, one they are most comfortable with and in gatsby, you can integrate this easily. There are a lot of CMS to choose from ranging from WordPress to other CMS. I wanted to use strapi for my site and I managed to integrate it and it worked so well.

3. Markdown Support

Gatsby support markdown, for example if you wanted to have a blog in your site and wanted to write those blogs in markdown, then gatsby got you covered.

In gatsby, you just write your markdown files and gatsby will do the heavy lifting of changing your markdown files into HTML to be rendered in your site, doesn't that sound great.

4.Blazing Fast Sites

Everyone wants a fast site, no user would love to be staring at a screen which takes more than 30 seconds to load it's content.

Gatsby sites are relatively so fast because they use components and one component can be shared in multiple pages thus improving on loading times.

5. Link to

This feature is so awesome and it beats the anchor tag by far and it is actually from React but what this does is it allows your browser to cache all the pages linked using the "Link to" attribute so that when a user clicks on the link it doesn't do a full page refresh. This makes yours site's performance improve and be fast.

This can only be used to link to internal pages, for any external links use the anchor tag.

So far, I leave this article at that with those 5 greatest features I have experienced in gatsby.js. I'll share more as I dive deep into gatsby.

See you soon.

Top comments (0)