Jekyll Data is a kind of static database for your Jekyll website. You can keep your custom data in a file and access it from anywhere on the website.
I have had clients with requirements where a monthly newsletter or bulletin with a PDF link should be posted on their website.
Editing the code once in a month isn’t hard but I did not want to do that. I do not want to mess up the layout by mistake while adding one of these newsletters.
This is where Jekyll Data came in very handy. Here is what I did for this particular case. This is my newsletters.yml file inside _data directory.
- title: Newsletter August
pdf: newsletter-august.pdf
- title: Newsletter September
pdf: newsletter-september.pdf
- title: Newsletter October
pdf: newsletter-october.pdf
Here is the HTML code that shows all the newsletter links.
{% for item in site.data.newsletter %}
<a href="/documents/{{item.pdf}}">{{item.title}}</a>
{% endfor %}The rendered HTML will look like this
<a href="/documents/newsletter-august.pdf">Newsletter August</a>
<a href="/documents/newsletter-september.pdf">Newsletter September</a>
<a href="/documents/newsletter-october.pdf">Newsletter October</a>If I have to add a new newsletter, then all I have to do is just add two lines in the newsletter.yml file!
Why use Jekyll Data?
A clear advantage of using Jekyll Data is that the data files are easy to read and update compared to HTML code.
Many of my clients are already using it and they know this one directory _data they can trust that it updates the changed content in the frontend also. I try to keep almost all the text data in these files so that they don’t have to touch any HTML code.
Unlike _config.yml file, _data files update without even restarting the server. That in itself is a huge time saver for me.
When to use Jekyll Data?
Let us say you have a website with a lot of repeating layout with different content, then Jekyll Data can be useful in managing all the content in one file.
Repeated Layout with Different Content
Imagine that you have to show a few color palettes on your website. Here is how it should look like.
Turquoise
Emerald
Peter River
The HTML code will look like this,
<div class="row">
<div class="col-md-4">
<div class="card" style="background-color: #1abc9c">
<p>Turquoise</p>
</div>
</div>
<div class="col-md-4">
<div class="card" style="background-color: #2ecc71">
<p>Emerald</p>
</div>
</div>
<div class="col-md-4">
<div class="card" style="background-color: #3498db">
<p>Peter River</p>
</div>
</div>
</div>It is pretty easy, isn’t it? But, imagine having a hundred of those! It gets even more tedious if you have to constantly add colors to the palette.
This is where Jekyll Data can save you precious time. You can create HTML code of one palette and repeat it with other color values using this one file colors.yml as shown below.
- color: '#1abc9c'
name: Turquoise
- color: '#2ecc71'
name: Emerald
- color: '#3498db'
name: Peter River
The file can be YML, CSV or JSON.
Once you have the file, the HTML code becomes super simple.
<div class="row">
{% for item in site.data.colors %}
<div class="col-md-4">
<div class="card" style="background-color: {{item.color}}">
<p>{{item.name}}</p>
</div>
</div>
{% endfor %}
</div>The code inside for loop will repeat as much as the number of color entries you have. Even if you have thousands of colors, the same code will do the magic!
Centralised Website Information
The details that repeat on multiple pages of your websites should be managed from one single file instead of hardcoding it on every page.
Keeping your website title, description, contact details, etc, in one file saves a lot of time and energy spent on updating these details in all the pages individually.
Here is an example file main.yml in _data directory.
title: Webjeda Blog
description: WebJeda is a company oriented towards building modern websites and apps
twitter: https://twitter.com/webjeda
facebook: https://www.facebook.com/webjedaNow I can use these details anywhere on the website using site variables.
<h1>{{site.data.main.title}}</h1>
<a href="{{site.data.main.facebook}}">Facebook Page</a>This makes it a lot easier to manage websites. Also, an update in one file will update it on the entire website.
If you are a Jekyll theme developer then you should consider using this for simplicity. This is exactly what we did with Onlive CV theme.
Complex Data Structures
Sometimes, data that you want to showcase can be complex. It may contain a subset of custom data. Let’s have a look at this example where a complete user profile has been listed out in main.yml file,
user:
name: john doe
position: chief of nothing
experience:
- company: Company X
years: 2
- company: Company Y
years: 1
- company: Company Z
years: 3
social:
- platform: facebook
link: https://facebook.com
icon: fa-facebook
- platform: twitter
link: https://twitter.com
icon: fa-twitter
- platform: linkedin
link: https://linkedin.com
icon: fa-linkedinThe data can be accessed in the frontend like this,
<div class="row">
<div class="card">
<div class="card-header">
<h4>{{site.data.main.user.name}}</h4>
<p>{{site.data.main.user.position}}</p>
</div>
<div class="card-body">
<h6>Experiences</h6>
<ul>
<!-- loping through the experience data -->
{% for item in site.data.user.experience %}
<li>
{{item.company}} - {{item.years}}
</li>
{% endfor %}
</ul>
</div>
<div class="card-footer">
<ul>
<!-- loping through the social data -->
{% for item in site.data.user.social %}
<li>
<a href="{{item.link}}"><i class="fa fa-{{item.icon}}" aria-hidden="true"></i> {{item.platform}}</a>
</li>
{% endfor %}
</ul>
</ul>
</div>
</div>
</div>This will list out the user name, position, experiences and social media links inside a card.
This might be too much for someone just starting off with Jekyll Data. I recommend using it for basic things first and then move on to these complex structures.
Here is a video on Jekyll Data
Conclusion
Jekyll Data has become an essential part of my web design projects. I think it can solve many issues that a non-tech-savvy user face in updating simple things on websites.
