Creating our first njk layout, so our pages have a solid HTML structure to start from

Before we dive into fetching data, let’s learn a little bit about 11ty layouts using Nunjuks.

Previously, we created an _includes folder. Inside of here we should create two new folders. One will be for our components (or macros), simply named components . Next is layouts , which is where we’re going to be focused in this lesson.

11ty exposes the _includes folders so that we have access to our layouts and components inside of our pages and inside of each other (for example using macros inside of other macros).

Let’s go ahead and create the HTML scaffold for our pages. Inside of /src/_includes/layouts/ we’ll create the base.njk file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css" />

  <title>{{ title }}</title>
</head>
<body class="w-screen h-screen bg-slate-400 flex flex-col text-gray-800 align-center justify-center">  
  <div class="flex flex-col w-screen h-screen">
    <main>
      {{ content | safe }}
    </main>
  </div>
</body>
</html>

Our layout from above will be what we can use to wrap all of our pages for the time being. You can create sub-layouts, or altogether new layouts depending on your needs for the page, but we should only need this one for now.

You’ll notice a few key things that we should probably talk about.

First, we’re going to need to make sure the output Tailwind styles are visible to our page AKA our link tag for /styles.css
Second, we’ve got this title variable seemingly coming from nowhere right? Well, because of 11ty’s data cascade, we’re able to pull variables in from our pages frontmatter. In our files, we’ll need to define a title to make sure our layout doesn’t break.
Last, we’re seeing some more new syntax (maybe) which is {{ content | safe }}. The content variable, being the page content itself. So, in our case, this will be our .njk page and components. the safe variable is a builtin filter to nunjucks, to make sure it will not be HTML escaped.