Getting Started With Gatsby.js - Part 1

What you will Learn

In this tutorial you will learn the basics of Gatsby - A Static Site Generator based on React. Other things you will learn is

Basic File and Code Structure of Gatsby
Importing packages
How to Create Component and Use it in other file
How to Create Link from One File to Another

Requirements

Node.js and NPM installed on your System
Know basics of HTML, CSS and JavaScript, though not mandatory

Difficulty

Basic

Tutorial Contents

Recently I have started exploring React which is one of the hottest technology in the market right now. One of the reason of learning is then I can contribute more on teh bugs in Utopian, as my knowledge is limited in React. So I have tried to create a simple project using create-react-app npm package but somehow that is not working on my system. I was looking for alternative and found out that Gatsby is one of the alternatives of it. The only issue with Gatsby is that it only used for Static Site Generator. I thought of giving it a try since it might be a new thing to learn.

The advantages of Gatsby includes its fastness, you need not have to think about Webpack (React thing) because its build inside the gatsby itself, easily integrated with APIs and Database.

So Let's Get Started with Basics of Gatsby

Installation : Installation can be done from npm using the command npm install --global gatsby-cli which will install your gatsby globally. Once done you can start your new Gatsby project by writing gatsby new gatsby-site. Once done you need to go inside gatsby-site directory and type gatsby develop which will open the development browser at localhost:8000 as shown below

Our Directory Struvture looks like below where all the code resides in src folder. Layout is the main folder where we have the layout of the entire site. It contains index.js file which is nothing but a starting point of your React Application as shown below

layout>index.js

Now if you are new to React like me its better to go each and every line and see what it does. The first five lines is just for importing all the files or packages we will need in this file. We will come to that file usage when we reach that info. Next we are creating a const variable which has some code written inside it. One thing to note here is that React uses JSX that means it combines your HTML with JavaScript and tightly coupled them. TemplateWrapper is nothing but a React Component which holds the layout of the Gatsby application.

Just with the start we are using Helmet component(imported as react-helmet) which is used to attach all the header meta information like description, keywords to your generated HTML file thus known as document head manager for React, you can get more information here https://github.com/nfl/react-helmet.

Next we are attaching the Header component inside the TemplateWrapper using

whose code can be found under components > Header > index.js (which will take a look later). We are also styling our page inside the template itslef so that it remains inside it if we are using this component anywhere else too. One more thing to note here that you need to invoke the function (children ()) within the Component itself so that it know where all the HTML files to be inserted.

Next is to export the TemplateWrapper so that any other file can use it as a component. As I said before we will go through the header component as well. So Header Component Looks like below :

component>header>index.js

Same like TemplateWrapper you need to first import all the required package and then create the component having HTML and Javascript as well as CSS. One think to note here that we are using one more component called Link (gatsby-link) which is a package by gatsby to easily create links inside the component itself which will take the URL structures you are using. Now our structure is Done with the Template having Header and Layout. Next thing is to create the pages. The main page looks like below

Where we have a component named IndexPage containing JSX temnplate code and then we are exporting it. If you see closely we are also creating a link which will go to Page-2 where the page 2 looks like below :

You can both the files looks similar in implementation having different wordings. This way you get started with Gatsby Static Site Generator. In our next post we will extend our work on creating a Simple Static Website.

Note : I need to attach pictures of the Code as Code Formating Not Working Properly

Posted on Utopian.io - Rewarding Open Source Contributors