How to serve static and media files in NGINX for your Django Project

Serve Static Files and Media Files of your Django App using NGINX

WOLFx 3 minutes
Originally Published on: Oct. 5, 2021 Last Updated on: Aug. 20, 2022
How to serve static and media files in NGINX for your Django Project

How to serve Static Files and Media Files of your Django app in Production using NGINX


Setting up Django Applications is tedious and challenging for a beginner. Moreover, you must have come across various StackOverflow answers, blogs, and other informational websites stating that Static files must be served via your webserver and not your application server. You must be surfing around trying to grasp the exact step by step way on how to serve static and media files for your django app. In this article we will show you 

Follow this article if you have questions or phrases similar to these: Why is my Django admin panel is missing CSS files when DEBUG=True? Why there is no style in my Django app? Error 404 style.css not found in Django. Where did all my uploaded files go from my Django App? Or if you google static files in django 404

To solve all the above problems follow these steps.

Step 1: Activate your virtual environment.

1. source <path_to_your_virtual_environment>/env/bin/activate

Step 2: Run collectstatic from your project directory.

1. cd /<your_project_directory_path>

2. python collectstatic

Once you complete the above steps your project directory will have a new folder created whose name will be similar to what you have provided in your file for STATIC_ROOT and MEDIA_ROOT value. Follow our Django Deployment article if you don't know how to do a basic Django deployment on a VPS. In our case, it is like this:


STATIC_URL = '/static/'
    os.path.join(BASE_DIR, 'web/static'),
STATIC_ROOT =  os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')


So by running collectstatic command on our Django project based on these settings will create a directory named "static" and "media".

Step 3: Access your NGINX webserver's config files.

1. sudo nano /etc/nginx/sites-enabled/<your_config_file_name>.conf

Step 4: Add a location in your config file.


location /static/{
    autoindex on;
    alias /<your_path_to the_static_folder>/;



location /media/{
    autoindex on;
    alias /<your_path_to the_media_folder>/;


Step 5: Reload your NGINX server and it's done.

1. sudo systemctl reload nginx


Hope you found this article helpful, please do share it on your social media, it will allow us to reach out to more people who are in need for help.

Contact Us

Let's have a cup of coffee

Let's Connect

Please enter your full name
We'll never share your email with anyone else
We'll never share your phone with anyone else

Cookie Consent

Our website uses cookies to provide your browsing experience and relavent informations. Before continuing to use our website, you agree & accept of our Cookie Policy & Privacy