Unable to serve static files like css, js in django python

Question

I am very new to django, and gone through tutorial for many days , i have started building a small website using django and trying to serve a css file by arranging all the necessary settings in settings.py file. But unfortunately my code is unable to serve the css file, i mean the concept of serving css files is not working. I googled a lot and gone through the django main doc tutorials and made changes according to them,and still doesn’t works so approached SO and pasted my entire code below

Structure of project folder

 personnel_blog
      |____personnel_blog
      |____manage.py  |  
                      |____media
                      |____static
                      |       |____css
                      |             |____personnel_blog_hm.css 
                      |____template 
                      |        |____home_page.html
                      |____settings.py
                      |____urls.py
                      |____views.py
                      |____wsgi.py

Some of my settings.py file settings are below

settings.py

import os
PROJECT_DIR = os.path.abspath(os.path.dirname(__file__))
DEBUG = True
MEDIA_ROOT = os.path.join(PROJECT_DIR,'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
                    os.path.join(PROJECT_DIR,'static'),
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
)
TEMPLATE_DIRS = (
                 os.path.join(PROJECT_DIR,'templates')
)
TEMPLATE_CONTEXT_PROCESSORS = (
    'django.core.context_processors.debug',
    'django.core.context_processors.i18n',
    'django.core.context_processors.media',
    'django.core.context_processors.static',
    'django.contrib.auth.context_processors.auth',
    'django.contrib.messages.context_processors.messages',
)

urls.py

from django.conf.urls.defaults import *
from django.conf import settings
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
     url(r'^$', 'personnel_blog.views.home_page'),
     url(r'^admin/', include(admin.site.urls)),
)
if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT, 'show_indexes': True }),
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT, 'show_indexes': True }),

)

views.py

from django.shortcuts import render_to_response

def home_page(request):
    return render_to_response("home_page.html")

home_page.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html > 
  <head>
    <link rel="stylesheet" href="{{ STATIC_URL }}css/personnel_blog_hm.css" type="text/css">
  </head>
  <body>
   <p>Hello !</p>
   <a href="/" target="_top">Home</a>
  </body> 
</html>

personnel_blog_hm.css

body { background-color:green; }
p {color:blue;background-color:green;padding-left:20px;}

So above is my code, can anyone please let me know whats wrong in the settigns.py file or other py files ?

Whether need to do any other additional settings in the above code ?

so can anyone please adjust my code and make necessary changes so that i cam move forward and make my first step in web designing ….. 🙂

Asked By: Shiva Krishna Bavandla

||

Source

Answer 1

base.html

{% load static %}

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

settings

PROJECT_DIR  = os.path.dirname(__file__) 

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

STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(PROJECT_DIR, 'staticfiles'),
)

url

from django.conf.urls.defaults import *
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
     url(r'^$', 'personnel_blog.views.home_page'),
     url(r'^admin/', include(admin.site.urls)),
)+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += staticfiles_urlpatterns()

Answered By: catherine

Answer 2

in settings.py try.

PROJECT_DIR  = os.path.dirname(__file__)
...
MEDIA_ROOT = os.path.join(PROJECT_DIR,'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'

my settings.py file is usually in same directory as static directory

Answered By: Frantz Romain

Answer 3

Try changing your STATICFILES_DIRS setting to

STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR,'static'),
)

Answered By: arulmr

Answer 4

Your problem is related to this line:

return render_to_response("home_page.html")

Django’s template engine requires two things to properly render a template.

The template name
A context variable

The context variable is a key/value dictionary listing all of the variables available to the template.

The render_to_response shortcut actually accepts two different context variable parameters.

You’re missing both.

Without these variables, the template doesn’t have ANY variables available to it. So your {{ STATIC_URL }} template variable is probably blank.

To correct, try this:

from django.shortcuts import render_to_response
from django.template import RequestContext

def home_page(request):
    return render_to_response("home_page.html", {}, context_instance=RequestContext(request))

Answered By: Jack Shedd

Answer 5

Try running this $ python manage.py collectstatic

You can check documentation here

Answered By: Made4uo

Unable to serve static files like css, js in django python

Question:

Answers: