My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

About Gatsby

Yahaya Oyinkansola's photo
Yahaya Oyinkansola
·Jun 22, 2020

Hey there, my name is Oyinkansola and i want to explain what Gatsby is and why you might want to learn it.

Over the years we have been using platforms like Wordpress, Wix and other CMS platforms to create websites that were dynamic but over time it became too overwhelming especially if we wanted to build something simple.

Now the introduction of static site generators changed all that and added a new way we could write code following the DRY principle of programming. Imagine you could write html without having to copy and paste the same amount of code everywhere, that's exactly why Gatsby is so important.

So what exactly is GATSBY?

Gatsby is a static site generator which uses react and also GraphQL to query for data.

One of the reasons Gatsby was made was to solve the problems of writing html code repeatedly. Let's use an example

<nav>
   <ul>
      <li>Home</li>
      <li>About</li>
      <li>Services</li>
  </ul>
</nav>

Imagine we have this navigation on like 20 pages on our site, you can already start imagining how stressful that would be and if we wanted to change something like "services" to a different text, we would have to do it for all the 20 pages so that alone shows the importance of Gatsby and the time it saves developers. Since Gatsby uses react, we can make a component and call that component wherever we need it, take for instance

import React from 'react';
import navbar from './components navbar';

function App() {
   return (
       <navbar />
   )
}

export default App;

From this example, we used the navber component in the main app component and if we needed it in other components, all we need to do is import it.

Thank you! for reading this, it's my first time writing an article and there is more to Gatsby. Please leave a comment if this helped you in anyway and if you would like to see more of this