<!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" lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Managing static files (e.g. images, JavaScript, CSS) — Django 1.8.19 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.8.19',
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="index" title="Index" href="../../genindex.html" />
<link rel="search" title="Search" href="../../search.html" />
<link rel="top" title="Django 1.8.19 documentation" href="../../contents.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 role="document">
<div class="document">
<div id="custom-doc" class="yui-t6">
<div id="hd">
<h1><a href="../../index.html">Django 1.8.19 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-e-g-images-javascript-css">
<span id="managing-static-files-e-g-images-javascript-css"></span><h1>Managing static files (e.g. images, JavaScript, CSS)<a class="headerlink" href="#managing-static-files-e-g-images-javascript-css" 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."><code class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></code></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 <code class="docutils literal"><span class="pre">django.contrib.staticfiles</span></code> is included in your
<a class="reference internal" href="../../ref/settings.html#std:setting-INSTALLED_APPS"><code class="xref std std-setting docutils literal"><span class="pre">INSTALLED_APPS</span></code></a>.</p>
</li>
<li><p class="first">In your settings file, define <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></code></a>, for example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">STATIC_URL</span> <span class="o">=</span> <span class="s1">'/static/'</span>
</pre></div>
</div>
</li>
<li><p class="first">In your templates, either hardcode the url like
<code class="docutils literal"><span class="pre">/static/my_app/myexample.jpg</span></code> or, preferably, use the
<a class="reference internal" href="../../ref/contrib/staticfiles.html#std:templatetag-staticfiles-static"><code class="xref std std-ttag docutils literal"><span class="pre">static</span></code></a> template tag to build the URL for the given
relative path by using the configured <a class="reference internal" href="../../ref/settings.html#std:setting-STATICFILES_STORAGE"><code class="xref std std-setting docutils literal"><span class="pre">STATICFILES_STORAGE</span></code></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></span><span class="cp">{%</span> <span class="k">load</span> <span class="nv">staticfiles</span> <span class="cp">%}</span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</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="o">=</span><span class="s">"My image"</span><span class="p">/></span>
</pre></div>
</div>
</li>
<li><p class="first">Store your static files in a folder called <code class="docutils literal"><span class="pre">static</span></code> in your app. For
example <code class="docutils literal"><span class="pre">my_app/static/my_app/myimage.jpg</span></code>.</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, if you use <a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><code class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></code></a>, this will
be done automatically by <a class="reference internal" href="../../ref/django-admin.html#django-admin-runserver"><code class="xref std std-djadmin docutils literal"><span class="pre">runserver</span></code></a> when <a class="reference internal" href="../../ref/settings.html#std:setting-DEBUG"><code class="xref std std-setting docutils literal"><span class="pre">DEBUG</span></code></a> is set
to <code class="docutils literal"><span class="pre">True</span></code> (see <a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.views.serve" title="django.contrib.staticfiles.views.serve"><code class="xref py py-func docutils literal"><span class="pre">django.contrib.staticfiles.views.serve()</span></code></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"><span class="doc">Deploying static files</span></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 <code class="docutils literal"><span class="pre">static/</span></code> directory inside your apps,
you can define a list of directories (<a class="reference internal" href="../../ref/settings.html#std:setting-STATICFILES_DIRS"><code class="xref std std-setting docutils literal"><span class="pre">STATICFILES_DIRS</span></code></a>) in your
settings file where Django will also look for static files. For example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><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="s2">"static"</span><span class="p">),</span>
<span class="s1">'/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/settings.html#std:setting-STATICFILES_FINDERS"><code class="xref std std-setting docutils literal"><span class="pre">STATICFILES_FINDERS</span></code></a> setting for
details on how <code class="docutils literal"><span class="pre">staticfiles</span></code> 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 <code class="docutils literal"><span class="pre">my_app/static/</span></code> (rather than creating another <code class="docutils literal"><span class="pre">my_app</span></code>
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-static-files-during-development">
<span id="s-serving-static-files-in-development"></span><span id="serving-static-files-during-development"></span><span id="serving-static-files-in-development"></span><h2>Serving static files during development.<a class="headerlink" href="#serving-static-files-during-development" title="Permalink to this headline">¶</a></h2>
<p>If you use <a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><code class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></code></a> as explained above,
<a class="reference internal" href="../../ref/django-admin.html#django-admin-runserver"><code class="xref std std-djadmin docutils literal"><span class="pre">runserver</span></code></a> will do this automatically when <a class="reference internal" href="../../ref/settings.html#std:setting-DEBUG"><code class="xref std std-setting docutils literal"><span class="pre">DEBUG</span></code></a> is set
to <code class="docutils literal"><span class="pre">True</span></code>. If you don’t have <code class="docutils literal"><span class="pre">django.contrib.staticfiles</span></code> in
<a class="reference internal" href="../../ref/settings.html#std:setting-INSTALLED_APPS"><code class="xref std std-setting docutils literal"><span class="pre">INSTALLED_APPS</span></code></a>, you can still manually serve static files using the
<a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.views.serve" title="django.contrib.staticfiles.views.serve"><code class="xref py py-func docutils literal"><span class="pre">django.contrib.staticfiles.views.serve()</span></code></a> view.</p>
<p>This is not suitable for production use! For some common deployment
strategies, see <a class="reference internal" href="deployment.html"><span class="doc">Deploying static files</span></a>.</p>
<p>For example, if your <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_URL</span></code></a> is defined as <code class="docutils literal"><span class="pre">/static/</span></code>, you can do
this by adding the following snippet to your urls.py:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">django.conf</span> <span class="k">import</span> <span class="n">settings</span>
<span class="kn">from</span> <span class="nn">django.conf.urls.static</span> <span class="k">import</span> <span class="n">static</span>
<span class="n">urlpatterns</span> <span class="o">=</span> <span class="p">[</span>
<span class="c1"># ... 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">STATIC_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">STATIC_ROOT</span><span class="p">)</span>
</pre></div>
</div>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p>This helper function works only in debug mode and only if
the given prefix is local (e.g. <code class="docutils literal"><span class="pre">/static/</span></code>) and not a URL (e.g.
<code class="docutils literal"><span class="pre">http://static.example.com/</span></code>).</p>
<p class="last">Also this helper function only serves the actual <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></code></a>
folder; it doesn’t perform static files discovery like
<a class="reference internal" href="../../ref/contrib/staticfiles.html#module-django.contrib.staticfiles" title="django.contrib.staticfiles: An app for handling static files."><code class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></code></a>.</p>
</div>
</div>
<div class="section" id="s-serving-files-uploaded-by-a-user-during-development">
<span id="s-serving-uploaded-files-in-development"></span><span id="serving-files-uploaded-by-a-user-during-development"></span><span id="serving-uploaded-files-in-development"></span><h2>Serving files uploaded by a user during development.<a class="headerlink" href="#serving-files-uploaded-by-a-user-during-development" 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"><code class="xref std std-setting docutils literal"><span class="pre">MEDIA_ROOT</span></code></a> using the <a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.views.serve" title="django.contrib.staticfiles.views.serve"><code class="xref py py-func docutils literal"><span class="pre">django.contrib.staticfiles.views.serve()</span></code></a>
view.</p>
<p>This is not suitable for production use! For some common deployment
strategies, see <a class="reference internal" href="deployment.html"><span class="doc">Deploying static files</span></a>.</p>
<p>For example, if your <a class="reference internal" href="../../ref/settings.html#std:setting-MEDIA_URL"><code class="xref std std-setting docutils literal"><span class="pre">MEDIA_URL</span></code></a> is defined as <code class="docutils literal"><span class="pre">/media/</span></code>, you can do
this by adding the following snippet to your urls.py:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="kn">from</span> <span class="nn">django.conf</span> <span class="k">import</span> <span class="n">settings</span>
<span class="kn">from</span> <span class="nn">django.conf.urls.static</span> <span class="k">import</span> <span class="n">static</span>
<span class="n">urlpatterns</span> <span class="o">=</span> <span class="p">[</span>
<span class="c1"># ... 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. <code class="docutils literal"><span class="pre">/media/</span></code>) and not a URL (e.g.
<code class="docutils literal"><span class="pre">http://media.example.com/</span></code>).</p>
</div>
</div>
<div class="section" id="s-testing">
<span id="s-staticfiles-testing-support"></span><span id="testing"></span><span id="staticfiles-testing-support"></span><h2>Testing<a class="headerlink" href="#testing" title="Permalink to this headline">¶</a></h2>
<p>When running tests that use actual HTTP requests instead of the built-in
testing client (i.e. when using the built-in <a class="reference internal" href="../../topics/testing/tools.html#django.test.LiveServerTestCase" title="django.test.LiveServerTestCase"><code class="xref py py-class docutils literal"><span class="pre">LiveServerTestCase</span></code></a>) the static assets need to be served along
the rest of the content so the test environment reproduces the real one as
faithfully as possible, but <code class="docutils literal"><span class="pre">LiveServerTestCase</span></code> has only very basic static
file-serving functionality: It doesn’t know about the finders feature of the
<code class="docutils literal"><span class="pre">staticfiles</span></code> application and assumes the static content has already been
collected under <a class="reference internal" href="../../ref/settings.html#std:setting-STATIC_ROOT"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></code></a>.</p>
<p>Because of this, <code class="docutils literal"><span class="pre">staticfiles</span></code> ships its own
<a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.testing.StaticLiveServerTestCase" title="django.contrib.staticfiles.testing.StaticLiveServerTestCase"><code class="xref py py-class docutils literal"><span class="pre">django.contrib.staticfiles.testing.StaticLiveServerTestCase</span></code></a>, a subclass
of the built-in one that has the ability to transparently serve all the assets
during execution of these tests in a way very similar to what we get at
development time with <code class="docutils literal"><span class="pre">DEBUG</span> <span class="pre">=</span> <span class="pre">True</span></code>, i.e. without having to collect them
using <a class="reference internal" href="../../ref/contrib/staticfiles.html#django-admin-collectstatic"><code class="xref std std-djadmin docutils literal"><span class="pre">collectstatic</span></code></a> first.</p>
<div class="versionadded">
<span class="title">New in Django 1.7:</span> <p><a class="reference internal" href="../../ref/contrib/staticfiles.html#django.contrib.staticfiles.testing.StaticLiveServerTestCase" title="django.contrib.staticfiles.testing.StaticLiveServerTestCase"><code class="xref py py-class docutils literal"><span class="pre">django.contrib.staticfiles.testing.StaticLiveServerTestCase</span></code></a> is new
in Django 1.7. Previously its functionality was provided by
<a class="reference internal" href="../../topics/testing/tools.html#django.test.LiveServerTestCase" title="django.test.LiveServerTestCase"><code class="xref py py-class docutils literal"><span class="pre">django.test.LiveServerTestCase</span></code></a>.</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."><code class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></code></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"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></code></a> setting to the directory from which you’d
like to serve these files, for example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="n">STATIC_ROOT</span> <span class="o">=</span> <span class="s2">"/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"><code class="xref std std-djadmin docutils literal"><span class="pre">collectstatic</span></code></a> management command:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span>$ python manage.py collectstatic
</pre></div>
</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"><code class="xref std std-setting docutils literal"><span class="pre">STATIC_ROOT</span></code></a> directory.</p>
</li>
<li><p class="first">Use a web server of your choice to serve the
files. <a class="reference internal" href="deployment.html"><span class="doc">Deploying static files</span></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."><code class="xref py py-mod docutils literal"><span class="pre">django.contrib.staticfiles</span></code></a>, see <a class="reference internal" href="../../ref/contrib/staticfiles.html"><span class="doc">the staticfiles
reference</span></a>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="sidebar">
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h3><a href="../../contents.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Managing static files (e.g. images, JavaScript, CSS)</a><ul>
<li><a class="reference internal" href="#configuring-static-files">Configuring static files</a></li>
<li><a class="reference internal" href="#serving-static-files-during-development">Serving static files during development.</a></li>
<li><a class="reference internal" href="#serving-files-uploaded-by-a-user-during-development">Serving files uploaded by a user during development.</a></li>
<li><a class="reference internal" href="#testing">Testing</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.8.19 documentation</a>
<ul><li><a href="../index.html">“How-to” guides</a>
<ul><li>Managing static files (e.g. images, JavaScript, CSS)</li></ul>
</li></ul>
</li>
</ul>
<div role="note" aria-label="source link">
<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>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<form class="search" action="../../search.html" method="get">
<div><input type="text" name="q" /></div>
<div><input type="submit" value="Go" /></div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<h3>Last update:</h3>
<p class="topless">Mar 10, 2018</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>
