How to link HTML and CSS file using Django?-CodePudding

I am novice person to Django learning. I have tried with simple linking HTML and CSS files in Django by referring some sites and videos but it seems CSS file is not included. Though I tried multiple times I am not getting the background color which I put in CSS file. CSS file saved in static/css/style.css

body{
    background-color: violet;
}

HTML file saved in templates/bg.html

{%load static%}
<!<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title> BG </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
    </head>
    <body>        
        <h2 >BG Colour</h2>
        <p>
        Background Color is to be changed.<br>
        </p>
        <script src="" async defer></script>
    </body>
</html>

Also, I have configured the static file in settings.py file too.

STATIC_URL = '/static/'
STATIC_DIRS=[
    os.path.join(BASE_DIR,'static')
]

Instead of ‘violet’ background, I am still getting ‘white’ background. Kindly help me to fix this.

CodePudding user response：

Are you serving your static files?

If you are running the manage.py runserver you might want to add this to the end of your projects urls.py:

from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

if settings.DEBUG:
    urlpatterns  = staticfiles_urlpatterns()

like here: https://github.com/almazkun/durls/blob/4b17a1b698430b442fc1e74e5b24f792f57cb17e/settings/urls.py#L28 or here: How do you serve static files when using the django runserver development server?

Note that Django does not serve static and media files itself. You will need to setup it separetatly using things like nginx or whitenoise.

CodePudding user response：

To managing the static file. First you need to know the development and production setup.

In development you need to set DEBUG=True in settings.py
In production you need to set DEBUG=False in settings.py

Development

For serving the static file in development project. You need to do two things .

First one is changing the settings.py file. Added this sample code.

STATIC_URL = '/static/'
if DEBUG:
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, "static"),
        '/static/',
    ]
else:
    STATIC_ROOT = os.path.join(BASE_DIR, "static")

Second change is urls.py file. Add added this sample code-

## import this at the top
from django.contrib.staticfiles.urls import staticfiles_urlpatterns



## bottom of the file `urls.py` 
if settings.DEBUG:
    urlpatterns  = staticfiles_urlpatterns()

You can check out this django project. how you can change your code Repo Link.

Production

For production build you must follow this checklist. After completing checklist, you can serve your static content using nginx web-server. Or you can use whitenoise python package.

I think it will help your further working.