Convert a Jekyll template to Blot

This guide will explain how to translate a Jekyll template to Blot. I’m going to convert the base Jekyll theme Minima step-by-step. Consider browsing the source code for Minima as as Jekyll template before reading this guide.

Before

• Source code for Minima as Jekyll Template
• Demo of Minima on Jekyll

After

• Source code for Minima as Blot template
• Demo of Minima on Blot

Get the source

Download the code from GitHub and unzip the results. Here is what I have:

Clean up the files

Clean up the files and directories which are not relevent to Blot. We don’t need the ‘_posts’ directory, since posts on Blot cannot exist inside a template directory, and we don’t need the ‘script’ directory since it contains Jekyll-specific bash scripts:

Compile the Sass/SCSS files

Firstly, move the ‘minima-social-icons.svg’ outside the assets directory. Blot does not support SCSS so compile the stylesheet in assets -> css -> style.scss. I don’t have the SASS compiler on my machine so I just saved the resulting CSS generated on the Jekyll Theme’s demo. Save the result style.css and put in the template’s root directory. You can then remove the ‘_sass’ and ‘assets’ directory:

Layouts, includes and partial templates

The template systems used by Blot and Jekyll offer ways to avoid repeating the same code across different pages. For example, the Minima template has a header that is present on every page on your site. This header is stored in its own file _includes/header.html.

Jekyll allows you to embed this file in another template file using the following syntax:

{%- include head.html -%}

Jekyll also uses ‘layouts’, which specify a combination of included template files that are used to render the HTML sent to your readers. Here’s the contents of layouts/default.html which is used to render all the pages in the Minima template:

  {%- include head.html -%}

  

    {%- include header.html -%}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">
        {{ content }}
      </div>
    </main>

    {%- include footer.html -%}

  

Flatten directory structure

Blot template files cannot exist in subdirectories, so move the files inside ‘_includes’ and ‘_layouts’ into the root directory.

Convert the index page

The homepage of this Jekyll template is inside ‘home.html’. On Blot, this file must be called ‘entries.html’. So rename it and open the file in your text editor:

---
layout: default
---

<div class="home">
  {%- if page.title -%}
    <h1 class="page-heading">{{ page.title }}</h1>
  {%- endif -%}

  {{ content }}

  {%- if site.posts.size &gt; 0 -%}
    <h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
    <ul class="post-list">
      {%- for post in site.posts -%}
      <li>
        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
        <span class="post-meta">{{ post.date | date: date_format }}</span>
        <h3 id="post-title-escape">
          <a class="post-link" href="{{ post.url | relative_url }}">
            {{ post.title | escape }}
          </a>
        </h3>
        {%- if site.show_excerpts -%}
          {{ post.excerpt }}
        {%- endif -%}
      </li>
      {%- endfor -%}
    </ul>

    <p class="feed-subscribe"><svg class="svg-icon orange"><use xlink:href="{{ '/assets/minima-social-icons.svg#rss' | relative_url }}"></use></svg><a href="{{ " feed.xml"="" |="" relative_url="" }}"="">Subscribe</a></p>
  {%- endif -%}

</div>

Here’s how it should look using Blot’s template system:

{{> header}}
<div class="home">
  
  <h2 class="post-list-heading" id="posts"><a href="#posts">Posts</a></h2>
  <ul class="post-list">
    {{#entries}}
    <li>
      <span class="post-meta">{{date}}</span>
      <h3 id="title">
        <a class="post-link" href="{{{url}}}">
          {{title}}
        </a>
      </h3>
      {{#show_excerpts}}
        {{summary}}
      {{/show_excerpts}}
    </li>
    {{/entries}}
  </ul>

  <p class="feed-subscribe"><svg class="svg-icon orange"><use xlink:href="/minima-social-icons.svg#rss"></use></svg><a href="/feed.xml">Subscribe</a></p>

</div>
{{&gt; footer}}

We have changed Jekyll’s {%- for post in site.posts -%} syntax with Blot’s {{#entries}} syntax.

Config.yml to Package.json

Jekyll stores information about the theme in a file called _config.yml. Blot uses a file called package.json. The “locals” property of package.json is passed to render your template.