Frontmatter Parameters

Rift supports front matter blocks in all text-based files under /pages.
This includes .html, .txt, .css, .json, and more.
Use frontmatter to configure metadata and behavior for each page using a special block at the top of the file.
Note: Custom .page.ts files are an exception—they use a render function instead. Learn more.

🧩 What is front matter in Rift?

Front matter is a configuration block embedded as an HTML comment at the top of your file. It lets you customize layout, output paths, localization, routing, and more—per page. Unlike other static site generators, Rift uses standard HTML comments, so your files remain valid HTML and previewable anywhere.

Frontmatter Example

---
title: My Blog Post
layout: blog.njk
permalink: /blog/
locale: en
collection: posts
tags: [blog, dev]
slug: my-blog-post
---

🔧 Supported Fields

title – Sets the document/page title. Available to layouts and templates.
layout – Defines the layout template (e.g. blog.njk). Required for pages that use a layout system.
permalink – Overrides the default URL for the page. Can be a static string or use template variables like {{ slug }}, {{ locale }}, etc.
locale – Optional. Sets the language code for localized content (en, es, de, etc.).
collection – Groups pages into a named collection (e.g. posts).
tags – Optional. List of strings for tagging, filtering, or categorizing content.
slug – Optional. Used as a permalink variable, useful for generating URLs from titles.
(custom) – Any other key/value pairs are passed through and can be accessed in layouts or controllers.

🧠 How permalink templating works

You can use {{ variable }} syntax in permalink to generate dynamic URLs. These variables are taken from front matter fields.

Permalink Example

permalink: /blog/{{ slug }}
slug: hello-world

This generates /blog/hello-world/index.html as the output path.

Permalink + Locale Example

permalink: /{{ locale }}/blog/{{ slug }}
locale: en
slug: hello-world

This generates /en/blog/hello-world/index.html (and similar for other locales).

📚 What are collections and how do they work?

Any page with a collection key (e.g. collection: posts) is grouped together. You can use collections in controllers or templates to render lists, create tag archives, or paginate data. Collections can be filtered by tag, locale, date, or any other front matter field.

🔁 Parameterized pages with collections

If a page uses a collection and a parameterized permalink (e.g. /posts/{{ slug }}), Rift will generate one output page per item in that collection using the data provided in the front matter.

Collection Example

permalink: /blog/{{ slug }}
collection: posts
layout: blog-post.njk

If you have:

Content Structure Example

posts/
├── post1.en.md 
└── post2.en.md

Rift will render:

/blog/one/index.html
/blog/two/index.html

🧪 Example Full File

Here is a complete example of a .html file using Rift front matter. The front matter block is at the top, and the rest of the file is normal HTML.

Example Full File

---
title: Hello World
layout: blog.njk
permalink: /blog/{{ slug }}
slug: hello-world
tags: [demo, intro]
---


  
    Hello World
  
  
    Hello World!
    This is a demo page using Rift front matter.