Strapi Gatsby Tutorial #5 - Installing Cloudinary Plugin for Strapi
We are now moving beyond the original Strapi tutorial and improving our deployment by installing the Cloudinary Plugin. Instructions for installing the plugin can be found here: https://market.strapi.io/providers/@s...
GitHub link: https://github.com/GideonNeedleman/st...
Strapi is a headless CMS that enables you to easily author content and expose it through an API. The flexibility of Strapi allows you to choose any frontend option and seamlessly query the API to retrieve your content. Gatsby is a React-based Static Site Generator that can process a diverse range of content through its GraphQL data layer. By leveraging the Strapi API, Gatsby transforms the content into HTML pages to create a dynamic and responsive experience.
We previously built our blog by copy & pasting content that was hosted on another site. This included grabbing URLs for images that someone else was hosting and pasting them into text fields for our content types. The problem with this approach is that we aren't hosting our own images. This means if the other site hosting these images takes them down, then the images on our own site will disappear. In addition it means we cannot add original content to our own blog. Clearly this is a big issues.
The solution is to integrate an image/file hosting provider into our setup. We use Cloudinary in this tutorial because it's easy to setup and has a free-tier, but there are other options. Once integrated, we can use Strapi's media library system to upload images directly into our content entries in the CMS and Cloudinary will host the media on their servers. This makes the images easy to work with and the URLs are readily available to Gatsby through standard graphql queries.
Timestamps
00:00 Issues with images
01:39 Add new media field
03:35 Querying uploaded media
05:30 Installing Cloudinary Plugin
08:05 Cloudinary Account
10:10 Querying Cloudinary media
12:33 Using Cloudinary images in Gatsby
15:25 Replacing all image links with Cloudinary