Astro Projects Structure: Folders

Now that we’re familiar with the basics of Astro, let’s see what an Astro project is made of. Let’s understand the structure of our application. Some of the files and folders are specific to Astro. Let’s go through them one by one to better understand their purpose.

The src folder

The src folder holds all application-related files. This folder can hold any custom-named files or subfolders but it must contain a folder called pages. The pages folder is responsible for routing in Astro. Astro uses file-based routing, where each route is named by the file name.

This is where we can also place components, content, styles, or utility functions. The building blocks of the application will be in this folder. In our case, we’ll separate files based on their functionality. We’ll have the following subfolders within the src folder:

• components: Inside this folder, we’ll collect components in individual files.

• content: The content (posts) of the site will be created within a content folder in Markdown files.

• pages: The mandatory pages folder is responsible for generating routes using Astro’s file-based routing.

• styles: All global styles associated with the project will be created within the styles folder.

• utils: We’ll also have a separate folder for utility functions.

Note: There are no strict rules on how to organize the src folder. Go with the most intuitive solution.

The public folder

Static assets that are handled as-is need to be created in the public folder. This is where we would usually store static assets—such as images, icons, or fonts—associated with the site. Other meta files—like favicon.ico or robots.txt—are also stored here. Whenever a file is placed inside this folder, it’ll be copied over to the build folder as is, without any modification. Open the public folder in the code widget above and inspect its contents.

The .astro folder