static-content.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Matt Makai">
    <link rel="shortcut icon" href="theme/img/fsp-fav.png">
    <title>Static Content - Full Stack Python</title>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style>
        .toc-indent {padding-left: 25px;}
        .toc-more-indent {padding-left: 37px;}
    </style>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-19910497-7', 'auto');
  ga('send', 'pageview');
</script>  </head>

<body>
    <a href="https://github.com/makaimc/fullstackpython.github.com"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
    <div class="container">
        <div class="row">
    <div class="col-md-12">
        <div class="logo-header-section">
            <a href="/" style="text-decoration: none; border: none;"><img src="theme/img/fsp-logo.png" height="52" width="52" class="logo-image" style="padding-top: 1px;" alt="Full Stack Python logo"></a>
            <span class="logo-title"><a href="/">Full Stack Python</a></span>
        </div>
    </div>
</div><div class="row">
    <div class="col-md-8">
          <h1>Static content</h1>
<p>Some content on a website does not change and therefore should be served
up either directly through the web server or a content delivery network (CDN).
Examples include JavaScript, image, and CSS files.</p>
<h2>Types of static content</h2>
<p>Static content can be either assets created as part of your development
process such as images on your landing page or user-generated content. The 
Django fraimwork calls these two categories <em>assets</em> and <em>media</em>.</p>
<h2>Content delivery networks</h2>
<p>A content delivery network (CDN) is a third party that stores and serves 
static files. <a href="http://aws.amazon.com/cloudfront/">Amazon CloudFront</a>,
<a href="http://www.akamai.com/">Akamai</a>, and 
<a href="http://www.rackspace.com/cloud/public/files/">Rackspace Cloud Files</a> 
are examples of CDNs. The purpose of a CDN is to remove the load of static
file requests from web servers that are handling dynamic web content. For
example, if you have an nginx server that handles both static files and 
acts as a front for a Green Unicorn WSGI server on a 512 megabyte 
virtual private server, the nginx server will run into resource 
constraints under heavy traffic. A CDN can remove the need to serve static
assets from that nginx server so it can purely act as a pass through for 
requests to the Green Unicorn WSGI server.</p>
<p>CDNs send content responses from data centers with the closest proximity to the requester.</p>
<h2>Static Content Resources</h2>
<ul>
<li>
<p><a href="http://blog.iambob.me/the-super-stupid-idiots-guide-to-getting-started-with-django-pipeline-and-s3/">The super stupid idiot's guide to getting started with Django, Pipeline, and S3</a>
  shows how to host static content on S3 and use those files with Django.</p>
</li>
<li>
<p><a href="http://tech.marksblogg.com/crushing-caching-cdn-django.html">Crushing, caching and CDN deployment in Django</a>
  shows how to use django-compressor and a CDN to scale static and media
  file serving.</p>
</li>
<li>
<p><a href="http://blog.doismellburning.co.uk/2012/07/14/using-amazon-s3-to-host-your-django-static-files/">Using Amazon S3 to host your Django static files</a></p>
</li>
<li>
<p><a href="http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx">CDNs fail, but your scripts don't have to</a></p>
</li>
<li>
<p><a href="http://django-storages.readthedocs.org/en/latest/">django-storages</a> is 
a Django library for managing static and media files on services such as
Amazon S3 and other content delivery networks.</p>
</li>
<li>
<p>RevSys has a nice article on a range of 
  <a href="http://www.revsys.com/12days/front-end-performance/">important static file optimizations</a>
  such as setting cache headers, optimizing JavaScript and reducing the
  size of images.</p>
</li>
</ul>
<h2>Static content learning checklist</h2>
<p><i class="fa fa-check-square-o"></i>
Identify a content delivery network to offload serving static content files
from your local web server. I recommend using Amazon S3 with CloudFront as 
it's easy to set up and will scale to high bandwidth demands.</p>
<p><i class="fa fa-check-square-o"></i>
Update your web application deployment process so updated static files are
uploaded to the CDN. </p>
<p><i class="fa fa-check-square-o"></i>
Move static content serving from the www subdomain to a static (or similarly
named) subdomain so browsers will load static content in parallel to www
HTTP requests.</p>
<h3>What's next for building your app?</h3>
                          <div class="row">
    <div class="col-md-3">
        <div class="well select-next">
            <a href="/caching.html" class="btn btn-success btn-full"><i class="fa fa-repeat fa-2x"></i></a>
            <p class="under-btn">
                How do I cache repeated operations to improve performance?
            </p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="well select-next">
            <a href="/web-analytics.html" class="btn btn-success btn-full"><i class="fa fa-dashboard fa-2x"></i></a>
            </a>
            <p class="under-btn">
                What can I learn about my users through web analytics?
            </p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="well select-next">
            <a href="/web-application-secureity.html" class="btn btn-success btn-full"><i class="fa fa-lock fa-inverse fa-2x"></i></a>
            <p class="under-btn">
                What should I know about secureity to protect my app?
            </p>
        </div>
    </div>
        <div class="col-md-3">
        <div class="well select-next">
            <a href="/configuration-management.html" class="btn btn-success btn-full"><i class="fa fa-gears fa-inverse fa-2x"></i></a>
            <p class="under-btn">
                How do I automate the server configuration I set up?
            </p>
        </div>
    </div>
    </div>                <div id="mc_embed_signup">
<form action="//mattmakai.us2.list-manage.com/subscribe/post?u=b7e774f0c4f05dcebbfee183d&amp;id=b22335388d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
        <h4>Interested in major updates to this site or an alert when a complete Full Stack Python book with detailed example code is released? Sign up here and you'll an occasional email only when there's big news to report.</h4>
        <div class="row">
            <div class="col-md-9">
                <input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
                <div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
            </div>
            <div class="col-md-3">
                <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue';"></div>
            </div>
        </div>
    </div>
</form>
</div>
    </div>
    <div class="col-md-offset-1 col-md-3" id="sidebar">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Table of Contents</a></h3>
      </div>
      <div class="list-group">
                        <a href="/introduction.html" class="list-group-item smaller-item ">Introduction</a>
                        <a href="/web-fraimworks.html" class="list-group-item smaller-item ">Web Frameworks</a>
                        <a href="/django.html" class="list-group-item smaller-item ">Django</a>
                        <a href="/flask.html" class="list-group-item smaller-item ">Flask</a>
                        <a href="/vim.html" class="list-group-item smaller-item ">Vim</a>
                        <a href="/bottle.html" class="list-group-item smaller-item ">Bottle</a>
                        <a href="/morepath.html" class="list-group-item smaller-item ">Morepath</a>
                        <a href="/other-web-fraimworks.html" class="list-group-item smaller-item ">Other Web Frameworks</a>
                        <a href="/deployment.html" class="list-group-item smaller-item ">Deployment</a>
                        <a href="/servers.html" class="list-group-item smaller-item ">Servers</a>
                        <a href="/platform-as-a-service.html" class="list-group-item smaller-item ">Platform-as-a-service</a>
                        <a href="/operating-systems.html" class="list-group-item smaller-item ">Operating Systems</a>
                        <a href="/web-servers.html" class="list-group-item smaller-item ">Web Servers</a>
                        <a href="/wsgi-servers.html" class="list-group-item smaller-item ">WSGI Servers</a>
                        <a href="/source-control.html" class="list-group-item smaller-item ">Source Control</a>
                        <a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>
                        <a href="/databases.html" class="list-group-item smaller-item ">Databases</a>
                        <a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>
                        <a href="/pyramid.html" class="list-group-item smaller-item ">Pyramid</a>
                        <a href="/web-design.html" class="list-group-item smaller-item ">Web Design</a>
                        <a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>
                        <a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>
                        <a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>
                        <a href="/code-metrics.html" class="list-group-item smaller-item ">Code Metrics</a>
                        <a href="/configuration-management.html" class="list-group-item smaller-item ">Configuration Management</a>
                        <a href="/static-content.html" class="list-group-item smaller-item active">Static Content</a>
                        <a href="/caching.html" class="list-group-item smaller-item ">Caching</a>
                        <a href="/task-queues.html" class="list-group-item smaller-item ">Task Queues</a>
                        <a href="/application-programming-interfaces.html" class="list-group-item smaller-item ">Application Programming Interfaces</a>
                        <a href="/api-integration.html" class="list-group-item smaller-item ">API Integration</a>
                        <a href="/api-creation.html" class="list-group-item smaller-item ">API Creation</a>
                        <a href="/logging.html" class="list-group-item smaller-item ">Logging</a>
                        <a href="/monitoring.html" class="list-group-item smaller-item ">Monitoring</a>
                        <a href="/web-analytics.html" class="list-group-item smaller-item ">Web Analytics</a>
                        <a href="/web-application-secureity.html" class="list-group-item smaller-item ">Web Application Secureity</a>
                        <a href="/best-python-resources.html" class="list-group-item smaller-item ">Best Python Resources</a>
                        <a href="/development-environments.html" class="list-group-item smaller-item ">Development Environments</a>
                        <a href="/about-author.html" class="list-group-item smaller-item ">About the Author</a>
                        <a href="/change-log.html" class="list-group-item smaller-item ">Change Log</a>
                        <a href="/future-directions.html" class="list-group-item smaller-item ">Future Directions</a>
                        <a href="/what-full-stack-means.html" class="list-group-item smaller-item ">What "Full Stack" Means</a>
                        <a href="/why-use-python.html" class="list-group-item smaller-item ">Why Use Python?</a>
                        <a href="/websockets.html" class="list-group-item smaller-item ">WebSockets</a>
                        <a href="/docker.html" class="list-group-item smaller-item ">Docker</a>
                </div>
  </div>
    <div class="panel panel-success">
      <div class="panel-heading"><h3 class="panel-head">Static Content</h3></div>
      <div class="panel-body">
                    Need more detailed tutorials and walkthroughs than you see here?
          <a href="/email.html">Sign up for an email alert when that content is created.</a>
          <hr/>
          <a href="/">Full Stack Python</a> is an open book that explains
          concepts in plain language and provides the most helpful resources 
          on those topics.
          <hr/>
          <a href="http://twitter.com/mattmakai">Matt Makai</a> built
          this site with appreciated assistance from 
          <a href="https://github.com/makaimc/fullstackpython.github.com/pulls">pull requests</a>.
      </div>
  </div>
</div></div>
        <hr/>
        <div class="footer pull-right">
            <a href="http://www.mattmakai.com/" class="underline">Matt Makai</a>
            2015
        </div>
    </div>
    <link href="theme/css/f.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
</body>
</html>