React Website Using Gatsby Image

Learn how I built this website in Gatsby. I created an image gallery design that utilizes Gatsby Image with a travel hero section.

You can access the complete source code down below.

I really like using Gatsby for images because it makes it super easy to optimize everything without having to write a lot of extra code. If you were to try and replicate the same thing without using Gatsby Image, then it would be very tedious and difficult.

Note, I only focused on the image gallery for this tutorial. However, you could also use Gatsby's background image plugin for the hero section.

If you've never used Gatsby before, then you will need to install the Gatsby Cli.

Simply add this line of code in your terminal

npm install -g gatsby-cli

Then, you can create the Gatsby website using their starter template.

gatsby new gatsby-travel-website https://github.com/gatsbyjs/gatsby-starter-default

Once it finishes, navigate into your project

cd gatsby-travel-website

Lastly, you can open up the site using the code below.

gatsby develop

Gatsby develop will open up the website. Then, you can click on the localhost:8000 link by pressing cmd + click. This will open up the starter template in your browser and you can start editing the code.

I created a full video tutorial showing step by step how I created everything.

Watch the full tutorial on Youtube here

Also, I'm documenting everything I'm learning and the projects I'm building on my Youtube channel. If you want to follow me along my coding journey, be sure to subscribe here