Question

Django: can't load static files from template using Ubuntu 14.04/Django Droplet

Hello everyone, I’m trying to render a template page with my Django project running on a Ubuntu 14.04 Droplet, but I’m having a lot of issues loading static files from the template.

My project structure:

djangoapptoscana/
    manage.py
    djangoapptoscana/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    dashboard/
        __init__.py
       views.py
       templates/
          index.hml
    static/
          css/
          js/
          ...

Here it is my nginx configuration file:

/etc/nginx/sites-available/django
upstream app_server {
    server 127.0.0.1:9000 fail_timeout=0;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html;
    index index.html index.htm;

    client_max_body_size 4G;
    server_name _;

    keepalive_timeout 5;

    # Your Django project's media files - amend as required
    location /media  {
        alias /home/workspace/app-toscana/django/djangoapptoscana/djangoapptoscana/media;
    }

    # your Django project's static files - amend as required
    location /static {
        #alias /home/workspace/app-toscana/django/djangoapptoscana/djangoapptoscana/static;
        alias /home/workspace/app-toscana/django/djangoapptoscana/static;
    }

    # Proxy the static assests for the Django Admin panel
    location /static/admin {
       alias /usr/lib/python2.7/dist-packages/django/contrib/admin/static/admin/;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://app_server;
    }
}

The settings file:

/home/workspace/app-toscana/django/djangoapptoscana/djangoapptoscana

"""
Django settings for djangoapptoscana project.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '0^rkr0-u%ic)yo^qc()vp8ii&mn&irk+ie_o=swp7qd82ervyh'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = False

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashboard',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

ROOT_URLCONF = 'djangoapptoscana.urls'

WSGI_APPLICATION = 'djangoapptoscana.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'test',
        'USER': 'test',
        'PASSWORD': 'test',
        'HOST': 'localhost',
        'PORT': '',
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder'
)

#STATIC_PATH = os.path.join(BASE_DIR, 'static')

STATIC_ROOT = '/home/workspace/app-toscana/django/djangoapptoscana/static/'

STATIC_URL = '/static/' # You may find this is already defined as such.

#STATICFILES_DIRS = (
#    STATIC_PATH,
#)

Template page:

/home/workspace/app-toscana/django/djangoapptoscana/dashboard/templates/index.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.4 -->
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.css' %}" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="{% static 'dist/css/AdminLTE.css' %}" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="{% static 'dist/css/skins/_all-skins.min.css' %}" rel="stylesheet" type="text/css" />

    <link href="{% static 'dist/css/ol.css' %}" rel="stylesheet" type="text/css" />
    <script src="{% static 'dist/js/ol.js' %}"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <div>Hello world!</div>
  </body>
</html>

When I try to get some static file, I receive a 404 error. Any suggestion? I tried different configuration without any results. Thanks!

Subscribe
Share

This comment has been deleted

Having this problem as well! Similar setup


Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

This comment has been deleted

I tried it but still go the same error. I am using v 1.11. Anyone knows some issue with this?

This was the solution to my problem too, Thanks for updating!

Hopefully, I found a solution to this problem. It was a permission issue. On my DigitalOcean machine I set the owner of the django app directory to root:root

chown -R root:root /home/django/djangoapptoscana/dashboard

and the owner of the static files directory to django:django

chown -R django:django /home/django/djangoapptoscana/djangoapptoscana/static