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?
index.njkyou would probably need{{ index.title }}etc.