Greg Aker

Make No Assumptions With Asset Management

Filed in: ExpressionEngine

October 19, 2010

Something I've noticed lately is that people don't pay much attention to how they manage their static web resources. Be careful, as this can come back to bite you in the ass some day. Picture this, you're a day out from an extreme traffic event and you have notified your hosting company (please, notify your hosting company). What will you do if they say, "Let's get static resources moved over to a CDN."

uhh, what?

Let's imagine you are 24 hours out from being featured on Oprah. Your basic in-house 'dedicated' server ain't going to cut it. For most of us, this is traffic we can only dream about. So you use awesome hosts and get set up on a couple web servers, a separate database server and some other servers for static resources. Or if you know what you're doing when it comes to slinging a terminal, you use some of the awesome tools out there to quickly provision exactly what you need.

Point is, ExpressionEngine makes it really easy to plan for this ahead of time.

Key #1 is not making your web directory structure look like the desktop on my iMac. We need to jockey around a few default image locations & paths in EE, but this is a relatively painless process. My typical directory structure looks like:

├── ee_system
│   ├── codeigniter
│   ├── expressionengine
│   ├── index.html
│   ├── index.php
└── public_html
    ├── administa.php
    ├── index.php
    ├── static
    │   ├── css
    │   ├── images
    │   │   ├── site
    │   │   ├── avatars
    │   │   ├── captchas
    │   │   ├── index.html
    │   │   ├── member_photos
    │   │   ├── pm_attachments
    │   │   ├── signature_attachments
    │   │   ├── smileys
    │   │   └── uploads
    │   └── javascript
    └── themes

I'm running with the EE system folder above the web root, and I'm moving the default /images directory to /static/images. To make the transition painless, I make a global variable in EE called {static_url} with a value of: http://www.example.com/static/, so I reference all static resources that way. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Awesomesauce</title>
    <link rel="stylesheet" href="{static_url}css/foobar.2010101900.css" type="text/css">
    <!--[if IE]><link rel="stylesheet" href="{static_url}css/i-hate-you-ie.2010101900.css" type="text/css"><![endif]-->
</head>
<body>

</body>
</html>

Then, in the stylesheets, I only use relative links to images.

So now the big day is here, your host is working with you every step of the way, and you look like a rock star. You start serving http://static.example.com/ from that /images/static/ directory, flip your global variable to the new domain, and have a more stress-free day than if you didn't prepare in advance.

There are a bunch of ways to skin a cat. I have found this to be solid and dependable for me. What do you prefer?