Ecstatic for static

Checklist

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:

projectimages:
- 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 %}
</ul>

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

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

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.