Eleventy Recipes Wordmark

Eleventy Recipes

Add a layout

By Mike Aparicio

Adding a layout allows you to insert the content of multiple HTML or Markdown pages into a common template.


  1. Create a folder in the root of your project called _includes
  2. Create a file inside of _includes called base.njk
  3. In base.njk add a basic HTML boilerplate and inside of the body add {{ content | safe }}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Eleventy Project</title>
{{ content | safe }}
  1. In index.md add some front matter to the top of the page.
layout: base
  1. Visit your index page and now it should be rendering as HTML instead of Markdown. https://localhost:8080/

  2. Let's make our title dynamic. In _includes/base.njk, Replace the content of the title with {{ title }}

<title>{{ title }}</title>
  1. Before {{ content | safe }}, add:
<h1>{{ title }}</h1>
  1. In index.md, add another line to your front matter:
title: My Eleventy Project
  1. Delete your title: # My Eleventy Project