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.
- Why use Jekyll Data?
- When to use Jekyll Data?
- Complex Data Structures
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.
Here is the HTML code that shows all the newsletter links.
The rendered HTML will look like this
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.
The HTML code will look like this,
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.
The file can be YML, CSV or JSON.
Once you have the file, the HTML code becomes super simple.
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.
Now I can use these details anywhere on the website using site variables.
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,
The data can be accessed in the frontend like this,
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
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.