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:

<!DOCTYPE html>
<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.vto inside it. The .vto extension is for Vento: a template engine supported by default by Lume. Add the following code to the file:

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

This layout has the HTML code needed to build the whole page. The {{ content }} tag is a placeholder used to insert page content from index.md.

Note

Go to Vento documentation to know more about its syntax.

Assign the layout to the page

Now let's configure the index.md page to use our new layout. We have to create 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.vto (the name of the layout file).

---
layout: layout.vto
---
# 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.vto file as the page layout.

Note

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

Edit this page