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>

Probably you're missing some basic HTML tags like <html>, <head> or <body>. This is because Markdown isn't a format designed to build complete HTML pages, but only the part containing the article or post. You need to use a layout to create a 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 }} code is a placeholder used to insert the rendered Markdown code.

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 the layout. 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.vto (the path to the layout file just created).

---
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