Custom local theme 🔗

In this tutorial, you will replace the default theme in the Quickstart site with a small local theme.

Create the theme structure 🔗

Create these folders in the site root:

mkdir -p _themes/my-theme/_layouts

The site now contains:

my-site/
├── content/
│   └── index.md
└── _themes/
    └── my-theme/
        └── _layouts/

Add the shared layout 🔗

Create _themes/my-theme/_layouts/base.html:

<!doctype html>
<html lang="{{ page.lang.code }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ page.title }} · {{ site.name }}</title>
  </head>
  <body>
    <main>

      {% block content %}{% endblock %}

    </main>
  </body>
</html>

The content block provides a location for child layouts to insert a rendered page.

Add page layouts 🔗

Create _themes/my-theme/_layouts/index.html:


{% extends "base.html" %}
{% block content %}
  {{ page.content }}
{% endblock %}

Create _themes/my-theme/_layouts/page.html with the same content. Flatmark selects index.html for files named index.md and page.html for other content files.

Select the theme 🔗

Create or update _config.yaml:

name: My themed site
theme:
  source: my-theme

Run the site:

flatmark serve

Open http://localhost:5555. The home page is now rendered through the local theme. Add content/about.md and open /about.html to confirm that the page.html layout works too.

See the themes reference for supported theme folders, remote sources, and site-level overrides.