Learn GatsbyJS by creating a tourism site -1

After creating two series with GatsbyJS — Agency site and Blog Site, i wanted to learn more about this awesome tech.

I found this awesome series on udemy by John Smilga and this huge series is based from the learning from his course.

I will be creating a site about the awesome World Heritage place in India, known as Hampi.

Let’s head over to a terminal and create a new gatsby project called gatsbyTourism, using the hello-world starter kit.

Image for post
Image for post
Gatsby Start

Next, we will change to the directory and do gatsby develop, to start our project on localhost.

Image for post
Image for post
gatsby develop

It will start our basic hello-world starter, which will just show Hello World! on http://localhost:8000/

Image for post
Image for post
Hello World

We will open our code in VSCode. Here, we can see that the Hello World! displayed in browser comes from index.js inside src->pages.

pages folder

Now, any page which we create inside pages folder will become a endpoint in the browser. We don’t have to implement anything like react-router here.

We will create four pages required by our project — blog, contact, places, 404

Image for post
Image for post
pages

We can make them any type of React component, but we will make them functional components as of now for consistency.

The index.js and 404.js are special pages and are displayed in home and error.

We will create the 404.js first and then move to any non-existent page.

Image for post
Image for post
Error Page

Moving to an non-existent page will show below.

Image for post
Image for post
Preview page

On clicking on the Preview custom 404 page, we will get our error page.

Image for post
Image for post
Error page

We will create the blog page next.

Image for post
Image for post
Blog page

Now, on moving to http://localhost:8000/blog we will see our blog page

Image for post
Image for post
blog page

We will create the contact and the places page in the similar manner.

Image for post
Image for post
contact page
Image for post
Image for post
places page

Now, let’s have a Navbar and Footer component. We will make them inside a components folder, which will be inside src folder.

Navbar.js
Image for post
Image for post
Footer.js

Now, the most common React way to show these two component on any page is to import them and show it. We will change our index.js as below.

Image for post
Image for post
Showing Navbar and Footer

It will show them on the home page.

Image for post
Image for post
Showing component

Now, we can do this for every other page but Gatsby provides an easier solution. We will have a Layout component and include the Navbar and the Footer components there. We will be also passing the children props to the Layout component. It will be obvious in a minute on why we use it, after we use the Layout component in our pages.

So, create a Layout.js file inside components folder.

Image for post
Image for post
Layout.js

Next, let use it in our index.js file. As, you might have noticed that the Layout component is wrapping all the other thing, which is only Hello World! now. This only is the children, which is the props been passed to the Layout component.

Image for post
Image for post
index.js

So, our Home Page is still the same.

Image for post
Image for post
Same Home Page

Now, we can use the reusable component Layout in all our other pages and they will show Navbar and Footer components.

Image for post
Image for post
blog.js
Image for post
Image for post
places.js
Image for post
Image for post
contact.js
Image for post
Image for post
404.js

If we go to any other path also, we will see the Navbar and Footer present.

Image for post
Image for post
blog

This completes part-1 of the series. Hope you learned something new. You can find the code for the same in this link.

You can find part-2 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store