<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Managing static files (CSS, images) — Django 1.5.9 documentation</title>
<link rel="stylesheet" href="../../_static/default.css" type="text/css" />
<link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '../../',
VERSION: '1.5.9',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="../../_static/jquery.js"></script>
<script type="text/javascript" src="../../_static/underscore.js"></script>
<script type="text/javascript" src="../../_static/doctools.js"></script>
<link rel="top" title="Django 1.5.9 documentation" href="../../index.html" />
<link rel="up" title="“How-to” guides" href="../index.html" />
<link rel="next" title="Deploying static files" href="deployment.html" />
<link rel="prev" title="Outputting PDFs with Django" href="../outputting-pdf.html" />
<script type="text/javascript" src="../../templatebuiltins.js"></script>
<script type="text/javascript">
(function($) {
if (!django_template_builtins) {
// templatebuiltins.js missing, do nothing.
return;
}
$(document).ready(function() {
// Hyperlink Django template tags and filters
var base = "../../ref/templates/builtins.html";
if (base == "#") {
// Special case for builtins.html itself
base = "";
}
// Tags are keywords, class '.k'
$("div.highlight\\-html\\+django span.k").each(function(i, elem) {
var tagname = $(elem).text();
if ($.inArray(tagname, django_template_builtins.ttags) != -1) {
var fragment = tagname.replace(/_/, '-');
$(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>");
}
});
// Filters are functions, class '.nf'
$("div.highlight\\-html\\+django span.nf").each(function(i, elem) {
var filtername = $(elem).text();
if ($.inArray(filtername, django_template_builtins.tfilters) != -1) {
var fragment = filtername.replace(/_/, '-');
$(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>");
}
});
});
})(jQuery);
</script>
</head>
<body>
<div class="document">
<div id="custom-doc" class="yui-t6">
<div id="hd">
<h1><a href="../../index.html">Django 1.5.9 documentation</a></h1>
<div id="global-nav">
<a title="Home page" href="../../index.html">Home</a> |
<a title="Table of contents" href="../../contents.html">Table of contents</a> |
<a title="Global index" href="../../genindex.html">Index</a> |
<a title="Module index" href="../../py-modindex.html">Modules</a>
</div>
<div class="nav">
« <a href="../outputting-pdf.html" title="Outputting PDFs with Django">previous</a>
|
<a href="../index.html" title="&#8220;How-to&#8221; guides" accesskey="U">up</a>
|
<a href="deployment.html" title="Deploying static files">next</a> »</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g" id="howto-static-files-index">
<div class="section" id="s-managing-static-files-css-images">
<span id="managing-static-files-css-images"></span><h1>Managing static files (CSS, images)<a class="headerlink" href="#managing-static-files-css-images" title="Permalink to this headline">¶</a></h1>
<p>Websites generally need to serve additional files such as images, JavaScript,
or CSS. In Django, we refer to these files as “static files”. Django provides
<a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><tt class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></tt></a> to help you manage them.</p>
<p>This page describes how you can serve these static files.</p>
<div class="section" id="s-configuring-static-files">
<span id="configuring-static-files"></span><h2>Configuring static files<a class="headerlink" href="#configuring-static-files" title="Permalink to this headline">¶</a></h2>
<ol class="arabic">
<li><p class="first">Make sure that <tt class="docutils literal"><span class="pre">django.contrib.staticfiles</span></tt> is included in your
<a class="reference internal" href="../../ref/settings.html#std:setting-INSTALLED_APPS"><tt class="xref std std-setting docutils literal"><span class="pre">INSTALLED_APPS</span></tt></a>.</p>
</li>
<li><p class="first">In your settings file, define <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></tt></a>, for example:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">STATIC_URL</span> <span class="o">=</span> <span class="s">'/static/'</span>
</pre></div>
</div>
</li>
<li><p class="first">In your templates, either hardcode the url like
<tt class="docutils literal"><span class="pre">/static/my_app/myexample.jpg</span></tt> or, preferably, use the
<a class="reference internal" href="../../ref/contrib/staticfiles.html#std:templatetag-staticfiles-static"><tt class="xref std std-ttag docutils literal"><span class="pre">static</span></tt></a> template tag to build the URL for the given
relative path by using the configured <a class="reference internal" href="../../ref/contrib/staticfiles.html#std:setting-STATICFILES_STORAGE"><tt class="xref std std-setting docutils literal"><span class="pre">STATICFILES_STORAGE</span></tt></a> storage
(this makes it much easier when you want to switch to a content delivery
network (CDN) for serving static files).</p>
<div class="highlight-html+django" id="staticfiles-in-templates"><div class="highlight"><pre><span class="cp">{%</span> <span class="k">load</span> <span class="nv">staticfiles</span> <span class="cp">%}</span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"</span><span class="cp">{%</span> <span class="k">static</span> <span class="s2">"my_app/myexample.jpg"</span> <span class="cp">%}</span><span class="s">"</span> <span class="na">alt=</span><span class="s">"My image"</span><span class="nt">/></span>
</pre></div>
</div>
</li>
<li><p class="first">Store your static files in a folder called <tt class="docutils literal"><span class="pre">static</span></tt> in your app. For
example <tt class="docutils literal"><span class="pre">my_app/static/my_app/myimage.jpg</span></tt>.</p>
</li>
</ol>
<div class="admonition-serving-the-files admonition">
<p class="first admonition-title">Serving the files</p>
<p>In addition to these configuration steps, you’ll also need to actually
serve the static files.</p>
<p>During development, this will be done automatically if you use
<a class="reference internal" href="../../ref/django-admin.html#django-admin-runserver"><tt class="xref std std-djadmin docutils literal"><span class="pre">runserver</span></tt></a> and <a class="reference internal" href="../../ref/settings.html#std:setting-DEBUG"><tt class="xref std std-setting docutils literal"><span class="pre">DEBUG</span></tt></a> is set to <tt class="docutils literal"><span class="pre">True</span></tt> (see
<a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.views.serve" title="django.contrib.staticfiles.views.serve"><tt class="xref py py-func docutils literal"><span class="pre">django.contrib.staticfiles.views.serve()</span></tt></a>).</p>
<p>This method is <strong>grossly inefficient</strong> and probably <strong>insecure</strong>,
so it is <strong>unsuitable for production</strong>.</p>
<p class="last">See <a class="reference internal" href="deployment.html"><em>Deploying static files</em></a> for proper strategies to serve
static files in production environments.</p>
</div>
<p>Your project will probably also have static assets that aren’t tied to a
particular app. In addition to using a <tt class="docutils literal"><span class="pre">static/</span></tt> directory inside your apps,
you can define a list of directories (<a class="reference internal" href="../../ref/contrib/staticfiles.html#std:setting-STATICFILES_DIRS"><tt class="xref std std-setting docutils literal"><span class="pre">STATICFILES_DIRS</span></tt></a>) in your
settings file where Django will also look for static files. For example:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">STATICFILES_DIRS</span> <span class="o">=</span> <span class="p">(</span>
<span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">BASE_DIR</span><span class="p">,</span> <span class="s">"static"</span><span class="p">),</span>
<span class="s">'/var/www/static/'</span><span class="p">,</span>
<span class="p">)</span>
</pre></div>
</div>
<p>See the documentation for the <a class="reference internal" href="../../ref/contrib/staticfiles.html#std:setting-STATICFILES_FINDERS"><tt class="xref std std-setting docutils literal"><span class="pre">STATICFILES_FINDERS</span></tt></a> setting for
details on how <tt class="docutils literal"><span class="pre">staticfiles</span></tt> finds your files.</p>
<div class="admonition-static-file-namespacing admonition">
<p class="first admonition-title">Static file namespacing</p>
<p class="last">Now we <em>might</em> be able to get away with putting our static files directly
in <tt class="docutils literal"><span class="pre">my_app/static/</span></tt> (rather than creating another <tt class="docutils literal"><span class="pre">my_app</span></tt>
subdirectory), but it would actually be a bad idea. Django will use the
first static file it finds whose name matches, and if you had a static file
with the same name in a <em>different</em> application, Django would be unable to
distinguish between them. We need to be able to point Django at the right
one, and the easiest way to ensure this is by <em>namespacing</em> them. That is,
by putting those static files inside <em>another</em> directory named for the
application itself.</p>
</div>
</div>
<div class="section" id="s-serving-files-uploaded-by-a-user">
<span id="serving-files-uploaded-by-a-user"></span><h2>Serving files uploaded by a user<a class="headerlink" href="#serving-files-uploaded-by-a-user" title="Permalink to this headline">¶</a></h2>
<p>During development, you can serve user-uploaded media files from
<a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_ROOT"><tt class="xref std std-setting docutils literal"><span class="pre">MEDIA_ROOT</span></tt></a> using the <a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.views.serve" title="django.contrib.staticfiles.views.serve"><tt class="xref py py-func docutils literal"><span class="pre">django.contrib.staticfiles.views.serve()</span></tt></a>
view. This is not suitable for production use! For some common deployment
strategies, see <a class="reference internal" href="deployment.html"><em>Deploying static files</em></a>.</p>
<p>For example, if your <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><tt class="xref std std-setting docutils literal"><span class="pre">MEDIA_URL</span></tt></a> is defined as ‘/media/’, you can do
this by adding the following snippet to your urls.py:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="kn">from</span> <span class="nn">django.conf</span> <span class="kn">import</span> <span class="n">settings</span>
<span class="kn">from</span> <span class="nn">django.conf.urls.static</span> <span class="kn">import</span> <span class="n">static</span>
<span class="n">urlpatterns</span> <span class="o">=</span> <span class="n">patterns</span><span class="p">(</span><span class="s">''</span><span class="p">,</span>
<span class="c"># ... the rest of your URLconf goes here ...</span>
<span class="p">)</span> <span class="o">+</span> <span class="n">static</span><span class="p">(</span><span class="n">settings</span><span class="o">.</span><span class="n">MEDIA_URL</span><span class="p">,</span> <span class="n">document_root</span><span class="o">=</span><span class="n">settings</span><span class="o">.</span><span class="n">MEDIA_ROOT</span><span class="p">)</span>
</pre></div>
</div>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">This helper function works only in debug mode and only if
the given prefix is local (e.g. <tt class="docutils literal"><span class="pre">/static/</span></tt>) and not a URL (e.g.
<tt class="docutils literal"><span class="pre">http://static.example.com/</span></tt>).</p>
</div>
</div>
<div class="section" id="s-deployment">
<span id="deployment"></span><h2>Deployment<a class="headerlink" href="#deployment" title="Permalink to this headline">¶</a></h2>
<p><a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><tt class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></tt></a> provides a convenience management command
for gathering static files in a single directory so you can serve them easily.</p>
<ol class="arabic">
<li><p class="first">Set the <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></tt></a> setting to the directory from which you’d
like to serve these files, for example:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">STATIC_ROOT</span> <span class="o">=</span> <span class="s">"/var/www/example.com/static/"</span>
</pre></div>
</div>
</li>
<li><p class="first">Run the <a class="reference internal" href="../../ref/contrib/staticfiles.html#django-admin-collectstatic"><tt class="xref std std-djadmin docutils literal"><span class="pre">collectstatic</span></tt></a> management command:</p>
<div class="highlight-python"><pre>./manage.py collectstatic</pre>
</div>
<p>This will copy all files from your static folders into the
<a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><tt class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></tt></a> directory.</p>
</li>
<li><p class="first">Use a webserver of your choice to serve the
files. <a class="reference internal" href="deployment.html"><em>Deploying static files</em></a> covers some common deployment
strategies for static files.</p>
</li>
</ol>
</div>
<div class="section" id="s-learn-more">
<span id="learn-more"></span><h2>Learn more<a class="headerlink" href="#learn-more" title="Permalink to this headline">¶</a></h2>
<p>This document has covered the basics and some common usage patterns. For
complete details on all the settings, commands, template tags, and other pieces
included in <a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><tt class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></tt></a>, see <a class="reference internal" href="../../ref/contrib/staticfiles.html"><em>the staticfiles
reference</em></a>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="sidebar">
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h3><a href="../../contents.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Managing static files (CSS, images)</a><ul>
<li><a class="reference internal" href="#configuring-static-files">Configuring static files</a></li>
<li><a class="reference internal" href="#serving-files-uploaded-by-a-user">Serving files uploaded by a user</a></li>
<li><a class="reference internal" href="#deployment">Deployment</a></li>
<li><a class="reference internal" href="#learn-more">Learn more</a></li>
</ul>
</li>
</ul>
<h3>Browse</h3>
<ul>
<li>Prev: <a href="../outputting-pdf.html">Outputting PDFs with Django</a></li>
<li>Next: <a href="deployment.html">Deploying static files</a></li>
</ul>
<h3>You are here:</h3>
<ul>
<li>
<a href="../../index.html">Django 1.5.9 documentation</a>
<ul><li><a href="../index.html">“How-to” guides</a>
<ul><li>Managing static files (CSS, images)</li></ul>
</li></ul>
</li>
</ul>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="../../_sources/howto/static-files/index.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="../../search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<h3>Last update:</h3>
<p class="topless">Mar 19, 2015</p>
</div>
</div>
<div id="ft">
<div class="nav">
« <a href="../outputting-pdf.html" title="Outputting PDFs with Django">previous</a>
|
<a href="../index.html" title="&#8220;How-to&#8221; guides" accesskey="U">up</a>
|
<a href="deployment.html" title="Deploying static files">next</a> »</div>
</div>
</div>
<div class="clearer"></div>
</div>
</body>
</html>
