How do I have to realize front matter within a HTML file?

support
1

I am used to write directly in HTML, JS, and CSS. Eventually I want to bring one site with a static content to a modern responsive design. I am therefore fond of the idea to use a theme based on HUGO for reaching my aim. Although struggling since a couple of months with HUGO, I only discovered these days that there is no need to strip down all HTML pages to MD. At the DOCS there is written

To be treated as a content file, with layout, shortcodes etc., it must have front matter. If not, it will be copied as-is.

How do I have to realize this front matter within a HTML file?
Do I have to add a TOML or YAML section with front matter definition at the top of the HTML file?
Is there a sample available somebody might provide me for a easier understanding?
The few discussions about this topic I have read in the forum don´t help me finding the answer, I am afraid. :worried:

2

Let me try to help.

If you have a markdown file with frontmatter it will be rendered by the Goldmark processor.

Goldmark is able to parse html in your markdown file as long as html lines start in the first character or don’t have blank lines between.

This works:

<p>
	<li>lorem ipsum</li>
</p>

This does not:

	<p>
		<li>lorem ipsum</li>
	</p>

Nor does this:

<p>
	<li>lorem ipsum</li>

</p>

As far as I know, if your file is something like index.html, it can include frontmatter, and the content inside will not be rendered by goldmark, but it can include shortcodes.

So this should work:

---
title: Example
---
      <a href="{{< relref "about.md" >}}">link</a>
	<p>
		<li>lorem ipsum</li>
	</p>

Any file without frontmatter will be copied directly, so any shortcodes you have will show up as regular text.

If someone could please confirm or correct me, that would be great :slightly_smiling_face: