CODEWITHSUNDEEP
javascriptjsonnunjuckseleventystatic-site-generation
Josh
Josh

Reputation: 1429

Why are template strings in 11ty not rendering values from JSON content files?

I'm using 11ty to build a simple static site and have structured my project into templates and content directories. The template strings in my Nunjuck .njk templates are not rendering values from their corresponding JSON content files — they remain empty.

Here's my project structure:

project-root/
├── templates/
│   ├── index.njk
│   ├── about.njk
├── content/
│   ├── index.json
│   ├── about.json
├── dist/
├── .eleventy.js
└── package.json

Content and corresponding template:

index.json

{
  "title": "My Website",
  "heading": "Welcome to my website"
}

index.njk

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ heading }}</h1>
  <p>...</p>
</body>
</html>

11ty config:

.eleventy.js

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "templates",
      data: "content",
      output: "dist"
    }
  };
};

Problem

After running the build with npx @11ty/eleventy, the dist/index.html output contains empty template strings where {{ title }} and {{ heading }} should be rendered. The final HTML looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <h1></h1>
  <p>...</p>
</body>
</html>

Question

Why is 11ty failing to render the content from the JSON files into my templates? How can I properly configure my project to resolve this issue?

Upvotes: 1

Views: 51

Answers (0)

Related Questions