<!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.8 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.8', 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.8 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.8 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.8 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">May 15, 2014</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>