Data Files and `site.data`

Data Files and site.data

Jekyll can load YAML, JSON, and CSV data from _data.

The official tutorial uses this to move navigation items out of template markup.

Create a data file

_data/navigation.yml

- name: Home
  link: /
- name: About
  link: /about/
- name: Projects
  link: /projects/

Jekyll exposes the data through:

site.data.navigation

Render it

<nav aria-label="Primary">
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}">{{ item.name }}</a>
  {% endfor %}
</nav>

Now the template owns markup while the data file owns navigation records.

One-change test

Add one item to YAML.

Do not edit the loop.

Predict how many links the generated navigation will contain.

Build and verify.

Data is not HTML

Avoid storing finished anchor tags inside YAML if the template can generate them.

This:

- name: Projects
  link: /projects/

is easier to reuse than:

- html: '<a class="nav" href="/projects/">Projects</a>'

The first stores meaning.

The second mixes content and presentation.

Failure test

Break one YAML indentation level in a disposable copy.

Does the build fail?

Then create a different failure: valid YAML with a misspelled link key.

Does the build behave differently?

Parser failure and data-quality failure are different.

Portfolio action

Move navigation data into _data/navigation.yml if it fits your architecture.

Update the include to loop through it.

Checkpoint

Show one generated link and trace it back through:

YAML record → site.data → Liquid loop → generated <a>