Proper way to handle static files and templates for Django on Heroku

You should store them externally on a service like S3 - while Heroku can serve static files, it's not designed to.

Here's a good primer on getting started with S3:

https://devcenter.heroku.com/articles/s3

Use django-storages http://django-storages.readthedocs.org/en/latest/index.html to collect static files to your S3 bucket and serve them accordingly.

These are the necessary settings you'll need to have for S3:

DEFAULT_FILE_STORAGE = 'storages.backends.s3boto.S3BotoStorage'
STATICFILES_STORAGE = 'storages.backends.s3boto.S3BotoStorage'

AWS_ACCESS_KEY_ID = 'access-id'
AWS_SECRET_ACCESS_KEY = 'secret-key'
AWS_STORAGE_BUCKET_NAME = 'bucket-name'
AWS_PRELOAD_METADATA = True # necessary to fix manage.py collectstatic command to only upload changed files instead of all files

MEDIA_ROOT and STATIC_ROOT are superceded by DEFAULT_FILE_STORAGE and STATICFILES_STORAGE respectively and hence not needed. You will, however, want to set MEDIA_URL and STATIC_URL to something like

STATIC_URL = 'https://bucket-name.s3.amazonaws.com/static/'
ADMIN_MEDIA_PREFIX = 'https://bucket-name.s3.amazonaws.com/static/admin/'

If you want to store your static and media files in different subfolders, this is a great solution: https://stackoverflow.com/a/10825691/674794

You'll want to set MEDIA_URL and STATIC_URL to the respective new folders, e.g.

MEDIA_URL = 'https://bucket-name.s3.amazonaws.com/media/'
STATIC_URL = 'https://bucket-name.s3.amazonaws.com/static/'

You'll also want to manually execute manage.py collectstatic and disable Heroku's automatic collectstatic as per https://devcenter.heroku.com/articles/django-assets#disabling_collectstatic, as Heroku's collectstatic will reupload every static file to S3 every time you push even if the files haven't been modified, adding a hefty transfer and request load to S3 and slowing down your pushes.

Then just continue using {{ STATIC_URL }} in your templates like usual and you should be set!

<link href='{{ STATIC_URL }}css/styles.css' type='text/css' rel='stylesheet'>

If you want to start off simple and choose not to immediately take that route though, you can do the quick hack in your urls configuration by following Cesar's mentioned post at Heroku - Handling static files in Django app, though there'll be a significant decrease in app performance.

While @Intenex's answer might still be the way to go if you have a lot of static content, for getting started, Heroku suggests using Whitenoise.

Here's Heroku's article aptly entitled "Django and Static Assets".

And the whitenoise documentation itself has a nice section on "Shouldn’t I be pushing my static files to S3 using something like Django-Storages?"