So basically, if you have a document named cool.md, you would probably do the following:
---
layout: page
title: Cool Stuff!
---
Awwwww dog!Then, all you need is to create a layout named page, which your .md file will used to style itself (It’s going to be HTML, of course):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- This is the "title" variable we defined in the "cool.md". -->
<title>What's a static site generator?</title>
</head>
<body>
<!-- And here's where the magic happens! -->
{{ content }}
</body>
</html>So you see the {{ content }}? That’s a variable defined by the static site generator. It contains the HTML form of the content you wrote in cool.md, or any other document wishing to use that specific page layout.
Also, the {{ title }} is a variable defined by the document, which is then passed to the page layout.
In most cases, you set variables in your content, and then your layout inherits those variables. This allows you to do a multitude of cool things, like setting a {{title}} through the page as demonstrated above.
Basically, your content defines the variables, then your layout has access to them. It can then do whatever it wants.
You can also have data sets (this differentiates across generators), from which you can dynamically create the HTML for the header (or footer, whatever really). Here’s an example using Liquid (a general-purpose language for templates):
{% for item in header_items %}
<a href="{{ item.link }}">{{ item.title }}</a>
{% endfor %}
So instead of manually appending items to the header, you can set a state variable outside of the HTML, and then use that to generate HTML.
In most cases, a static site generator allows you to transform state (variables) into HTML. This saves you from manually entering this state into the HTML, as seen with your page: the footer is copy-pasted onto every site, with no generation.
They’re good. Really. Try them out.
