Data Driven Websites Using the _data Folder in Jekyll

By -

One of the most powerful yet underused features of Jekyll is the _data folder. Instead of hardcoding repetitive information into posts and pages, you can keep it in structured files and let Jekyll handle the rendering. This makes your GitHub Pages site easier to maintain, more scalable, and much cleaner in terms of code. Whether you are managing a blog, documentation, or even a portfolio, mastering _data will transform the way you build static websites.

Key Areas This Guide Will Cover

Why use the _data folder in Jekyll

Instead of repeating the same code or content across multiple pages, you can centralize it in _data. This reduces duplication and makes updating your site much simpler. For example:

  • A list of team members that appears on multiple pages.
  • Navigation menus shared across layouts.
  • Product details stored in one place but displayed in multiple formats.

By separating data from presentation, your Jekyll site becomes more modular and professional.

Supported data formats and when to use them

Jekyll supports several file formats inside the _data folder:

Format Extension Best Use Case
YAML .yml or .yaml Configuration-like data, structured lists, or settings.
JSON .json Interoperability with APIs or existing JSON datasets.
CSV .csv Tabular data, spreadsheets, or bulk lists.

Most Jekyll developers prefer YAML because it is clean, readable, and integrates smoothly with Liquid.

Practical examples of using _data

Let’s say you want to display a list of team members across your site. Instead of repeating code, create a _data/team.yml file:

- name: Alice Johnson
  role: Designer
  twitter: alicej
- name: Bob Smith
  role: Developer
  twitter: bobdev

Then display it in your template:

<ul>
  {% for member in site.data.team %}
    <li>{{ member.name }} – {{ member.role }} (@{{ member.twitter }})</li>
  {% endfor %}
</ul>

This ensures consistency and lets you update team information in one place.

How to loop through data files with Liquid

Jekyll uses Liquid templating to loop through data. Here’s a simple example for a navigation menu:

# _data/navigation.yml
- title: Home
  url: /
- title: Blog
  url: /blog/
- title: About
  url: /about/

In your layout:

<nav>
  <ul>
    {% for item in site.data.navigation %}
      <li><a href="{{ item.url }}">{{ item.title }}</a></li>
    {% endfor %}
  </ul>
</nav>

This approach centralizes your navigation, making it easy to update links site-wide.

Best practices for structuring your data

  • Keep it simple – Avoid overly complex nesting unless necessary.
  • Group logically – Create separate YAML files for menus, settings, and datasets.
  • Use clear names – File names should clearly describe the data (e.g., products.yml instead of data1.yml).
  • Validate regularly – A single YAML syntax error can break your build.

Debugging common issues with data files

Here are some problems beginners often face:

  • Indentation errors – YAML is whitespace-sensitive, so double-check spacing.
  • File not found – Ensure the file is inside the _data folder and referenced correctly.
  • Empty output – Verify that your Liquid loop references site.data.filename properly.

Next steps to expand your data-driven skills

Once you understand the basics, you can use _data to power advanced features:

  • Generate product catalogs from CSV files.
  • Create multilingual sites by storing translations in data files.
  • Maintain API-like structures for dynamic content.

Final Thoughts

The _data folder transforms Jekyll from a simple blogging platform into a flexible static site generator capable of handling complex projects. By centralizing information in structured files, you simplify updates, reduce redundancy, and gain the power to generate dynamic content from static data. Once you get comfortable with _data, you’ll start thinking about your website more like a developer managing reusable components rather than just a writer publishing posts.

What Should You Do Next

Create a small YAML file in _data—perhaps a simple list of links, team members, or favorite tools. Then render it in your site using Liquid. This hands-on exercise will give you immediate insight into the power of data-driven development in Jekyll.