Jekyll on Voltaicforge

Responsive Images in Jekyll

Tue, 10 May 2016 00:00:00 +0000

Responsive images, the Jekyll way

One of the first things I did in my exploration of Jekyll was to go away from using GitHub to generate the site. The first limitation that frustrated me was the inability to use plugins. Currently, I only use one plugin that I couldn’t use on GitHub - which relates to responsive images.

I shoot most of my pictures that I’m using for the site on my DSLR - which means I’m getting large pictures. I export from Lightroom via a preset I have setup. However, the process of resizing images for the web is an additional step in publishing a post. I want to be able to toss the image into a folder, type out some text in Notepad++, and upload the site without worrying about image size, resizing, srcset, etc.

Without plugins, this means that all the images you have on your site are going to be resized in the browser - which is a big detractor for page load speed and general usability of the site.

So I set out to find a plugin that would do responsive images (via srcset or picture tags) as well as automatically resizing the images, so I didn’t have to worry about anything except the parent image.

Jekyll-picture-tags

After a bit of searching, I found three candidates for creating responsive images.

I found Jekyll-srset broken as of May 2016, and it did not generate multiple images. I couldn’t get Jekyll-responsive-images to run properly either.

Jekyll-picture-tags works a treat after some setup. Unfortunately, it has poor error messages (generic Ruby messages) and was tough to debug.

After installing into my gemfile, I ended up on the following addition to _config.yml

picture:
  source: "images"
  output: "images/resize"
  markup: "picture"
  presets:
    default:
      ppi: [1, 1.5, 2.0]
      source_medium:
        media: "(min-width: 40em)"
        width: "600"
      source_default:
        width: "600"

Info: Ensure your indentation is correct if copying a config - misalignment’s will give you a dreaded generic error message Liquid Exception: undefined method [] for nil:NilClass in _drafts/JekyllAnchors.md/#excerpt

Warning: Also ensure your base-url in _config.yml is set to an empty string "" (base-url: ""). Without this, the images won’t be found or load correctly, even if it generates correctly.

After much fiddling and debugging, I had it working. I decided to add it to my shortcuts in Notepad++ using FingerText. I came up with the following code, which also allowed me to have an alt and title text in the tag.

FingerText enables me Notepad++ users to write blocks of text with a single keyword (amongst other uses). So now when I type respimage with a tab immediately after, the below code will be automatically inserted and the text between $[![ and ]!] will be selected upon each tab to allow me to enter the relevant details. Entering an Image Filename (from my /assets/images/ folder) and an Image title defines the image, and the Preset name will tell Jekyll-picture-tag which config branch to run - which dictates the which sets of images to include.

{% capture imagesrc %}$[![Image_Filename]!]{% endcapture %}
{% capture imagetitle %}$[![Image_Title]!]{% endcapture %}
<a href="/assets/images/{{ imagesrc }}">{% picture $[![Preset_name]!] {{ imagesrc }} alt="{{ imagetitle }}" title="{{ imagetitle }}" %}</a>
{: .text-center}

Warning: Jekyll-picture-tag also hates spaces in picture filenames. Not that you should have spaces in filenames anyway, but that’s another thing I stumbled on.

I now have images that (should) be responsive for mobile and desktop, and I don’t have to do the resizing myself.

Docking a PuTTY window into Notepad++

Sun, 01 May 2016 00:00:00 +0000

Challenge of developing in Jekyll via remote Linux server

During development of this site, I came across too many limitations with using Jekyll on Windows. You can use Jekyll in Windows with PortableJekyll, but I found the Windows environment still limited Jekyll. Mainly ImageMagick for using responsive images, which isn’t worth the hassle of setting up on Windows. I decided it was easier to spool up a Debian VM on my virtual server to install Gem/Ruby/Jekyll on. This lets me keep the website code on my NAS (allowing for easy cloud backup), code on Windows, and run Jekyll on Linux.

However, swapping back and forward between a terminal and the website code to site build was annoying, so I decided to see if I could ‘dock’ a PuTTY terminal into Notepad++

Adding a Putty Terminal into Notepad++

I’ve been using Notepad++ to develop in Windows for quite some time now. It’s a fantastic little program for us Windows people. A docked PuTTY window would greatly improve my workflow.

To do the same as I have above, it’s actually pretty simple.

Download:

Plink - PuTTY command line
~~Ansicon~~ - (Git repo defunct) Ansi escape sequence converter (to convert Linux CLI escape codes to Windows CLI, else the terminal doesn’t work well)
nppconsole - Notepad++ console plugin.
Warning: I had to use the older 11.53 ansicon version under Windows 10 x64, the later versions crashed frequently.

The do the following

Extract NPPConsole to your Notepad++ plugins directory (Program Files x86/Notepad++/Plugins)
Restart Notepad++ if it’s running
Unzip and copy plink and ansicon to a folder of your choosing (I put them both in the Notepad++ folder as it’s where the CLI defaults to, and I’m lazy)
Open a CLI at the Notepad++ folder and run ansicon.exe plink.exe -ssh user@location -pw yourpasword, replacing the relevant parts with your user/server IP/password.
All going well, you can now replicate that command in Notepad++. Open Notepad++, select Plugins -> NppConsole (should be there if you restarted and copied the dll correctly). Run the command and you are set!

If you have a saved profile in PuTTy you can replace the command with ansicon plink -ssh SESSION_NAME , replacing SESSION_NAME with your sessions name from the PuTTY dialogue. This works with key authentication as well, which I much prefer to use. This also saves you the risk of keeping a plaintext password in a potentially insecure location.

Info: You can use the plugin Nppexec as well instead of NppConsole - but I prefer Nppconsole for this.

You now have a working CLI in Notepad++ that can call an SSH session. I wrote a few batch scripts, so I just have to run site-dev in Windows to jump to my Linux VM that contains Jekyll, then ./site-dev to run a bash script to call up Jekyll in dev mode. Already having made a site-push bash to push the site to Amazon AWS, so I don’t need to leave Notepad++ to do any development work.

I couldn’t get Ctrl-C to work with either NppConsole or NppExec, both terminate the command without sending SIGTERM or similar to the PuTTY. Let me know if you figure out a way around this, as it means it’s difficult to gracefully terminate Jekyll. Workaround below.

Workaround for no Ctrl-C to exit Jekyll

My workaround for this has become to have a PuTTY terminal open just for stopping Jekyll. This isn’t as bad as it sounds. Just write a bash script to kill ruby as follows:

pgrep ruby | xargs kill

Warning: This will kill all ruby threads! Note this if you often have other ruby threads often running

I saved it as site-kill. My workflow is site-dev for the development of this site (with dev flags for config, etc.), site-push to rebuild the site from scratch and push to AWS. The new site-kill kills off any ruby threads.

Bonus - Markdown highlighting in Notepad++

The default colours finally made me crack during writing this post. Too much white! The language highlighting file I had for Markdown didn’t play ball with custom styles.

I found a language highlighting file for Markdown on GitHub that had a file for the Zenburn colour scheme. This is what you can see in the screenshots above. So much better!

New Site

Sat, 09 Apr 2016 00:00:00 +0000

New Site hits the Internet

Finally found the inspiration to build a nice personal site. I’ve been toying with Wordpress for some time, but it’s quite bloated for a nice basic site. And then there’s the security hassles, addons, database setup, theme setup, etc. It’s so far beyond what I want to be doing for a personal site it’s not funny.

I’ve wanted to be getting posts back online about projects and tinkering I’m always doing, so that will be the aim for this site. I’ve also been looking for some time for a better layout to be able to post about projects. The default blogging layout to be inadequate for something project like, or anything that is posted about over time. Making a visitor have to browse multiple posts to piece together the history of one project really doesn’t work.

With what I’m crafting here, I will be able to have static pages for projects that can be appended to over time to add up to one larger page per project. Most likely with blog posts for updates or miscellaneous stuff that fits on the site. I’ll also be planning to write up some mini-guides for things I’ve come across in my hobby projects.

I’ve gone with an AWS approach, along with using Jekyll. This gives me a simpler way of posting and updating a site without the big CMS overhead, and after skipping over static site generators as being probably more effort than their worth, I went back to check out Jekyll, then using Jekyll with S3 and AWS. And that was the end of that search.

I thoroughly enjoy the ease of use of Markdown for writing HTML and if you haven’t checked it out and have some basic HTML background, definitely check it out.

Now its time go get cracking writing up all the projects past and present and getting the site filled out.