Question

I have a problem loading up CSS from the static directory:

settings.py

MEDIA_ROOT = '/he/sites/video1.hackedexistence.com/htdocs/media/'  
MEDIA_URL = '/media/'  

STATIC_ROOT = '/he/sites/video1.hackedexistence.com/htdocs/static/'  
STATIC_URL = '/static/'  

ADMIN_MEDIA_PREFIX = '/static/admin/'  

STATICFILES_DIRS = ()

url.py

from django.conf.urls.defaults import patterns, include, url  
from django.contrib import admin  
admin.autodiscover()

urlpatterns = patterns('',

    url(r'^admin/', include(admin.site.urls)),

    r'^beers/$', 'beer.views.BeersAll'),  
)

base.html loads up fine, css won’t load

<link rel="stylesheet" type="text/css" href="/static/css/video1.css" />

the css href link leads to

Page not found (404)
    'css/video1.css' could not be found

The full path to the css file:

/he/sites/video1.hackedexistence.com/htdocs/static/css/video1.css

I’m following a youtube django tutorial by Hacked Existence. and he seems to proceed without a problem with this setup. How can i correct this?

Answer 1

Hacked Existence probably has his web server (apache based on your last question) configured to serve his static files.

user1658078 is correct in that you need to serve the static files in some way, and in a development environment you can use django’s built-in view django.contrib.staticfiles.views.serve(request, path) – all this view does is it looks at the path set in STATICFILES_DIRS and the static subdirectory inside each application (e.g. if your project is my called mysite and it has an application called blog, then it will look in mysite/blog/static/), and serves any files which match the portion of the URL after the value of settings.STATIC_URL.

Finally, it’s worth pointing out that your settings won’t work at all at the moment, because your MEDIA_ROOT and STATIC_ROOT directories are set to serve from subdirectories of /he/sites/video1.hackedexistence.com/htdocs/, and unless you’ve created this directory, it won’t work at all.

To fix static files, templates, admin files & uploaded files, follow these instructions:

In your settings.py, replace the lines in your question with the following:

import os
PROJECT_DIR = os.path.dirname(__file__)

INSTALLED_APPS = (
    'django.contrib.staticfiles',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.admin',
#    'django.contrib.admindocs',
    'beer',  # note - I'm guessing the name of your application is beer
)

# django.contrib.staticfiles app collects files here when we run the collectstatic command
#  (depending on your web server config, you may want to change this to e.g. '/var/www/static/' when it comes to deployment)
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static-serve').replace('\\', '/')
# this should be prepended to your urls for static resources
STATIC_URL = '/static/'
# you can put static files which apply to your entire project here
STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR, "static").replace('\\', '/'),
)

# the URL to where we have the admin media (static files) from a web browser's perspective (not needed if using Django 1.4 or greater)
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

# should be different from static files dir - this is where uploaded stuff goes
#  (depending on your web server config, you may want to change this to e.g. '/var/www/media/' when it comes to deployment)
MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media').replace('\\', '/')
# if you need to serve the uploaded stuff again, you need to prefix your urls with this
MEDIA_URL = '/media/'

# you can put templates which apply to your entire project here
TEMPLATE_DIRS = (
    os.path.join(PROJECT_DIR, "templates").replace('\\', '/'),
)

Also make sure DEBUG is set to True.

In your urls.py inside your django project (i.e. not inside your app directory of beer), add the following at the end:

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

# serving of uploaded media + static files while debug mode is on
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  # uploaded media
    urlpatterns += staticfiles_urlpatterns()  # files in each app's static/ dir

Create the following directories inside your django project directory:

1. /media/ – this is where files uploaded by users go (e.g. via FileField or ImageField)
2. /static/ – this is where you can put static files which apply to your whole django project (e.g. your styles for the whole page). For example, with this configuration, if you are trying to access the css file video1.css at the url static/css/video1.css, then you make sure the file is at the following path: /static/css/video1.css
3. /templates/ – this is where you put templates which apply to your whole django project
4. /beer/static/ – this is where you put static files which apply only to one specific site. When build urls to files in here, you treat them just as if they’re in the /static/ directory, so just prepend the value of STATIC_URL to the relative filename.
5. /beer/templates/ – when you need to start creating templates for your views, you put your templates in here (the TEMPLATE_LOADERS setting includes django.template.loaders.app_directories.Loader by default, which will find templates in this directory). Similar to the application specific static directory, just treat files in this directory as if they are in the normal /templates/ directory.
6. /static-serve/ – this isn’t used during development (so don’t worry too much for now), but when you eventually want to deploy your django application, you run ./manage.py collectstatic, which will cause django to copy all files from each application directory’s static directory and put them in here, and then you configure your web server to serve your files from this directory when the url starts with the value of STATIC_URL (/static/ in this case).

Now your static files will be loaded properly, the admin will display properly, your user uploaded files will be able to be served properly, and your templates will be found properly when you need them.