TailStatic is a flat file CMS. All the data and layout of the website are stored within files. Only user login, configuration and collection indexing data are stored in sqlite database.
The following are different file types in TailStatic.
### Liquid files
extension: **.liquid** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These files are html files with templating support. [Liquid](https://liquidjs.com/tutorials/intro-to-liquid.html) is simple yet powerful templating language that TailStatic utilizes for prerendering your pages.
**Example (index.liquid)**
```liquid
{% layout "_layout" %}
{{banner.title}}
{{banner.description}}
```
In the above example, `{{banner.title}}` and `{{banner.description}}` are liquid tokens that will be replaced during rendering of the page.
The CTA however has `Let's Connect` text included right in the markup. TailStatic allows you to follow an approach that works best for your workflow.
If you like to separate data from markup, TailStatic gives you two ways to separate.
**On-Page Data**
You can use a `{% json ... %}` tag in the liquid file itself like below.
```liquid
{% layout "_layout" %}
{% json banner %}
{
"title": "Get the best out of your workouts",
"description":"We offer state-of-the-art gym training services with invidividually customized programs so you can get best results."
}
{% endjson %}
... rest of liquid page as above
```
---
### Data Json files
extension: **.json** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These are json files that allow you to separate data from liquid markup. From the above `index.liquid` page, the data file will be stored at `pages/pages.json` and will have following structure.
```json
{
"index":{
"banner":{
"title": "Get the best out of your workouts",
"description":"We offer state-of-the-art gym training services with invidividually customized programs so you can get best results."
}
}
}
```
The fastest way is to select complete json tag in your liquid file, right click and select Move to data file menu. This moves the json data into the data file of the page, separating your data for easy access and makes your liquid parts resusable.
### Data File Naming
The naming of data file is different for regular pages and collections.
.**Regular Pages**
For regular pages, data files have same name as their parent directory. For example, `pages/services.liquid` and `pages/about.liquid` pages will have their data stored in `pages/pages.json` while a file at `pages/services/photopgraphy.liquid` will have it's data stored in `pages/service/services.json` file.
**Collection Pages**
For collection pages, data files have same name as their collection name. For example, `mdpages/blog.liquid` will have it's data stored in `mdpages/blog.json` and `mdpages/blog.md.liquid` will have its data in `mdpages/blog.md.json`
---
### Open Graph Image files
extension: **.og.liquid** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These are special liquid files that are not publicly rendered but are used for rendering OG images for your pages. They should have same name as the liquid file they represent. For example, a page at `pages/services.liquid` can have a `pages/services.og.liquid` for creating it's OG image.
---
### Markdown files
extension: **.md** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
Markdown is a lightweight content formatting language. TailStatic uses markdown for rendering collections such as blog, documentation, changelog etc.
Each markdown file must have front-matter in yaml format and must include title at the minimum.
```yaml
---
title: Document title
created_on: 2026-05-17
summary: A brief summary about the document.
tags:
- tag1
- tag2
---
```
The front-matter will be available in the liquid file as `page` object.
```liquid
{{page.title}} -- displays Document title on liquid page
{{content}} -- renders content of the document
```
---
### Collection root files
extension: **.liquid** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These files are used as landing page of a collection. These are named as <collection>.liquid inside `mdpages` folder. For example, https://yourdomain.com/blog will render `mdpages/blog.liquid` file.
---
### Single post layout files
extension: **.md.liquid** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These files are used as layout file for a single `.md` file of the collection. The contents and front-matter of the markdown pages are available in this file.
---
### Config Json files
extension: **.config.json** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These are json files that store configuration for your collections. They are placed in `mdpages` directory and have same name as the collection. For example a `blog` collection may have below config file.
```json
{
"numberOfPosts": 9,
"pinnedPost": "getting-started-with-blog",
"sortBy": "created_on",
"publishMarkdown": true
}
```
---
### Form Json files
extension: **.json** {.inline-block .rounded-md .border .border-slate-300 .py-0.5 .px-2.5 .text-start .text-sm .transition-all .shadow-sm .text-slate-600}
These are json files that store information about your forms. They are placed in `forms` directory.
**Ideally these should not be edited manually. Instead you should use form editor.**
A simple subscription form file could look like below.
```json
{
"name": "New FMR",
"formId": "subscribe",
"fields": [
{
"name": "name",
"label": "Name",
"type": "text",
"default": "",
"required": true,
"allowedItems": [],
"allowMultipleSelection": false,
"maxSelections": null,
"minSelections": null
},
{
"name": "email",
"label": "Email",
"type": "email",
"default": "",
"required": true,
"allowedItems": [],
"allowMultipleSelection": false,
"maxSelections": null,
"minSelections": null
}
],
"captchaEnabled": false,
"captchaAPIKey": "",
"expirationDate": null,
"honeypotFieldName": "_fake_field",
"sendNotification": true,
"emailAccount": "test@testaccount.com",
"receiverEmails": "youremail@yourdomain.com"
}
```
Note that this file only stores form definition. The actual form html can be designed as per your site's theme.
The form action must be set to `/form/` and method must be 'POST'.
