Matt Coneybeare

MC

Making Octopress Stylesheets Use a Content Distribution Network

| Comments

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 posting helpful at all, I would really appreciate it if you would check out my Apps on the iTunes App Store.

Comments

My name is Matt Coneybeare, I design and develop for iOS (iPhone, iPad and iPod Touch), Mac OS X and the Web out of New York. In 2008 I started a software company called Urban Apps that has made some pretty popular apps such as Ambiance and Hourly News. My current Stack Overflow reputation is about 27k.

I was a Rockstar a decade ago, but then went back to school and collected a Bachelor's Degree in Computer Science from U.C. Berkeley. Now I am settled down with my beautiful wife Di and our two doggies Hamachi and Foxy. While coding, I walk several miles/day on my Treadmill Desk. When not at my desk, I love exploring New York City as a Yelp Elite, or training for marathons.

Contact information

Name
Matt Coneybeare
Email
Website
Twitter
Instagram
GitHub
LinkedIn
Google+