How to make Cloudinary your image CDN in Ghost and why it’s a good idea

A few days ago, I made the switch for my Ghost installation to begin using the Cloudinary CDN for my images on this blog. The reasons for doing so are simple and helpful, though doing so is definitely not a requirement of any kind.

Why?

• Offloading images to a central location separate from your blog files allows you to easily move your blog to a different host with different requirements. Static site generators are pretty hip these days and this (along with the Markdown standard) makes such a move to a new platform possible in the future.
• Using a CDN can make your pages load faster. Cloudinary’s servers are specifically designed to host images, and therefore can serve your images to readers quicker. A small, if any difference, but one worth considering.
• Bandwidth and storage is measured separately than the rest of your site, allowing you to host your Ghost blog on the cheapest server possible. Free options would even work if you chose this route.

How?

Now that I’ve given you sufficient enough reason to do it, let’s get to how. It’s actually a fairly simple process if you have SSH access to your webserver. Make sure you have SSH access before proceeding or you will likely be very lost. Some of the instructions provided below were compiled from the GitHub page for the Ghost Cloudinary Store module.

Sign up for a Cloudinary account

Cloudinary offers a free plan that should work fine for most small to medium sized blogs. Make sure you verify your email address or they will disable your account after a few days.

Once you’ve completed the signup process, make sure you’re satisfied with the Cloud name you’ve chosen because changing it later will require a lot of unnecessary work.

Install the Ghost module

SSH into your webserver and into your /ghost/content folder and issue the following commands:

mkdir storage cd storage git clone https://github.com/sethbrasile/ghost-cloudinary-store.git cd ghost-cloudinary-store npm install

This will install all of the necessary pieces you will need from the module in order for you to use Cloudinary in Ghost. Now we just need to configure your Ghost settings with the correct information so it can access Cloudinary.

Configure Ghost for Cloudinary

On your Cloudinary Dashboard, you should see your Cloud name, API Key, and API Secret under the Account Details section. You’ll want to use these and replace them where necessary in the next step.

In your Ghost directory, edit your config.js file and add the following code within the environment your Ghost installation is using (If you’re not sure, it’s probably production):

storage: { active: 'ghost-cloudinary-store', 'ghost-cloudinary-store': { secure: false, cloud_name: 'yourCloudName', api_key: 'yourApiKey', api_secret: 'yourApiSecret' } },

Replace yourCloudName with the full Cloud name you chose for your Cloudinary account, yourApiKey with the API Key, and YourApiSecret with the API Secret (You will likely need to click “Reveal” on the Cloudinary interface). secure is to indicate whether the URLs inserted by Cloudinary will use http or https, so set it to true or false based on whether or not your site is secured with SSL.

Once you’ve finished updating your config.js, you can run sudo service ghost restart to restart your server with the changes and your Ghost blog is ready to work with Cloudinary. You will need to move all of your current images over manually in order for your current images to work with Cloudinary but all new images will be uploaded directly to Cloudinary from within the Ghost interface, making the switch as easy as it possibly could be. As of now, the storage module does not support Cloudinary transformations (my understanding is that Ghost will have to open up the ability for storage modules to do so) but I hope to update this post when that ability is available.