Перейти к содержимому

Strapi Gatsby Tutorial #5 - Installing Cloudinary Plugin for Strapi

Learning with Gideon

0:00 / 0:00

Strapi Gatsby Tutorial #5 - Installing Cloudinary Plugin for Strapi

1 120 просмотров · 2 г. назад
Learning with Gideon
1,14 тыс. подписчиков
1 120 просмотров · 2 г. назад
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