static static local variable settings

--app
    --migrations
    --static
        --css
        --js
        --image
    --templates
    --__init__.py
    ...

The file structure is as shown above. Note that I only show the structure of an app here, not the entire project structure. Maybe you don't have the templates folder, it doesn't matter, this is created by me.

We'd better classify different folders css, js, image under static. (This is the recommended practice)

When there are multiple apps, we create static under different apps. (We will talk about a more reasonable method later, here we need to do this for you to clarify the steps)

STATIC_URL = '/static/'Add later in settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

This STATIC_ROOT is what we need to use when we finally deploy to solve the problem of resource dispersion.
BASE_DIR This variable is defined at the beginning of settings.py, which is the directory name of the project root directory.
The os.path.join method creates a static folder in the project root directory.

I have seen many blogs with a lot of configuration here, which is messy and confusing.

This place can be configured like this to load our static resources. (Trust me, I have been fooled by many irresponsible bloggers)

After the folder is created and the configuration file is completed, all we need is to display it on the web page.
Create a new template under the app, if there is one, you don't need to create it

--app
    --migrations
    --static
    --templates
        --appname
            --index.html
    --__init__.py
    ...

Please note that I did not create index.html directly under templates, but created an "appname" (name it according to your app so that it will not conflict). and created index.html under appname.

Because when django looks for templates, the templates under the app are stored as a list. If we have multiple apps, it may cause that we want to access the index of app2, but the index.html of app1 is returned.

index.html content

{% load static %}   #这个地方引入static这个文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<img src="{% static "image/logo.png" %}" alt="My image"/>  #{% static "image/logo.png" %}表示路径

</body>
</html>

The ## note here is for everyone's understanding, not the format supported by html. It needs to be removed when pasting.

And add a picture named logo.png under the image folder, because the picture can intuitively interpret whether our settings are effective.

python manage.py runserver 0.0.0.0:9000
Visit your 9000 port and check when it takes effect. Note that we haven't configured nginx yet.

If it is correct, the path is fine.

python manage.py collectstatic

This command collects static files under the project and saves them to STATIC_ROOT. This is our second step, just configured.

--project
    --project
    --static
    --app1
    --app2
    --manage.py
    ...

Configuration in nginx

    location ^~ /static/ {
        root /home/project/;
        }

This place pays attention to the configuration to the static superior.
When I configured it before, root /home/project/static it will always prompt 404

When deploying, django also recommends changing debug=True in settings.py to debug=False. to ensure safety.

restart nginx

static static local variable settings

Guess you like