DEV Community

Cover image for ๐Ÿ’ธ Django Tutorial: Set up Media files in Deployment for FREE
Developer Road

๐Ÿ’ธ Django Tutorial: Set up Media files in Deployment for FREE

Daniel Diaz
Self-taught Python/Django Developer, Technical Writer, and long-life learner. I enjoy creating software from scratch and sharing knowledge with stunning technical articles.
Originally published at ใƒปUpdated on ใƒป3 min read

In this tutorial ...

You will learn to manage your media files during deployment, (and even production ๐Ÿค) for free.


We will use cloudinary, for that purpose. It will allow us to manage our media (Uploaded files), in Django, with just a few modifications in our settings file.

Differences between Static Files and Media Files

In web development, static files are those files that stay "static", that means that those files aren't modified in any moment of the user interacting with the site.

The main three static files are: CSS, Javascript, and images, that are served in our templates.

In Django apps deployment we use, whitenoise for managing static files. Since Django by itself is not able to manage static files during development (Because Performance Issues).

If you want a basic tutorial to deploy Django apps on heroku look at this one

Media Files

On the other hand, media files are files uploaded by the users of your application. That means that are files that are constantly changing, and therefore require their own way to be served.

Cloudinary storage

In order to use the cloudinary storage API, we're going to create a free account, here.


Hit in create an account, and verify your account with your email.

You will get a Dashboard with your Credentials, We'll use them later ๐Ÿ˜‰.

Modifying the settings:

First of all, we will need the cloudinary packages, to be able to use it as a media manager. So let's install some packages.

pip install cloudinary django-cloudinary-storage
Enter fullscreen mode Exit fullscreen mode

Now let's import, a couple of modules

# At the top of the settings
import cloudinary
import cloudinary_storage
Enter fullscreen mode Exit fullscreen mode

And modify the installed apps

    # Other apps ...

    # Media Cloudinary

Enter fullscreen mode Exit fullscreen mode

Last but not least, paste the following code after, these comments

# Static files (CSS, JavaScript, Images)
Enter fullscreen mode Exit fullscreen mode
# Cloudinary stuff
    'CLOUD_NAME': <your cloud name>,
    'API_KEY': <your api key>,
    'API_SECRET': <your secret api>,

Enter fullscreen mode Exit fullscreen mode

But somebody would say me: Daniel, are you crazy ๐Ÿ˜ฎ?, we are putting our credentials in an unprotected file.

And yeah, that's right!

So the idea is to protect our credentials, with Environmental Variables. That means that we're going to put all of our keys in the server, that we are going to deploy our code, and not in the source files.

You could use os.environ.get("Key"), but as I'm going to deploy my app to keroku, I'll use Python Decouple.

If you want to learn, how to use Python decouple on heroku, you should read this tutorial..

In that case, our cloudinary settings would be like this

from decouple import config

    'CLOUD_NAME': config('CLOUD_NAME', default=""),
    'API_KEY': config('API_KEY', default=""),
    'API_SECRET': config('API_SECRET', default=""),

Enter fullscreen mode Exit fullscreen mode

Any doubts, or problems?, Let me know in the comments.

Thanks for your time hopefully this tutorial will be useful for you ๐Ÿค—.

Follow me in My blog,
to get more awesome tutorials like this one.
Please consider supporting me on Ko-fi you help me a lot to
continue building this tutorials!.

Discussion (5)

danidiaztech profile image
Daniel Diaz Author

Let me know your thoughts, here!

yairdorantes profile image
Yair Dorantes

muchaaaaaaas gracias, me estaba rompiendo la cabeza lo de los media files y gracias a este post he conseguido mostrarlos en la pรกgina, me has salvado la vida, mil graciassss!!!!

danidiaztech profile image
Daniel Diaz Author

Dale, me alegra mucho que te haya servido

maahad767 profile image
Mohammad Abdul Ahad

This app broke my rest framework app(settings was somehow setting into defaults).

segestic profile image

Kudos, nice tutorial.