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. 

```liquid
{% 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.

---

### See Also

* [Create and Manage Sites](/docs/create-your-first-site)