Django is a powerful web framework that allows developers to create complex web applications quickly and efficiently. One of the key features of Django is its ability to serve static files such as images, CSS, and JavaScript. In this article, we'll explore how to use static files in Django.

What are static files in Django?

Static files are files that are not dynamically generated by the server. These files are usually images, stylesheets, JavaScript files, and other files that are included in the HTML pages that make up your website. Unlike dynamic files, static files are cached by the user's web browser and can be served quickly from the cache.

How to use static files in Django?

Django provides a built-in mechanism for serving static files. Here's how to use it:

1. Create a folder for your static files:

The first step is to create a folder to store your static files. By default, Django looks for static files in a directory called "static" in each of your installed apps.

To create a static folder, simply create a directory called "static" in your app's directory or in the root directory:

your_app/
    __init__.py
    models.py
    views.py
    static/

2. Configure the STATIC_URL setting:

Next, you need to configure the STATIC_URL setting in your settings.py file. This setting specifies the URL that will be used to serve your static files. By default, Django uses the "/static/" URL.

//settings.py
//As you can see, you just need to point to the directory.
//Not the individual files.
STATIC_URL = "/static/"

3. Create Static files

To demonstrate how to use static files in Django, let's create a simple JavaScript file that logs a random number to the console when a button is clicked. In a real-world scenario, you might use static files to include CSS, JavaScript, and images that are used across multiple pages on your website. In this case, we'll create a file called "script.js" and save it in the "static" directory of our Django project. Now, you can create the static files on the static directory like so:

//#script.js
//Here is a simple js script that log the random number on click.
document.addEventListener("DOMContentLoaded", function () {
  const myButton = document.getElementById("myButton")

  myButton.addEventListener("click", function () {
    const randomNumber = Math.floor(Math.random() * 100)
    console.log(randomNumber)
  })
})

4. Use the {% static %} template tag:

Now that you've configured Django to serve your static files, you can use the {% static %} template tag in your HTML templates to reference those files. The {% static %} tag generates the URL for the static file based on the STATIC_URL setting.

For example, to include a CSS file in your HTML template, you can use the following code:

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">

<button id="myButton"><h1>Click me!</h1></button>

<script type="text/javascript" src="{% static 'script.js' %}"></script>

In the example above, we're using the {% static %} template tag to generate the URL for a CSS file called "style.css" in the "css" directory of our app's "static" directory. Then, we use {% load static %} to let the compiler know that there are static files in this document.

Conclusion:

Using static files in Django is simple and straightforward. By following the steps outlined above, you can easily configure Django to serve your static files and use them in your HTML templates. This allows you to create dynamic and interactive web applications that are both fast and visually appealing. I hope that helped.