Project structure

Pages

The pages folder is an essential part of the project structure. It contains HTML files that represent individual pages of the website. Each HTML file corresponds to a specific page and contains the necessary markup and content for that page. This folder allows for modular organization and easy management of different pages within the project.

Go to the Pages page to learn more about the pages folder.

Locales

The locales folder holds all the locales with locale-specific translations. Localization is the process of adapting a website or application to a particular language, region, or culture. In this folder, you can find files or subfolders for each locale, containing translated content and strings. This structure enables the seamless implementation of multilingual support in the project.

Static

The static folder is dedicated to storing files that are accessible at the root of the website. This folder serves as a repository for static assets such as images, CSS files, JavaScript files, and other resources required by the website. It helps in organizing and managing these assets effectively, making them readily available to the web pages.

Favicon

Within the static folder, there is a subfolder called favicon specifically designated for favicon files. A favicon is a small icon that represents a website and appears in various places, such as the browser tab, bookmarks, or history. Placing favicon files in this folder ensures easy accessibility and proper implementation of the website's favicon.

Variables.css

The variables.css file located within the static folder contains styling variables for the website. These variables define reusable values for properties such as colors, typography, spacing, or any other CSS attribute that may be used across multiple pages or components. By centralizing these variables in one file, it becomes convenient to make global design changes or maintain a consistent visual style throughout the project.

Components

The components folder houses callable components, which are reusable pieces of code that can be used across different pages or sections of the website. These components provide a modular approach to development, allowing developers to encapsulate specific functionality or UI elements and reuse them wherever needed. By organizing components in a dedicated folder, it becomes easier to manage and maintain them, enhancing code reusability and project scalability.

Layouts

The layouts folder contains the general layout files used for constructing pages within the website. These layout files define the common structure, header, footer, and other consistent elements that are shared across multiple pages. By separating the layout from the individual pages, it becomes more efficient to update or modify the overall structure of the website without making changes to each individual page.

Dist

The dist folder is the destination folder where the final result of the website is placed. It typically holds the compiled or bundled version of the project, ready for deployment. The contents of this folder are often generated during the build process, where various assets, scripts, stylesheets, and optimized files are combined and placed in this directory for easy distribution to a web server or hosting platform.

Settings.yaml

The settings.yaml file is a configuration file that stores various settings and parameters related to the project.