Serverless Media for 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 Uploadcare 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 with image processing operations on the fly by including 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

Original image.

Cropped and centered image
/crop/2000x1325/center/
Cropped to area image
/crop/960x636/2400,700/

Integrating Uploadcare into Netlify CMS

Integrating Uploadcare jQuery widget 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 keys.
  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: YOUR_PUBLIC_KEY

Replace YOUR_PUBLIC_KEY with your public API key.

That’s it; you can now add media to your content via Uploadcare Uploading 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 Uploading Widget integrated into Netlify CMS

On-the-fly Image Transformations

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 include the supported ones in your image CDN URLs.

Further Reading

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