React Website Using Gatsby Image
Written by Brian
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
Lastly, you can open up the site using the code below.
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