gatsby-tutorials (20 Part Series)
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.
Since, my project is hosted on Github, i will click on the same.
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.
Since, i have many repos so i had to search for the repo and then click on it.
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.
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.
Here, click on Change site name button.
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.
Once, you clicked on the Save button, you can see your site is 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.
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.
We can open http://localhost:8000/___graphql in web browser and will be shown the below screen.
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.