Django Static Files Development

Question

This seems to be a source of much confusion judging by the amount of similar titles on the subject, however trying everything I could find on static files with the django development server I've almost given up hope!

So my static files are served from C:/Users/Dan/seminarWebsite/static/, in which I have sub folders for images, css etc.

SETTINGS:

STATIC_ROOT = 'C:/Users/Dan/seminarWebsite/static/'  
STATIC_URL = '/static/'  

The static files app is also active.

URLS:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns  
urlpatterns += staticfiles_urlpatterns()

TEMPLATE:

"{{ STATIC_URL }}images/vision.jpeg"

However only a broken link appears and at this address: http://127.0.0.1:8000/homepage/images/vision.jpeg and I don't think it should be at that address (homepage is the url name of the page the static image file is being called to).

Solution

Based on what you've posted so far, it looks like you're following the docs for django.contrib.staticfiles. I agree that the docs can be difficult to follow especially if one is new to django.

I believe the confusion stems from the fact that django.contrib.staticfiles has two modes of operation:

1. During the development phase where the development server is used, it dynamically searches for static files in predefined directories and make it available on STATIC_URL
2. For deployment, it assists in collating static files to a single directory (defined using STATIC_ROOT) so that the static files can be hosted using a webserver suited for static files. This collation is done using python ./manage.py collectstatic.

Here's a quick summary of how to get up and running. I haven't had a chance to try it out so there may be mistakes. Hopefully this will help you get started and at the very least help you understand the docs. When in doubt, do refer to the docs.

Hosting static files on the development server

1. Make sure you have 'django.contrib.staticfiles' in INSTALLED_APPS

2. Specify STATIC_URL. This will be the path where your static files will be hosted on.

   STATIC_URL = '/static/'
   

3. Make sure your files are in the correct directories. By default, staticfiles will look for files within the static/ directory of each installed app, as well as in directories defined in STATICFILES_DIRS. (This behaviour depends on backends listed in STATICFILES_FINDERS). In your case, you'd probably want to specify your directory in STATICFILES_DIRS:

   STATICFILES_DIRS = ( 
         'C:/Users/Dan/seminarWebsite/static/',  
   )
   

4. Make the view accessible by adding the following to the end of urls.py:

   from django.contrib.staticfiles.urls import staticfiles_urlpatterns
   urlpatterns += staticfiles_urlpatterns()
   

5. Make sure you have DEBUG = True in settings.py.

That's it.

If you run your dev server (./manage.py runserver), you should be able to access your file via http://localhost:8000/static/images/vision.jpeg (which serves C:/Users/Dan/seminarWebsite/static/images/vision/jpeg).

Linking to static files in your templates

There are two ways to get a correct link for your static files - using the staticfiles template tag, and making STATIC_URL accessible to your templates. Since you've attempted the latter, we'll stick to that.

1. Make sure you have 'django.core.context_processors.static' in TEMPLATE_CONTEXT_PROCESSORS. If you haven't redefined TEMPLATE_CONTEXT_PROCESSORS then there is nothing to do since it should be there by default.

2. Make sure you use RequestContext when rendering your template. Example:

   from django.template import RequestContext
   # ...
   
   def some_view(request):
       # ...
       return render_to_response('my_template.html', {
           "foo" : "bar",  # other context 
       }, context_instance = RequestContext(request))
   

You should now be able to use the following in your my_template.html:

<a href="{{ STATIC_URL }}images/vision.jpeg" />

Hosting static files on production server.

If all the static files you need to serve are store in that one directory (C:/Users/Dan/seminarWebsite/static), then you're almost there. Simple configure your webserver to host that directory on /static/ (or whatever you set STATIC_URL to) and you're good to go.

If you have files scattered in different directories and/or app specific static files, then you'll need to collate them.

1. Set STATIC_ROOT to the directory where you want to store the collated files.

2. Run ./manage.py collectstatic to do the collation.

3. Configure your webserver to host the that directory (STATIC_ROOT) on /static/ (or whatever you set STATIC_URL to).