Jekyll and Data files with Real Time Examples

One of the most interesting features of Jekyll is the ability to separate out data elements from formatting elements using a combination of YAML and Liquid. This setup is most common when you’re trying to create a table of contents generally called Data Files.

Data files are a really amazing feature of Jekyll and it is very easy to create a table of contents to avoid repetition in your template.

Rather than just jumping into Data Files at the most advanced level, I’m going to start from ground zero with an introduction to YAML and how you can access basic values in your data files using Jekyll.

Imagine here’s a file called company.yml in your _data folder.

YAML

team:
  name: John Smith
  department: Digital Marketing

Markdown & Liquid

<ul>
  <li>Name: {{site.data.company.team.name}}</li>
  <li>Department: {{site.data.company.team.department}}</li>
</ul>

Output

Name: John Smith
Department: Digital Marketing

YAML on its own doesn’t do anything — it just stores your data in a specific structure that other utilities can parse.

Jekyll supports the loading data from YAML, JSON, and CSV files located in the _data directory. Note that CSV files must contain a header row.

Let’s start with a real-time example, we’ve created job listing page on our website, let’s see how I achieved this by using data file.

First, create a folder in your project titled “_data” and save it. This is where you’re going to store your files.

Now, create a file you want to store in the _data folder. We’re Creating current-jobs.yml file.

Here is an example of one of our data files in /_data/current-jobs.yml format:

jobs:
- title: Creative Content Writer
  date: Oct 4, 2017
  url: creative-content-writer
- title: Digital Marketing Manager
  date: Sep 19, 2017
  url: digital-marketing-manager
- title: ReactJS Front-end Developer
  date: Aug 23, 2017
  url: react-js-front-end-developer
- title: UI/UX Designer
  date: Aug 23, 2017
  url: ui-ux-designer

The data can now be accessed using site.data.jobs in our HTML. The filename current-jobs.yml determines the variable name. This information can now be used in your templates or HTML files.

<ul class=”job-listing">
  {% for block in site.data.current-jobs.jobs %}
    <a href=”{{ block.url | prepend: site.baseurl }}”>
      <li>
        <div class=”job-title">
          {{ block.title }}
        </div>
        <div class=”job-date">
          {{ block.date }}
        </div>
      </li>
    </a>
  {% endfor %}
</ul>

I am using “for loop” to get the data from current-jobs.yml file. You can read more about the loop in this document.

Notice that in order to access the data file, you need to the use following code.

site.data.current-jobs.jobs

_data is the folder, current-jobs.yml is the name of the YAML file and jobs is our data which we want to get from this file.

Job Listing

The same approach can be applied to a range of cases. One related to the above is a list of images for the gallery with some details of your particular event or if your website has lots of pages so you might want to create navigation for the pages. Instead of hard-coding navigation links, you can run a program to retrieve a list of pages to build the navigation for your site.

I will explain “How to build the navigation” in next part of this article.