Create a layout

Add some HTML code to the content

The HTML code generated by the Markdown file in the the previous step is very basic. If you open the _site/index.html file, you will see something like this:

<h1>Welcome to my website</h1>
<p>This is my first page using <strong>Lume,</strong>
a static site generator for Deno.</p>
<p>I hope you enjoy it.</p>

You may be missing some basic HTML tags like <html>, <head> or <body>. This is because Markdown isn't a format designed to build html pages, but only the html code containing the article or post. You need to use a layout to create a fully complete web page.

Create a layout

Create a new directory _includes and the file layout.njk inside it. The .njk extension is for Nunjucks: a template engine supported by default by Lume. Insert the following code in the file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first page</title>
</head>
<body>
  {{ content | safe }}
</body>
</html>

This layout has the HTML code needed to build the whole page. The tag {{ content | safe }} is the placeholder used to insert the page content defined in index.md.

Go to Nunjucks documentation to know more about its syntax. {.tip}

Assign the layout to the page

Now let's configure the page (index.md) to use the layout just created. We have to create a front matter: a block delimited by two triple-dashed lines containing YAML code. In this block, we define the variable layout with the value layout.njk (the name of the layout file).

---
layout: layout.njk
---
# Welcome to my website

This is my first page using **Lume,**
a static site generator for Deno.

I hope you enjoy it.

Lume will compile the markdown code and use the layout.njk file as the page layout.

The directory _includes is a special directory that Lume understands. You don't need to include it in the layout variable. {.tip}