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}