Gatsby

Welcome to part-5 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

In this part, we will first learn how to do continuous deployment using netlify. It is a great service to host your gatsby project. As, this project is already on github, i just have to login to my netlify and link it to host the site.

Login to your netlify account or create one. Since, i already have a netlify account and have many sites hosted on it, by login screen looks like below. Here click on New site from Git button.

NetlifyNetlify

Since, my project is hosted on Github, i will click on the same.

GithubGithub

It will open a pop-up window and ask you to authorize with your github credentials for the first time. Since, i had already authorized it too me directly to this screen, which shows all by github repos.

Github reposGithub repos

Since, i have many repos so i had to search for the repo and then click on it.

Tourism repoTourism repo

In the next scree it will show all the details of the repo. It will even run the gatsby build command for us, once we hit the Deploy site button.

gatsby buildgatsby build

In the next page it will show us our random site name, in which netlify is deploying. We can click on Site settings button to change our site name, to a more suitable name.

Random siteRandom site

Here, click on Change site name button.

Change site nameChange site name

In the pop-up give any good name. Here i am giving amazinghampi, but netlify.com will be added to it. We will remove this at the end of the series, by purchasing a domain name and changing it.

SaveSave

Once, you clicked on the Save button, you can see your site is deployed.

Site deployedSite deployed

Click on the deployed site and your site is now on the internet. Now, whenever you push some new code in GitHub, netlify will directly update the site.

Awesome HampiAwesome Hampi

Till this moment we have used React way to do things in Gatsby. But the real power of Gatsby comes from GraphQL and using different plugins, which uses GraphQL.

When we run any Gatsby project with gatsby develop and when it compiles sucessfully, we get the link of GraphiQL. It is the playground in which we can test all our GraphQL queries before implementing them in our code.

GraphiQLGraphiQL

We can open http://localhost:8000/___graphql in web browser and will be shown the below screen.

In BrowserIn Browser

Here, we will test our GraphQL queries before using it by StaticQuery or PageQuery in gatsby code.

We will be using image optimization in our project through GraphQL, as that is one of the main reason for sites to load slow.

But before we do that, we need to install some plugins and do some configs. We will start with that in the next part.

This post is also available on DEV.