Your new Hyas project generated from the
create hyas CLI wizard already includes some files and folders. Others, you will create yourself and add to Hyas’ existing file structure.
Here’s how an Hyas project is organized, and some files you will find in your new project.
Directories and Files
Hyas leverages an opinionated, Hugo-based folder layout for your project. Every Hyas project root should include the following directories and files:
assets- Your project assets (scripts, styles, images, etc.)
config- Configuration files (Hyas, Hugo, PostCSS, etc.)
content- Your project content (pages, posts, etc.)
layouts- Your project layouts (partials, shortcodes, etc.)
static- Your non-code, unprocessed assets (fonts, icons, etc.)
package.json- A project manifest.
Example Project Tree
A common Hyas project directory might look like this:
It is a common convention to store your CSS or Sass files in a
assets/scss directory, but this is not required. As long as your styles live somewhere in the
assets/ directory and are imported correctly, Hyas will handle and optimize them.
app.scss file is used to specify the CSS or Sass files to import (or use). Put your custom (S)CSS variables in
common/variables-custom and custom (S)CSS code in
hugo.toml file includes Hugo configuration options for your Hyas project. Here you can specify taxonomies to use, build options, server options, and more.
module.toml file specifies the Hugo mounts, logically linking
node_modules directories to component folders (ex:
layouts) — making Hyas Integrations available in your Hyas project.
params.toml file is where you set Hyas configuration options like e.g. options for themes and integrations.
See the Configuring Hyas Guide for details on setting configurations.
content/ directory is where you store content, organized in sections or page bundles (leaf bundles or branch bundles) and can contain page resources.
Layouts are Hyas templates that define the UI structure shared by one or more pages.
static/ directory is for files and assets that do not need to be processed during Hyas’ build process. These files will be copied into the build folder untouched.
This behavior makes
static/ ideal for common assets like images and fonts, or special files such as
static/ directory, but be aware that those files will not be bundled or optimized in your final build.
npm run dev,
npm run build).
There are two kinds of dependencies you can specify in a
devDependencies. In most cases, these work the same: Hyas needs all dependencies at build time, and your package manager will install both. We recommend putting all of your dependencies in
dependencies to start, and only use
devDependencies if you find a specific need to do so.
For help creating a new
package.json file for your project, check out the manual setup instructions.