Trio Icon
Trio v6.1.0
Documentation is evolving and is a WIP

Project Structure

Should your projects require additional folders to support tasks that fall outside of Trio's build and release workflows, such a those to bundle your site's runtime JavaScript for example, please create them as children of the root/source/ folder and add them to Trio's ignore configuration property to prevent them from polluting Trio's metadata and from interfering with Trio's build and release workflows.

The following describes a Trio project's file and folder structure:

Project Folders And Files


Contains metadata that Trio maintains and uses to implement incremental building of your project.


Project configuration file. See Configuration for more information.


File which contains collections of metadata that are generated every time Trio builds the project.


Folder targeted by the build command. See Command Line for details.


Folder targeted by the release command. See Command Line for details.


Contains the following folders which are used for the development of your web site.


Contains tag-based callback modules, which are referenced by HTML tags in templates, fragments and includes using the data-trio-callback tag attribute. See Tag-Based Callbacks for more information.


Contains .css files. See SCSS/SASS/CSS for more information.


Contains JSON data files that are exposed to tag-based callbacks. See JSON Data for more information.


Contains files, such as favicon.ico, 404.html, robots.txt, sitemaps, .nojekyll, .etc, for example, that are copied "as is" to the site's root folder.


Contains collection filter function modules introduced in v2.0.0.. See Collections for more information.


Contains .md and .html fragment files and folders. See Fragment for more information.


Contains blog-specific article .md and .html fragment files and folders. See Blogging for more information.


Contains .md and .html include files. See Include for more information.


Contains JavaScript modules that are required by tag-based callback modules and collection filter function modules. Introduced in v4.0.0. See Tag-Based Callbacks and Collections for more information.


Contains media specific files (e.g. .jpg, .gif, .pdf, .etc).


Contains .sass and .scsss files. See SCSS/SASS/CSS for more information.


Contains run-time JavaScript files. When building your site Trio copies these JavaScript files to either root/public/scripts or root/release/scripts.

If your site uses a JavaScript bundler (e.g. Webpack, Parcel, Browserify) to package its runtime JavaScript then do not host those modules in root/source/scripts. Instead, create a new folder, jsBundle for example, in root/source/ and host them there. You must also configure Trio to ignore these folders to prevent them from polluting Trio's metadata and from interfering with Trio's build and release workflows. See above for more information.


Contains .html template files.

See Also

Your Financial Support Of This Project Is Greatly Appreciated

Trio is an open source project and is therefore free of charge to use both for noncommercial and commercial use, but when you use Trio to create a new website, please consider donating a few bucks. It doesn't take very long, the process is secure, and it will allow us to continue to support the community and to maintain and enhance Trio going forward.

Show your ❤️, add your ★ to the Github repo.