Reg Tait Hull Web Designer[ + Menu]


Ecstatic for static

I've taken the time to move this site from an old ExpressionEngine (ee) CMS install to Jekyll, my favourite static site generator. The challenge was to replicate my CMS site without too much fudging. It turned out to be really straightforward.

This is exactly how SSL works with a Jekyll site on Netlify
This is exactly how SSL works with a Jekyll site on Netlify


Here’s a checklist of stuff I wanted to keep from my CMS:

  • All original markup
  • Nice permalinks
  • Custom metadata for SEO reasons, if that’s still a thing
  • Selected projects and my latest tweet on the home page

Jekyll Collections

The key to doing this was using Jekyll Collections to handle the custom content. Here’s the content of my portfolio carousel in the YAML of my Collection project document:

- image-file: myfile.jpg
  image-alt: My alt tag
- image-file: anotherpicture.jpg
  image-alt: Another alt attribute

And here’s the markup with Liquid tags, in my layout template.

<ul class="bxslider">
{% for projectimage in page.projectimages %}
<li><img src="/images/projects/{{ projectimage.image-file }}" alt="{{ projectimage.image-alt }}"></li>
{% endfor %}

To compare, here’s my old ExpressionEngine tags, handled through the Pixel & Tonic Matrix plugin.

<ul class="bxslider">
<li><img src="{cf_project_image}" alt="{cf_project_imagealt}"/></li>

So it’s a trivial example (and who loves carousels in 2016?), but shows that Jekyll can replace CMS custom fields, right out the box.

For my homepage tweet, I used Jason Mayes’ Javascript only Twitter fetcher.

Hosting with Netlify

I put my finished source files on GitHub, and set up Glynn to FTP the build to my old host. The next morning though, I woke up to the news that Netlify are offering free web hosting—with SSH!—on their Netlify Pages plan. This directly competes with GitHub Pages.

So, in just a few clicks my site was running on Netify, via GitHub. I’ll do anything for a green padlock, and got one for free.

I think Netlify are doing a wonderful thing for the web community by removing the barrier to a safe, open and secure web, available for all.

More from the blog