Implementing Jekyll

· 3 min read

Recently, I reflected upon my school's BBC Young Reporter (previous name BBC School Report) website:

I decided that the design was very outdated, and when I originally designed it, my design sense wasn't quite up to scratch. Thus, I redesigned it with Google's newly released Material Design 2.0. I really like this design language, but found it difficult implementing it on a static site, hosted on GitHub Pages - which means I can't install it locally to the server using npm i material-components-web, which is the recommended method. I had to use, therefore, the procedure detailed in one of my recent posts. The process for adding an article to the site was also very long-winded, involving placing the article content in two sets of HTML, then placing that HTML on three or more pages. I was not at all satisfied with this, so, with the BBC Young Reporter day coming up (6th March), I set out finding a new way to add articles.

When I first set up my website, I came across Jekyll, but decided that it was too complicated, and I didn't really need it - so didn't look into it. However, after doing some research, I realised that it was perfect for what I needed, because:

  1. It includes support for Liquid - a language that can be used to select & loop over other pages on the site. This is useful for creating lists of articles, importing duplicated code into multiple pages, etc.
  2. It takes Markdown files and converts them to webpages, with templates you give it.

Thus, I just removed the content from one of the articles, one of the article lists, and the 404 page, and saved them as templates. I then moved all the duplicated HTML (like most of the <head>) into separate files in the _includes folder, meaning I can use Liquid to insert them automatically. All I had to do then was create a template post in the _posts folder, add a homepage that automatically adds all the posts to a list (and places them on the left & right sides of the page, alternating, after the first two articles, using some very satisfying CSS I wrote), create the 404 page (using the template from earlier), and recode the drawer so that it automatically added all the posts, under headings for the years they were written. This was done in very little time, as all I needed to provide were MD (Markdown) files with the content of the pages I wanted to display - like this one. The navigation bar took a bit more work, but after finding out how to use the basics in Liquid, I came up with the following code, which automatically adds the Reading School website & the site homepage (with different icons to the articles), then loops over the articles & ensures they are displayed in chronological order, under headings for each year:

<aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__content">
        <nav class="mdc-list">
            <div style="margin: 15px;text-align:center;">
                <img src="/images/page-logo.png" style="width: 90%;"/>
            </div>
            <a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>
                <span class="mdc-list-item__text">Reading School Website</span>
            </a>
            <a class="mdc-list-item" href="/" data-mdc-auto-init="MDCRipple">
                <i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
                <span class="mdc-list-item__text">Home Page</span>
            </a>
            {% if site.categories.articles %}
            <div class="mdc-list-group">
                <h3 class="mdc-typography--headline7">Articles</h3>
                {% for article in site.categories.articles  %}
                    {% assign currentdate = article.date | date: "%Y" %}
                    {% if currentdate != date %}
                    {% if article.url != site.categories.articles.first.url %}
                    </div>
                    {% endif %}
                    <div class="mdc-list-group">
                    <h3 class="mdc-list-group__subheader">{{ currentdate }}</h3>
                    {% assign date = currentdate %}
                    {% endif %}
                    <a class="mdc-list-item" href="{{ article.url | relative_url }}" data-mdc-auto-init="MDCRipple">
                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
                        <span class="mdc-list-item__text">{{ article.title }}</span>
                    </a>
                    {% if currentdate != date %}
                    {% endif %}
                    {% if article.url == site.categories.articles.last.url %}
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </nav>
    </div>
</aside>

<div class="mdc-drawer-scrim"></div>

Overall, I found Jekyll surprisingly easy to implement - their documentation is very useful - although I wasn't able to install it locally on my Windows 10 PC, so I have to use my Linux laptop if I want to preview the site locally before pushing it to the remote branch.

Please check out my GitHub, @mgrove36, and GitLab, @mgrove36.