how to use jekyll collections and data to scale your migrated wordpress content

Why you need structured content after migration

After migrating from WordPress, your content might be flat—stored in the _posts folder with date-based filenames. While this works for simple blogs, it breaks down when managing diverse content types like:

Case studies
Product documentation
Tutorial series
Client portfolios

Using Jekyll collections and data files, you can create custom content types that are modular, organized, and easier to scale.

What are collections in Jekyll?

A collection is a group of related documents stored in a named folder. Think of collections as WordPress custom post types but simpler and faster.

Example: You want a separate section for case studies. Create a collection:

_case_studies/
├── jekyll-migration.md
├── seo-optimization.md

Then define it in your _config.yml:

collections:
  case_studies:
    output: true
    permalink: /case-studies/:name/

How to build layouts for collections

Each collection can use its own layout. For example, create case_study.html in your _layouts folder:

<main>
  <h2>{{ page.title }}</h2>
  <p>{{ page.description }}</p>
  <div>{{ content }}</div>
</main>

Then, in each case study file:

---
layout: case_study
title: "Migrating from WordPress to Jekyll"
description: "A detailed case study on performance gains"
---

How to loop through collections in your templates

To show a list of case studies:

{% raw %}
{% for study in site.case_studies %}
  <a href="{{ study.url }}">{{ study.title }}</a>
{% endfor %}
{% endraw %}

This replaces what you'd normally do in WordPress using custom loops or plugins.

How to use data files to separate content from logic

Data files in Jekyll live inside the _data folder and are written in YAML, JSON, or CSV.

Example: Suppose you run workshops. Instead of hardcoding them into posts, store them in _data/workshops.yml:

- title: SEO for Beginners
  date: 2025-07-01
  location: Online
- title: Jekyll Deep Dive
  date: 2025-08-15
  location: New York

Then render them in a page:

{% raw %}
{% for workshop in site.data.workshops %}
  <div class="event">
    <h3>{{ workshop.title }}</h3>
    <p>Date: {{ workshop.date }} - Location: {{ workshop.location }}</p>
  </div>
{% endfor %}
{% endraw %}

When to use collections vs data files

Use collections when:

You want each item to have its own page
You want to write Markdown content with front matter

Use data files when:

The content is short, repeatable, and doesn't need its own URL
You need to reference the same structured data in many places

How to modularize with includes

Use _includes to build reusable UI components like cards, buttons, alerts, or even content blocks.

Example: _includes/case-card.html

<div class="card">
  <h3><a href="{{ include.url }}">{{ include.title }}</a></h3>
  <p>{{ include.description }}</p>
</div>

Then call it inside a loop:

{% raw %}
{% for case in site.case_studies %}
  {% include case-card.html title=case.title url=case.url description=case.description %}
{% endfor %}
{% endraw %}

How to structure your content for growth

Now that you have collections, data files, and includes, you can combine them to power:

Multi-author blogs using a _data/authors.yml file
Documentation sites with a _docs collection
Project portfolios using a _projects folder + includes

This structure keeps your repo clean, makes collaboration easier, and avoids code duplication.

How to paginate large collections

Use the jekyll-paginate-v2 plugin for better control over pagination:

plugins:
  - jekyll-paginate-v2

pagination:
  enabled: true
  collection: case_studies
  per_page: 6
  permalink: '/case-studies/page/:num/'

Then in your collection index template:

{% raw %}
{% for post in paginator.posts %}
  <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}

{% if paginator.previous_page %}
  <a href="{{ paginator.previous_page_path }}">Previous</a>
{% endif %}

{% if paginator.next_page %}
  <a href="{{ paginator.next_page_path }}">Next</a>
{% endif %}
{% endraw %}

Conclusion

By structuring your content with collections, data files, and includes, your Jekyll site becomes more than a static blog—it becomes a scalable content system. Unlike WordPress, where structure often depends on third-party plugins, Jekyll gives you clarity and control at the code level.

In the final part of this series, we’ll cover how to automate deployment, backups, and content updates using GitHub Actions, so your new Jekyll site runs like a modern content machine.

FlickLeakedFlow🕒📗