The Making of an Octopress Theme

I fucking love Octopress. There’s something about static files, Markdown, Git repos, the terminal, and a text editor that turns me on. I could have easily developed an awesome Wordpress theme for this site but I chose Octopress instead. Octopress feels more permanent, more personal, and it doesn’t have a million frills like Wordpress does. I just want to set something up once and just write. But after having used Octopress before I dreaded creating a theme for it. There are so many blogs who don’t bother to change the default theme or just change the colors and call it a day. There are few good options out there when it comes to Octopress themes and being someone who always wants a custom solution I decided to roll my own. The theme is still in development but its called Spart’n and its on this blog now. This is the first part in a series of posts outlining how I developed Spart’n and Octopress theme development in general.

Getting started

Getting started was the hardest part. Where to start, where to start? I had no clue but I had a vague idea of how Octopress and Jekyll themes worked. So I fulled-screened two editor windows side by side and compared the default theme with an HTML page that I wanted to use as the basis of my site.

It turns out that the best way to get started is to just develop a static website that runs by itself. So I did. I designed a blog theme as a static HTML page and then cut it up into an Octopress theme.

Learning the technology


HTML is easy but what about Liquid, Ruby, and SASS? Well, all three aren’t really that hard once you set out to really use them. I haven’t picked up Liquid yet but I did have to learn SASS. I was going to be lazy and just compile my LESS files into the CSS directory and not even use the Sass features that Jekyll and Octopress come with but then it dawned on me that if I did this right it could be reuseable and I could share it with others. So I set about learning Sass. It’s not too different from LESS at all and it only took me about an hour to convert my existing LESS-based CSS framework into Octopress-ready Sass (though I must admit I’m not using the full potential of Sass and there’s much to learn).

Step 1: Learn Sass Time invested: 3 hours

Octopress directory structure

This is something I’ve yet to learn in depth but I’m quite familiar with. Basically, you’ve got a theme directory. Inside you’ll find two more directories. A source folder and a sass folder. The source folder holds all the HTML partials and Liquid template tags that pull in the right information in the right places at the right time. The sass folder is where your stylesheets go. At first I was using my own framework’s directory structure but then figured it would be easier to adapt what I know to Octopress than to adapt Octopress to my own framework. This way I could take advantage of a lot of the features the default theme comes with just by copying the files I didn’t need to customize. So that’s what I did. One by one, with my two editors side by side, I created each file and folder and customized any HTML I needed to get the site looking how I wanted. Anything I was unsure of or knew I didn’t need to customize I kept the same. I figured that way everything would still work when I installed the theme and anything that needed fixing would show up in very obvious ways.

Step 2: Learn and create the directory structure and files Time invested: 2 days (a few hours here and there in my free time)

A GitHub repository is born

All in all it took me about 3 days total from idea to this point. Just as I was finishing I thought why not open source this. Hopefully I’ll get some feedback, ideas, and maybe someone will make it better and submit a pull request or file an issue or even use this theme on their own site.

There’s still much to be done but at this point I think if I don’t publish it now, I never will. And if I’m not using the theme on a live site I may never actually finish it. So that’s where we are now. More updates to come as I update the theme. Be sure to check the repo at some point too and let me know if you end up using it.

Design, Web development

« Don't Give a Damn Introducing Animal. A Static Site Generator for PHP »