Build a Gatsby Photo Gallery with Strapi and Cloudinary

In this tutorial, you’ll learn how to build an optimized static photo gallery using Gatsby, Strapi and Cloudinary.

A huge number of websites suffer from performance issues due to hosting large images that take a significant amount of time to load on a user’s browser. The solution is usually to manually resize and optimize each image for the Web. In this tutorial, I’ll show you how to use a group of technologies that will handle image optimization for you. All you have to do is just upload the image and an optimized image’ll be displayed on your website.

To make the front end, we’ll be using Gatsby, a static site generator for React. To handle our content and build our API, we’ll use Strapi, a headless CMS platform. It features a content builder and management UI dashboard built using React and Koa.js. Strapi runs on a Node.js server that can be hosted locally or in the cloud. We’ll use Cloudinary to store our images. It’s a media hosting service for photos and videos, offering various packages including a free starter package that’s suitable for developers and small businesses.