Integrating with Netlify CMS

Netlify CMS and Git Workflow

Netlify CMS is an open source CMS for your Git workflow. It enables you to provide content editors with a friendly UI and intuitive user experience.

Your content gets stored in a Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git. You can use Netlify CMS with any static site generator like Jekyll or Hugo to create faster, more flexible web projects.

Git as Media Storage

While storing files in a Git repo can be a solid workflow, some issues exist:

  • Storing too many binary files or simply huge files can lead to long waits needed to clone the repository.
  • When handling images, only include the ones you need in the repo. Stick with original image versions (not their derivatives) and carefully choose which ones to keep and which to drop.

Using Git repository is hard to scale, especially when it gets to receiving user-generated media. Uploadcare integration helps you detach file infrastructure routines at scale from your Netlify workflow.

As an end-to-end file handling platform, we handle content uploads, storage, optimization, and CDN delivery. Every file on Uploadcare immediately gets to our smart storage and is cached by our CDN to be further rapidly and reliably delivered across 220k servers in 130+ countries.

Once your files are on Uploadcare, you then operate with either their CDN URLs or UUIDs,

https://ucarecdn.com/c4b32a69-f817-48be-b918-7eb6718f7aca/

or

c4b32a69-f817-48be-b918-7eb6718f7aca

Combined with our Media Processing engine that is especially useful for image content which can be transformed on the fly by appending URL directives. Hence, you can store original CDN URLs in a Git repository, while all the derivatives will be generated whenever you need them.


Original image.

/crop/2000x1325/center/

/crop/960x636/2400,700/

Integrating Uploadcare into Netlify CMS

Integrating Uploadcare File Uploader into Netlify CMS is quick and here’s how you do it:

  1. Make sure you’re using Netlify CMS 2.1.0+, upgrade if necessary.
  2. Create an Uploadcare account.
  3. Define a target project for uploads by discovering its API key.
  4. Remove the media_folder property from your CMS configuration file.
  5. Add the following to your CMS configuration file:
media_library:
  name: uploadcare
  config:
    publicKey: demopublickey # replace with your Public API key or use for testing env only

That’s it; you can now add media to your content via Uploadcare Widget in the admin panel of your Netlify website. There’s no need to push any files to your repo anymore: they now go to the Uploadcare storage and get delivered from our CDN.

Uploadcare File Uploader integrated into Netlify CMS

On-the-fly Media Processing

In case you want to edit any image on Uploadcare, you don’t have to upload its updated version. We handle Image Processing on the fly via URL directives. Just append the supported image transformations to image URLs.

Further Reading

That’s it! In case you want to learn more, check out the Netlify CMS docs on integrating Uploadcare.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.