Octopress and this blog

This blog post is now out of date, as I'm using Ghost.

If you take a look at the bottom of any page on my blog, you'll see a sweet little message, "Proudly powered by Octopress", for those that do not know about Octopress, it's a blogging platform, for hackers. It's awesome.

Octopress makes use of a powerful and very flexible platform called Jekyll written by Tom Preston-Werner, CEO of GitHub. Jekyll is super cool and ridiculously powerful &amp is the framework which powers GitHub Pages.

I've not really made changes to the Jekyll side of things, instead I've focused on creating new plugins and tweaking the settings of everything that happens. In this post I'm quickly going to go over the changes I've made, the things that my blog is capable of doing and what I'm going to be adding in the future.


Embedded Tweets

Written by Scott W. Bradley. Code on GitHub

Whilst I didn't write this one myself, I've made good use of it throughout several of my blog posts. It's exceedingly useful and very easy to implement.


Written by Jamie Owen, Code on Gist:GitHub

I've only used this plugin so far on very few posts, in fact the only one I can remember using it for was my Cancer Research Video. But it served its usefulness well. Very small, very easy to use.


Written by James Brooks, Code on GitHub

I blogged about this plugin back in August and yet never shared the code... Something I'll get on to. I never actually used this, but it was intended for a review about Looper.

Template additions

Whilst I'm using a custom template, purchased from WrapBootstrap. I've extended Octopress in a couple of ways which allows me to do some pretty gnarly things.

Multiple Authors

The first use of this was Jared White's post on Why I built Mariposta. Up until then only one person could publish a post from an Octopress blog, whilst I'm technically the only person who can publish a post, I was still unable to allow anybody else to post. To remedy this I've told Octopress use several YAML properties in the post header if they exist.

Multiple Authors

If you're unfamiliar with Octopress so far, I've added the following:

  • author
  • author_site

This sets the post template to use the given name, rather than the defaults found in the _config.yml file.

{% if post.author %}
  {% assign author = post.author %}
{% elsif page.author %}
  {% assign author = page.author %}
{% else %}
  {% assign author = site.author %}
{% endif %}

{% capture googleplus_user %}{% if site.googleplus_user %}{{ site.googleplus_user }}{% endif %}{% endcapture %}

<div class="postedby">  
  <h4><i class='icon-user'></i> Author:</h4> 
  <p class="author-name">
        {% if post.author_site %}
        <a href="{{post.author_site}}">{{ author }}</a>
        {% else %}
        <a href="https://plus.google.com/{{ googleplus_user }}?rel=author">{{ author }}</a>
        {% endif %}

Simple, yet allows you to extend your blog by making guest posts ridiculously easy!


Unlike the early 2000's, site descriptions aren't as valuable as they once were, however they're still really useful to have. Since Octopress wasn't looking for a description by default, I've added another post variable called description which gets added into the head.html template file.

Open Graph

I share my posts on various social media sites almost every time I post. When I first started this blog I found it extremely annoying that, unless I added a picture to the content of a post, Facebook and Google+ would use the Social icons at the bottom of the page. That's not what I wanted, and I don't like sharing a post on those sites with no "thumbnail" it looks lazy, plus with the previously missing description, each post would be my generic "about me" block of text. So I soon implemented the Open Graph tags.

By simply adding a post variable called cover I'm able to add a picture to any post, regardless of whether or not it fits into the post content itself, and it'll still be picked up by Google+ and Facebook.

<!-- Rich Object stuff -->  
<meta property="og:url" value="{{ site.url }}{{ page.url }}">  
<meta property="og:type" content="website" />  
{% if page.title %}<meta property="og:title" value="{% if page.title %}{{ page.title }}{% endif %}">
<meta property="og:description" value="{% if page.description %}{{ page.description }}{% else %}{{site.description}}{% endif %}">  
{% else %}<meta property="og:title" value="{{ site.title }}">
<meta property="og:description" value="{{ description }}">  
{% endif %}{% if page.cover %}<meta property="og:image" value="{{ site.url }}{{ page.cover }}">{% endif %}

As an added extra, my description, whether that's the generic text or the post description is also used. The type tag is also preset to website and the title is the same as the what the actual &gt;title&lt; tag uses.

Going forward

So far these changes have made my blog:

  • Easier to share
  • Easier to discover, via social sites
  • Abides to Twitters tweet-embedding standards
  • Makes it feel dynamic with embeddable videos
  • Expands the content that can be posted with multiple authors

Each change has proved itself useful time and time again, so what else is there I can add? Well, except for updating the technologies used to power it, Jekyll, Octopress itself, there isn't anything glaringly obvious that I can do - which I think is really cool! However, here are some ideas I have, please feel free to use, do, take, ignore them as required.

  • Archiving posts via year
  • Better social integration, Twitter cards?
  • Add Google+ post ownerships
  • Use tags from previously imported posts from the Wordpress days

I can only imagine these changes happening as and when I really need them. The only one that I can see which would be useful right now is the Twitter cards, however right now you need to be accepted into a test program with them.

If you need any Octopress advice etc, tweet me @jbrooksuk or ping me on App.net, @jbrooksuk

comments powered by Disqus