Easy View Components In Jekyll

With web development becoming more complex — some would say _too_complicated—, Jekyll may feel bare bones when compared with competitor tools. One of the key aspects it lacks is components, which becomes a must with the introduction of utility-first CSS libraries like Tailwind.

I was losing hope, but then I discovered the include tag.

Creating components

Include tags are kinda similar to partials in Rails: they allow us to include content from another file (stored in the _includes directory).

<!-- This includes the contents of _includes/footer.html into this file -->
  {% include footer.html %}

The cool thing is that you can pass parameters to include tags! This is where things start to get interesting. We can create components similar to what we would do with React, for example. But instead of using JS, we use Liquid.

<aside class="max-w-md p-5 rounded bg-gray-50 border-l-4 border-l-blue-500">
  <strong class="block mb-4">{{include.title}}</strong>
  <p>{{include.content}}</p>
</aside>

Poorman's JSX

And we use it in the template like this:

{% include aside.html title="Include tags are cool" content="Keep reading for caviats, tho" %}

It’s even possible to have parameters with default values using Liquid’s default filter:

<aside class="max-w-md p-5 rounded bg-gray-50 border-l-4 border-l-blue-500">
  <strong class="block mb-4">{{include.title | default: 'Note' }}</strong> <!-- default value here -->
  <p>{{include.content}}</p>
</aside>

Don’t be greedy!

Include tags are powerful, but they add an overhead on the build time for your site, so don’t use them for every single thing. The docs recommend not using them for every image on your blog, for example.

A different approach would be using custom Liquid tags to create components, but note that they are not supported by GitHub Pages — so automatic build/deploy won’t work.