A New Blog Layout

Frequent readers of this blog (all 1 of you, and that includes me), may notice that the styling of the site has changed. When I first created this blog, I was still working at ThoughtWorks, and a colleague was using (and recommended) Octopress. It met my needs. I had looked at WordPress, which is a popular blogging platform, but I wanted something a little nerdier. I don’t get much chance to write code these days. A blog platform that is “code-ish” was attractive. To blog with Octopress, I create markdown files, check it into Git, then use git to push to Heroku. I can write my own CSS, use ruby for any extensions. Also, I liked the base styling that you get from Octopress.

Octopress is based on Jekyll. Essentially, Octopress took Jekyll and added a bunch of customizations, styling, and plug-ins. In order to build my Octopress-based blog, I forked Octopress and added my stuff. It’s worked reasonably well. However, Octopress hasn’t seen a lot of active development since 2011 when I first started using it. Additionally, the author of Octopress realized that forking wasn’t a great strategy. In order for me to keep my blog updated with the latest and greatest from Octopress and Jekyll, I have to go through fancy merge/rebase activities. Frankly, I’ve never done it. Meanwhile, jekyll continues to go through active development.

Since I had started to work on this blog again due to my flying activities, I thought it made sense to take some time and get the tech of my blog properly updated. My original motivations remained the same: I wanted my blog to be “techie”. I decided to go to basic Jekyll. Jekyll has a pretty vibrant community of theme developers. After a bit of poking around, I settled on the hydepark theme. I liked the layout and styling, and I liked how I could customize it. Updating it is as simple as bundle update. I’m sold.

Here’s what I did to make the update. I don’t remember all the details, but I think this covers most:

• Created a git branch for the update
• Deleted all the non-source material from Octopress.
• Went to a basic Gemfile for Jekyll.
• Installed the hydepark theme via Gem.
• Made the necessary changes to the _config.yml, added an authors.yml
• Added a new plugin for captioned images (see below)
• Merged my branch back to master
• Moved my deployment from Sinatra to Puma. This was helpful.

Everything was pretty straight-forward. The Jekyll and Hydepark docs are solid, making most of it easy. I really like the new look. The only tricky bit was the Heroku deployment. For reasons I don’t quite understand, I was getting a “H14” error after deploying. Seems like Heroku decided to take my dyno down, and I needed to add it back in. It was a simple fix, I simply ran heroku ps:scale web=1.

As mentioned above, one thing that I really wanted was the ability to caption images. It seems like a simple feature, but one I really wanted. I don’t know if it’ll be helpful, but here’s how I did it. I did not take any effort to platformize this at all; I just wanted it to work for me. I created a Liquid tag that looks like this:

    {% capt_img class:"right" file:"/images/flying/2017-07-29-outside.jpg"   
                         alt:"It's nice outside" width:"300" 
                         caption:"It's nice outside. Photo Credit: JJ" %}
    

I wrote a plugin that would parse these fields and render the appropriate markup. It’s not pretty, and it has absolutely zero error checking, but it gets the job done for me.

module Jekyll
  class CaptionedImageTag < Liquid::Tag
    @img = nil

    def initialize(tag_name, markup, tokens)
        @markup = markup
        super
    end

    def render(context)
        rendered_markup = Liquid::Template.parse(@markup).render(context)
        attributes={}
        rendered_markup.scan(Liquid::TagAttributes) do |key, value|
          attributes[key] = value
        end

        img = render_img(attributes)
        caption = render_caption(attributes)
        class_name = 
            if attributes.has_key? "class"
                "class=#{attributes["class"]}" 
            else
                ""
            end

        "<figure " + class_name + ">" + img + caption + "</figure>"
    end

    def render_img(attributes)
        width = 
            if attributes.has_key? "width"
                "width=#{attributes["width"]}"
            else
                ""

            end

        alt = 
            if attributes.has_key? "alt"
                "alt=#{attributes["alt"]}"
            else
                ""
            end

        src = "src=#{attributes["file"]}"

        "<img " + src + " "  + width + "/>"
    end

    def render_caption(attributes)
        if attributes.has_key? "caption"
            #This is a total hack to remove the double-quotes from appearing on the page.
            cap = attributes["caption"].chomp('"').reverse.chomp('"').reverse
            "<figcaption>#{cap}</figcaption>"
        else
            ""
        end
    end

  end
end

Liquid::Template.register_tag('capt_img', Jekyll::CaptionedImageTag)