Making Octopress Stylesheets Use A Content Distribution Network

I recently migrated from Posterous to Octopress. When working in development on the site, it is really convenient that all the stylesheets are relative and point locally. This means that I can run rake watch to monitor changes to the stylesheet, then Octopress regenerates itself and shows the changes instantly.

The Problem

Using Content Distribution Networks (CDN) are one of the best things you can do to speed up your site. There are many out there, but I use Amazon CloudFront to provide static S3 content across the globe at lightning speeds. The only problem with using a CDN in development is that refreshes to the content are not instant. It can sometimes take hours for changes to reach the network nodes.

I use CloudFront for many of the javascripts, font-files, images and other static elements on this site that don't change very often. Stylesheets, on the other hand, are something I change constantly. I spend a ton of time tweaking here and there, at least in development, so I can't swap out the source stylesheets for CDN hosted ones. Or can I...

The Solution

I created an Octopress deploy task called :css_to_cdn that is run as part of rake gen_deploy that will

1. Upload public/stylesheets/screen.css to an Amazon bucket
2. Scan the public site to find any relative links to stylesheets/screen.css
3. Swap relative links out with the CDN link

This task is run after generate but before deploy so that in development, a generate will still use the local stylesheet.

The Code

The Setup

1. Copy this into your Octopress Rakefile
2. Setup your environment variables for S3 and CloudFront
3. Add :css_to_cdn between :generate and :deploy

The Usage

You can use this standalone by calling rake css_to_cdn from the command line, or it will be run automatically as part of the rake gen_deploy command. Enjoy!

Lastly, I run a small software company called Urban Apps. It pays the bills so I can take the time to write helpful posts like this one. If you found this page helpful at all, I would really appreciate it if you would check out my Apps on the iTunes App Store.

Was this page helpful for you? Buy me a slice of 🍕 to say thanks!