Create a tag cloud using Jekyll

I’ve recently switched from Blogger to Github pages, and I’m using the very cool Jekyll app to manage my blog posts. For those that don’t know, Jekyll allows you to end your blog pages locally using Markup syntax, then it translates your post to HTML. From there, you commit it to a git repository.

One feature missing from Jekyll is Word Clouds. I will show you how to add one.

Create a Jekyll Helper

To do the grunt work, we need to create a Jekyll helper. In your _includes/JB folder, create a new file called “tag_cloud”.

Copy and paste this into the file:

{% raw %}
    {% comment %}
        Creates a tag cloud on your page.
    {% endcomment %}
    {% for tag in site.tags %}
      <span class=“tag-cloud-{{ tag | last | size | times: 10 | divided_by: site.tags.size }}”>
        <a href=“{{ BASE_PATH }}{{ site.JB.tags_path }}#{{ tag | first | slugize] }}-ref”>{{ tag | first }}</a>
    {% endfor %}
{% endraw %}

There is nothing too clever here. We just iterate through all the tags on your site, then output a span with a link in it. To give different weighting for each number, we: 1. Get the percentage the tag makes up of the total 2. Round down to the nearest 10 (eg, 43% becomes 4) 3. Append that number to the style name. In this case, 43% becomes 4 becomes “tag-cloud-4”

That oddly named function - slugize - converts the human readable form of the URL into a shortened URL.

Add the styles to your CSS file

Go to your CSS file (check your themes folder, in my case it was styles.css). Append the following to the bottom of the file:

/* tag cloud */
.tag-cloud-0 { font-size: 1em; }
.tag-cloud-1 { font-size: 1.5em; }
.tag-cloud-2 { font-size: 1.5em; font-weight: bold; }
.tag-cloud-3 { font-size: 2em; }
.tag-cloud-4 { font-size: 2em; font-weight: bold; }
.tag-cloud-5 { font-size: 2.5em; }
.tag-cloud-6 { font-size: 2.5em; font-weight: bold; }
.tag-cloud-7 { font-size: 2.75em; }
.tag-cloud-8 { font-size: 2.75em; font-weight: bold; }
.tag-cloud-9 { font-size: 2.75em;
    font-weight: bold;
    font-style: italic;
.tag-cloud-10 { font-size: 3em; }
/* end tag cloud */

Feel free to tweak these styles to change the look and feel of your tag cloud.

Now update your template

Now you can add the tag cloud to your page. Open your default.html template file. Place the following where you want the tag cloud to appear:

{% raw %}
        <h2 class=‘title’>Tag Cloud</h2>
        {% include JB/tag_cloud %}
        <div class=‘clear’></div>
{% endraw %}
Now you can build your site, and enjoy your shiny new tag cloud. :)


Don't switch to Ghost blogging platform (yet)

I’m a typical developer. I often can’t resist the urge to try different platforms. My current blogging platform (blogger) has numerous limitations. I started looking for alternatives, and Ghost appeared on the radar.

Ghost is a ground up blogging platform, being developed under the premise that other platforms (such as word press) are becoming overly complex.

Before I go into too much detail, I should point out that Ghost is beta (maybe even alpha software).

The good parts

Ghost offers some interesting features, such as:

  • Handlebar based templating
  • The ability to run on your own server/vm, or via Ghost’s own Hosted service
  • A very nice post editor, which has markup based formatting, and a live preview.
  • Open source,  so you can hack away at the code base.
  • Node JS based platform

The bad parts

Ghost’s hosting is a paid service. They offer a 30 day trial. I signed up… and then the wheels fell off.

I tried editing my new blog, but kept being presented with the sign up page. Filling in the sign up page again logs you into the site.

Once you have logged in, the next mystery is how to actually post. You have to manually append /ghost/ to your blog address. It’s not that much effort to provide a link for this.

Posting was straight forward enough, until I tried to include a code sample. I use Alex Gorbatchov’s syntax highlighter. To enable this on my Ghost blog, I had to edit my template. To do this, I had to download the default template from Github, edit the source, then zip it up and upload it via Ghost’s admin page.

I had my template setup, and I tried to add some code to a post, Ghost saved the HTML - but then stubbornly refused to display it. It could be something to do with the highligher using CDATA tags… it could be overly aggressive filtering (why do you need to filter out HTML that I add to my blog?)… it could be the lunar cycle, who knows.

At least the edit page looks nice.

The next big issue is that Ghost doesn’t have an API yet. There is no way to integrate other services. Want to import all your old blogger posts? bad luck. I have seen an import function (for Word Press) mentioned on the Ghost forums, but finding it is like finding the lost ark - and it doesn’t seem to work too well anyway.

The lack of an API means that offline editors, (like LiveWriter), can’t be used to update your blog. It also rules out the many mobile blogging apps on mobile platforms.

The final problem for me was performance. Ghost Hosted feels slow - at least from Australia. Blogger uses Googles CDN, and feels snappy virtually anywhere. Ghost don’t seem to have a solution that is working out here yet. A blog page that takes 5 or more seconds to load is going to translate to a lot of lost readers.


Ghost is a service that shows a lot of promise, but is not a usable option for me as it stands. I wouldn’t recommend going with them unless you are prepared to deal with a lot of issues and frustration. That said, they are showing all the signs of being awesome down the track.

If you can, consider contributing to Ghost’s code base, and help them get there faster. I look forward to giving them another try in 6 months.



Linking to Google Drive images from your Blog

A good number of us have content stored on google drive. Wouldn’t it be handy if we could reference that content in our blog posts? Good news, you can!


  1. Go to your google drive account.
  2. Ensure the folder the item is in, is shared (use the option Anyone who has the link can view).
  3. Share the item (use the same option as above). Copy the “Link to Share” link.
  4. Paste the link in the linkifier below
  5. Copy the link produced, and insert it into your blog via any of your usual methods

How it works

A link with this format:[id number]edit?usp=sharing

is transformed using a regular expression, to this format: number)

Google Drive Linkifier

Paste your Google Drive Link Here
Your link should have the format: number)/edit?usp=sharing

Please post a comment if you have any problems.


Setting up SyntaxHighligher on Blogger

As a technical blogger, one of my first questions was:

how do I add syntax highlighting to my blog?
I discovered Syntax Highlighter. Syntax Highlighter is a fantastic tool. It looks good, it is easy to set up, and it supports a large number of languages.

I am going to walk you through setting up Syntax Highlighter on the Blogger platform. The first thing you need to do, is go to your blog template, and choose “Edit HTML”.

We are going to use the CDN (shared hosting) version of the scripts. Paste this code block in the HEAD section:

<link href=""
    rel="stylesheet" type="text/css" />
<link href=""
    rel="stylesheet" type="text/css" />
<script src=""
    type="text/javascript" />
<script src=""
<script src=""
<script src=""
<script src=""

This gives us the Syntax Highligher styles, core scripts, and support for HTML/C#/Javascript. If you need additional languages, simply copy the last line, and change the .js to one of the available brushes.

Next, go to the bottom of the page, above the tag. Add the following:

<script type='text/javascript'>
    // code highlight
    SyntaxHighlighter.config.bloggerMode = true;

This causes Syntax Highlighter parse your code samples. Syntax highligher is now configured. So, how do we post code samples?

There are a number of ways, but I have found this is the most reliable way:

<script type=“syntaxhighlighter” class=“brush: xml”><![CDATA[
 // Your code goes here!
Note that the brush type needs to match one of the brushes you added in the .js imports further up.

Why do we use that odd CDATA syntax? It turns out that embedding code in code (such as this page) is harder than you might think. The browser will try to interpret the code. We can change all the code characters to character codes - but that alters the original code and quickly gets tiresome.

Using <script> tags allows syntax highlighter to find your code sample. CDATA is a special tag that prevents XML/HTML parsers (such as your browser) from trying to parse that code block.

If you do use Syntax Highlighter, make sure you provide a link to the author’s site, as he provides it free of charge.

Reference URLs * Syntax Highlighter - * What is CData? -