Getting started

Quickstart.

A template is a record on your site: a title, a permalink, a type and a body, edited in the admin and rendered live. This page writes the smallest useful template, saves it, then grows it into a short product list, so you can see how a page is assembled before the reference goes deep.

You do not install anything and there is no local build. Everything here is typed into the admin template editor and served by the same Liquid engine that renders the rest of your site. If you have written a theme on another platform, the shape will be familiar.

What a template is

Every page on a FleekSite site is backed by a template record. Four fields matter to start with:

Title: the template's name. It also doubles as its filename, so another template can pull it in by title with {% partial %}.
Permalink: the path the template answers. A template with the permalink about serves /about.
Type: how the template is classified, and how a post finds the layout it renders through.
Body: the Liquid and HTML source, the part you spend your time in.

The template editor covers every field and the validation around them. For now, one body is all you need.

Your first template

Create a template, give it the permalink hello, and put a single line in the body:

>{{ site.name }}>

The double braces are a Liquid output tag. When the page renders, {{ site.name }} is replaced with your site's name, drawn from the site object that FleekSite builds for every request. Visit /hello and you will see the name in a heading.

Save the template and the change is live within about a minute. FleekSite keeps a short-lived cache of rendered pages and template bodies, on the order of sixty seconds, so a fresh save can take that long to reach the page. There is nothing to deploy; the save is the deploy.

An undefined variable renders as nothing rather than an error, so a typo in a name leaves a blank space instead of breaking the page. That tolerance is described in how rendering works.

Listing a few products

Outputting one field proves the loop is closed. The next step up is reading your own data. The {% collection %} tag queries the database and hands you an array to loop over. Here it fetches three products and prints each one:

{% collection products, items, limit: 3 %}

 class="products">
  {% for item in items %}
    >
       href="{{ item.permalink }}">{{ item.title }}>
       class="price">{{ item.price }}>
    >
  {% endfor %}
>

Reading that tag left to right: products is the source, and items is the variable the results land in. limit: 3 caps the query at three rows. The tag resolves products to your posts of the product type, so items is an ordinary array you can walk with a standard {% for %} loop.

Inside the loop, each item is a full post. {{ item.title }} and {{ item.permalink }} come straight from the record, and {{ item.price }} is formatted to two decimal places for you. A product carries much more, its media, variants, tags and author, all listed under objects.

New sites render in standard mode, so the tags and filters here behave as every Liquid reference describes. Render modes explains the one case where an older site differs.

Where to go next

That is the whole loop: a record, a body, a save, a live page. From here the documentation splits two ways.

To understand the machinery, read the concepts in order, starting with the template editor and how rendering works.
To look something up, jump into the Liquid reference, where every tag, filter and object is documented with its behaviour and any render-mode difference.

Previous Overview Next The template editor