An Overview of Gatsby

Mo Zahid
Mo Zahid
Published in
3 min readJul 30, 2021

Some Background

In a week and a half I will be starting a volunteer position where I will be assisting a non-profit organization part-time as a front-end developer. I am super excited because I have been working with this non-profit for almost 4 years in some capacity and now will have a chance to utilize my new development powers to do some good in the world. What a beautiful way to start this next chapter in my life.

In my first meeting with the Senior Developer he mentioned that they use a framework called “Gatsby”. This blog will be an introduction to “Gatsby”.

What is Gatsby?

the above is a snippet from https://www.gatsbyjs.com/

Regardless of the website having the word “static” striked through I have gathered that Gatsby is indeed a static site generator (SSG). A SSG will take components, templates and data and it serves up static html files (The net ninja, 2021). These files would then be taken and put up on a server. This could be considered to be different from how other websites work where they have a convention of having to query a database or do programming on the server. Instead, everything is already preconfigured and ready to be served (Zac Gordon, 2021).

Even though the html files that Gatsby serves up are static in nature it does not mean the website itself is not interactive. Just because you don’t have programming server-side languages running does not mean you don’t have the ability to build rich, powerful and immersive websites. Also, JavaScript and API calls can still be loaded into the html files (Zac Gordon, 2021).

How do I work with Gatsby to serve Static HMTL files?

Gatsby is a site building tool! You can run Gatsby locally on your computer. Then you can generate the final static site. Gatsby uses Node.js when in the local development environment, but the final product will still be html files so Node.js is not required on the server. Gatsby also uses the GraphQL language to pull data making API calls easy.

In addition, it also utilizes React for templating. It also allows you to style using CSS. Finally, an export serves up a super fast static site (Zac Gordon, 2021)!

Plugin Architecture

One huge aspect of Gatsby is its plugin architecture. A static site creates some complexity around how we interact with JavaScript etc. Having the ability to breakup this complex code with a series of plugins is useful (Zac Gordon, 2021).

Conclusion

Gatsby is a great open source project which is free! It has Great documentation and is a framework worth investing in! It offers the benefit of speed and is known for how developer friendly it is. I’ll start working with it hands on in about 10 days and I am very excited. Hopefully I can put up another blog post on it soon.

References

The Net Ninja. 2021, July 29th. Gatsby Tutorial #1 — What is a Static Site Generator? [video]. YouTube. https://www.youtube.com/watch?v=Qms4k6y7OgI

Zac Gordon. 2021, July 29th. What is Gatsby JS and Why Use It [video]. YouTube. https://www.youtube.com/watch?v=GuvAMcsoreI

--

--