jekyll

Migrating from mephisto to jekyll

Stamped: 25 Aug 2010 | Show comments

My life story:

Pfft, I'll save my virtual breath.

I've finally got around to moving my website (this one you're looking at!) to Jekyll. Why? Well, lots of reasons! But, they have already been mentioned numerous times.

However, if you don't know what Jekyll is, I implore you to visit the wiki and learn about it, it's great fun if you're familiar with the terminal in osx, unix, *nix, or just about anything without a super fancy user interface. It lets you:

write your posts in Markdown or Textile (or anything you want to extend it to)
use plain old css and html
host your site anywhere with space, (even mobileme)
use git or svn as a naturally way of supporting article revisions, which mephisto did beautifully (I prefer git)

So long demon, it's been... hell.

I came from mephisto, which is dead now, but luckily there is a way to migrate everything (except the tags :() to Jekyll. Comments also! Huzzah! The process is listed there, so I won't rehash what was said.

Boy that sure is a lot of purple.

The design hasn't changed much, only tweaked a little. Let's face it, I'm no amazing designer, I usually hire other people for that. However, I've never found a great way to represent myself, so this will do for now. The important technical bit is that is uses HTML5 and CSS3 (via compass, which is amazing).

In order to maintain compatibility with older browsers, there's something called modernizr, which translates HTML5 elements such as <section> and <article> into something older browsers can deal with. It really is as simple as adding this into your header:

<script src="/javascripts/modernizr-1.5.min.js"></script>

and this into your body tag

<body class="no-js">

You can view my default layout for this site on github, right here. I make liberal use of the newer HTML5 elements (and <video> should I ever need it)!

Articles with name-tags are fun!

I had to re-tag all the articles after migrating, but I also needed a way to support /tag/something here urls. I described this process in a separate post, called Automatically generated tags and tag clouds with Jekyll (multiple word tags allowed). I should probably fire my ghost-writer.

Musings from the peanut gallery.

Comments are a tricky thing since everything is statically generated, hence that whole "you can do this on MobileMe" thing. But as everyone knows by now, disqus is a great way to implement them.

The whole process to implement them is actually a relatively easy one, you just have to use some universal code after making an account from the disqus website to add it in.

Sending tesoriere.com to it's home.

Deployment is relatively easy with a rake task using rsync to send over all that data to wherever. It's really as simple as:

sh 'rsync -rtzh --delete _site/ #{DEPLOY_USER}@#{DEPLOY_HOST}:~/#{domain}/'

Please don't steal me :(

You can view the full source of this entire site on github! It really only takes a couple days to do, and it's worth it if you want to try something new, simple, and I'm sure as hell my hosting company appreciates less load.

tags: jekyll, design, compass

Highlighting liquid code in a liquid template with Jekyll (Escape a liquid templating tag)

Stamped: 25 Aug 2010 | Show comments

This is a somewhat confusing thing to achieve, highlighting liquid templating code in a code block, and made even more confusing by the title. Take this example from this article about I wrote about mephisto:

#previous link
{% if article.previous? %}
  {{article | previous_article | link_to_article }}
{% else %}
  <a href="/">home</a>
{% endif %}

To actually display the liquid template code you have to get crazy with the curly brackets; the code in the markdown (in my case) file actually looks like:

#previous link
{{ “{% if article.previous? “}}%}
    {{ “{{article | previous_article | link_to_article  “}}}}
{{ “{% else “}}%}
  <a href="/">home</a>
{{ “{% endif “}}%}

Typing that above leads to a sweet infinity effect, but do yourself a favor and don't copy/paste that, just take it from this post on github, because to actually type that I had to use “. Of course a proper way to do would be to extend markdown/textile in pygments to support the liquid templating language, but that's for another day.

tags: liquid, jekyll

Automatically generated tags and tag clouds with Jekyll (multiple word tags allowed)

Stamped: 25 Aug 2010 | Show comments

Jekyll is a great thing, and supports tags right out of the box, but in order to get urls like in mephisto, /tags/something here, you have to either add an extension (which do exist, though I haven't tried), or generate them with the Rakefile, or however really, but I chose the Rakefile. Luckily raimonds simanovskis had already done so, but his solution didn't support tags with spaces, which I had used in mephisto, and to not break compatibility when switching, I had to edit the relevant part of his Rakefile to support tags with spaces.

So an an example post looks like this:

--- 
layout: post
title: Cloning an ISO to a USB flash drive (or anywhere) ...
syntax-highlighting: yes
tags: 
- dd
- snow leopard
---
Oh, and Leopard too...

The original method (can be viewed in it's entire, original, unedited form here). To allow support for tags with space (which some people don't like but I do!), you have to change it so it looks like:

desc 'Generate tags pages'
task :tags  => :tag_cloud do
  puts "Generating tags..."
  require 'rubygems'
  require 'jekyll'
  include Jekyll::Filters

  options = Jekyll.configuration({})
  site = Jekyll::Site.new(options)
  site.read_posts('')

  # Remove tags directory before regenerating
  FileUtils.rm_rf("tags")

  site.tags.sort.each do |tag, posts|
    html = <<-HTML
---
layout: default
title: "tagged: #{tag}"
syntax-highlighting: yes
---
  <h1 class="title">#{tag}</h1>
   
   {% for post in site.posts %}
       {% for tag in post.tags %}
           {% if tag == '#[tag]'%}
               {% include post.html %}
           {% endif %}
       {% endfor %}
   {% endfor %}
HTML

    FileUtils.mkdir_p("tags/#{tag}")
    File.open("tags/#{tag}/index.html", 'w+') do |file|
      file.puts html
    end
  end
  puts 'Done.'
end

Note the line if tag == "#[tag]" should be if tag == "#{tag}" but liquid 2.0 doesn't support escaping, and my ghetto method doesn't work. So just pull the entire function from github.

View my entire Rakefile @github.

tags: jekyll, rakefile

I know I've been living under a rock

Stamped: 14 Jun 2009 | Show comments

But have you seen jekyll?. It makes blogging seem like it might be fun. I bet the people at my hosting company would appreciate it too.

tags: jekyll, ruby