Site Directory Layout
TailStatic uses hierarchical file system structure (hfss) to map urls to their pages. This makes the site routing deterministic.
What is hfss?
That means a url like https://yourdomain.com/services/photography will use pages/services/photography.liquid rendered file as your page.
Similarly a collection url like https://yourdomain.com/blog/how-to-take-a-great-photo will use mdpages/blog/how-to-take-a-great-photo.md file for its data and mdpages/blog.md.liquid for its layout.
Main Directories
Inside a site's folder, you will find the following structure:
/pages
Contains the Liquid files that define individual pages on your website. e.g. a page at pages/about.liquid will be used when you access the site at https://yourdomain.com/about
You can nest multiple directories to create a nested url path.
/mdpages
Contains layout and markdown pages for rendering collections. A collection is a collection of multiple pages that all share same layout. e.g. a blog is a collection of posts. All the posts within a blog follow same layout. Only content changes per post.
/components
Contains reusable liquid pages. These are small snippets of code that can be included in multiple pages to keep your design consistent. e.g. in a typical website header and footer are usually same. Therefore they can be put has _header.liquid and _footer.liquid inside /components. These components can then be included in other pages and mdpages using {% include '...' %} directive. e.g.
{% include '_header' %}
💡 We recommend prefixing component files using underscore (_).
/css
Stores the stylesheets of the site
/js
Stores the javascript files of the site
/images
Stores the images to be used in site
/images/og
Stores the generated OG images for the site pages.
/fonts
Stores the fonts to be used inside the site
/forms
Stores the forms as json files.