[Deprecated] Using Cloudinary with Strapi CMS [Building Personal Blog Website Part 2]
Tags: cloudinary, strapi, tutorial, headlesscms
Published: 2022-03-02 10:24:00

**As Heroku is phasing out the free tier I'm going to rewrite the first two parts of this guide. Here you can find the updated version: COMING SOON.**

_This is the second part of the "Building Personal Blog Website" series. In the series we'll setup a free CMS to hold our blog content on Heroku, create a React app with Next.js' static site generation and TailwindCSS to present the articles and host it on Netlify._

_All articles:
[Part 1: Hosting free Strapi CMS on Heroku](https://dev.to/hawelkam/hosting-free-strapi-cms-on-heroku-building-personal-blog-website-part-1-58gg)
[Part 2: Using Cloudinary with Strapi CMS](https://dev.to/hawelkam/using-cloudinary-with-strapi-cms-building-personal-blog-website-part-2-18o6)
[Part 3: Setting up a basic Next.js app locally](https://dev.to/hawelkam/setting-up-a-basic-nextjs-app-locally-building-personal-blog-website-part-3-13e6)_

As you are building a personal blog it is really possible that you'd want to use some images in the blog posts. The CMS is hosted on a free-tier Heroku, so the storage is rather limited. That's why you need to think about other solutions. And here's where the cloud comes in.

For this I have chosen [_Cloudinary_](https://cloudinary.com/). It's a rather popular platform for managing assets and optimizing images. But the main reason to use it for our personal project is that it has a free tier with easy-to-use API. Config is worry-free - you'll go through it today.

But before you start - head out to [Cloudinary](https://cloudinary.com/), create a free account (the process is rather standard) and when you're done - log in and get your SDK config (_Getting Started -> Configure your SDK -> Start configuring_).

![Cloudinary config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g47qibfc233l1c9i1a5d.png)

Save those variables somewhere and then let's go back to your Strapi app in your code editor of choice.

First you need to install a Cloudinary provider:

```
yarn add @strapi/provider-upload-cloudinary
```

Then update Strapi config in _config/plugins.js_ file (create it if it doesn't exist):

```
module.exports = ({ env }) => ({
 upload: {
   config: {
     provider: "cloudinary",
     providerOptions: {
       cloud_name: env("CLOUDINARY_NAME"),
       api_key: env("CLOUDINARY_KEY"),
       api_secret: env("CLOUDINARY_SECRET"),
     },
     actionOptions: {
       upload: {},
       delete: {},
     },
   },
 },
});
```

Next step would be to create the environment variables through Heroku CLI so they would have proper values:

```
heroku config:set CLOUDINARY_NAME=[cloud_name from Cloudinary config]
heroku config:set CLOUDINARY_KEY=[api_key from Cloudinary config]
heroku config:set CLOUDINARY_SECRET=[api_secret from Cloudinary config]
```
You're almost done! Now you need to update the middleware for Strapi - _strapi::security_ to be exact. Instead of just _string_ you should put an object there (_config/middleware.js_):

```
module.exports = [
 "strapi::errors",
 {
   name: "strapi::security",
   config: {
     contentSecurityPolicy: {
       useDefaults: true,
       directives: {
         "connect-src": ["'self'", "https:"],
         "img-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
         "media-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
         upgradeInsecureRequests: null,
       },
     },
   },
 },
 "strapi::cors",
 "strapi::poweredBy",
 "strapi::logger",
 "strapi::query",
 "strapi::body",
 "strapi::session",
 "strapi::favicon",
 "strapi::public",
];
```

Now commit all of you changes and push:

```
git push heroku HEAD:main
```
And that's it! After the app is redeployed the CMS will use Cloudinary for storing images. Let's just quickly test this. Head out to your _Strapi Admin Panel_ on `https://[your-app].herokuapp.com/admin/`.

Go into _Content Manager_ and edit the blog post you created in the [first part of this article series](https://dev.to/hawelkam/hosting-free-strapi-cms-on-heroku-building-personal-blog-website-part-1-58gg).


![Edit post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iv2git0g1pgc4ugi3wx.png)

Then click on the area below `cover` (or whatever you named this field) and just follow the instructions on the screen to add a new image.

![Adding image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn7defwf2v37dmit8ymg.png)

![Adding image - step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maitz7zl99b4vnrz4zg0.png)

After saving you should see in the blog post editor that the image is in fact there.

![Edited blog post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yltxfomnzijtp4w6c2av.png)

But now to be entirely sure the image was added correctly - go to the [Cloudinary](https://cloudinary.com/console) website, log in and go into _Media Library_. There you should see your newly created image in 3-4 sizes.

![Cloudinary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bweyqjf22dc83hur9xa1.png)

Easy, right? So now that you are ready to create some blog posts with images you can start working on a React app to display them. And that will be the third part of this guide, so stay tuned!