What about using data?

We can put JSON or JavaScript that creates JSON in a _data folder, and then simply refer to it in our templates.

Here's an example of building a course list based on data as well as a separate HTML page for each course!

Courses Data (courses.json)

{
    "courses": [
      {
        "code": "CSCI E-1B",
        "title": "Computer Science for Business Professionals",
        "crn": "25393",
        "term": "Spring 2023",
        "catalog_url": "https://courses.dce.harvard.edu/?details&srcdb=202302&crn=25393",
        "meets": "On Demand",
        "instr": "David J. Malan"
      },
      {
        "code": "CSCI E-7",
        "title": "Introduction to Computer Science with Python",
        "crn": "25531",
        "term": "Spring 2023",
        "catalog_url": "https://courses.dce.harvard.edu/?details&srcdb=202302&crn=25531",
        "meets": "On Demand",
        "instr": "Henry H. Leitner"
      },...]}
  

Template to produce one HTML file per course item

---
pagination:
    data: courses.courses
    size: 1
    alias: course
permalink: "courses/{{ course.crn | slug }}/"
layout: template.html
eleventyComputed:
    title: "{{ course.code }}"
---
<nav>
  <a href="/">Return to course listing</a>
</nav>
<div class="course single">
  <h3>{{ course.code }}<br/>{{ course.title }}</h3>
  <ul>
    <li>Term: {{ course.term }}
    </li>
    <li>CRN: {{ course.crn }}
    </li>
    <li>Meets: {{ course.meets }}
    </li>
    <li>Instructor: {{ course.instr }}</li>
    <li>
      <a href="{{ course.catalog_url }}">{{ course.code }} catalog entry</a>
    </li>
  </ul>
  <p>{{ course.description }}</p>
</div>

See courses_11ty project.