Static Website Structure

On a typical project, you will work in the src folder and check your work in the dist folder so you don’t have to touch other files.

content

An optional directory that doesn't exist by default, when created allows you to create nested pages with Twig or use content stored in Markdown or JSON files to create pages, see Static Content for more information.

dist

Production-ready files are automatically generated here, this is where you check your work in a browser.

node_modules

Node.js modules for various project tasks.

public

All files here are copied as-is to the dist directory. You can use it for example to place a favicon.ico file, or when you need to place a file with a specific file for example for domain ownership verification. You can also use it to store media uploaded from CMS like Netlify CMS.

src

This is where you do development. The project source files are organized in the following subfolders:

• assets - static asset files (images, fonts, etc.) - files from this folder can be used in styles (url('~assets/path/to/file')), JS (import filePath from '~/assets/path/to/file) or in Twig ({{ assetPath('path/to/file') }}),
• scripts - JavaScript files, check out JavaScript documentation,
• styles - Sass files with ITCSS structure, check out ITCSS documentation,
• templates - Twig templates, check out Twig documentation.

Configuration files

Chisel uses various configuration files. Usually, it's not necessary to touch these files, unless stated otherwise.

• .browserslistrc - Supported browsers list used to generate only necessary normalization styles, JS transformations, and (when enabled in babel.config.js) automatic polyfills
• .editorconfig - EditorConfig configuration file to achieve consistent coding style
• .eslintignore - ESLint ignore file
• .eslintrc.js - ESLint configuration file to achieve consistent JavaScript coding style (you can update it to your preference)
• .gitattributes - Git configuration file to force Unix line endings in text files
• .gitignore - default Git ignore files and folders
• .htmlhintrc - HTMLHint configuration file
• .prettierignore - Prettier ignore file
• .stylelintignore - stylelint ignore file
• babel.config.js - Babel configuration file
• chisel.config.js - Chisel config file, see Configuration for more details
• index.html - project index with project pages listed, it won't exist when the option to skip it was selected when generating project
• package.json - project metadata and dependencies
• package-lock.json - npm lock file, if you use npm
• prettier.config.js - Prettier config file
• postcss.config.js - PostCSS config file
• README.md - project readme; you can use it for the project documentation
• stylelint.config.js - stylelint configuration file to achieve consistent CSS coding style (you can update it to your preference)
• yarn.lock - Yarn lock file, if you use Yarn