Coding at 35000ft: Adding tags to my jekyll-powered blog
I’d never written code on a flight, till today. Flying to India on Emirates Airlines, I found there was 20 MB of free wifi access onboard, usable within a two hour period. I connected my phone and I’d barely posted an update on Facebook, when I found that the complimentary 20 MB was over! I realized that the 20 MB would go a lot farther on my Linux laptop, if I only fired up pages I needed. I’d been thinking of adding a tag cloud to my new Jekyll-powered blog, and the long flight now presented the perfect opportunity to get this accomplished! A quick google search revealed a couple of promising hits, which I saved as pdf, and proceeded to try and get it to work. Since I had no prior CSS expertise, it took me some time to figure out how it worked, but once that was done, it was relatively smooth sailing.
Rendering the tags on the main page was one thing, but to get them to display the correct posts when clicked upon, took more work. It was only at that stage that I realized that I couldn’t do any dynamic context-based rendering. In other words, I couldn’t use the click on a chosen tag, to fire a query to the server, and render the appropriate results, as this was a totally static HTML site. This meant that I had to create a template for a tag, and use that for each tag that I wanted to activate, and then do a `jekyll build’ which would build all of the static tag pages. This is what a tag page template looks like. The title field is the only field that needs to be changed; this one is for the tag called ‘jekyll’.
---
layout: default
title: jekyll
---
<html>
<body>
{% assign found = 0 %}
{% for entry in site.posts %}
{% for tag in entry.tags %}
{% if tag == page.title %}
{% assign found = 1 %}
<h1><a href="{{ site.baseurl }}{{ entry.url }}">{{ entry.title }}</a></h1>
<div class="date">
{{ entry.date | date: "%B %e, %Y" }}
</div>
<div class="entry">
{{ entry.excerpt }}
</div>
<a href="{{ site.baseurl }}{{ entry.url }}" class="read-more">Read More</a>
{% endif %}
{% endfor %}
{% endfor %}
{% if found == 0 %}
No posts having tag {{ page.title }} found
{% endif %}
</body>
</html>I was thinking of recommending using a jekyll-based site hosted on github-pages, with a custom domain, to a friend who is a prolific blogger, but not much of a techie. She’s been using livejournal for a very long time, so she’s fully familiar with html scripting etc, and she can even learn to write a post with the naming conventions and tag entries etc, but this copying of the template tag page and editing it might prove to be a bit of an ask. I think I’ll have to check out some kind of an external what-you-see-is-what-you-get (WYSIWYG) editor for github-pages, if it’s to be easier for people like my friend, to switch to jekyll-powered blogs, as she’s certainly not the kind of person who’d be thrilled to learn git commands and use vim as the editor of choice!