File Structure
The file organization of the template is structured to promote clarity and ease of use. Understanding the layout of the files and folders will help you navigate and customize the template more efficiently.
Below is a detailed breakdown of the primary directories and their purposes:
Directorypublic/ holds static assets such as images and fonts
- …
Directorysrc/ contains the source code for the template
Directoryassets/ other bundled assets
- …
Directorycomponents/ contains reusable components to build headers, footers, and cards
- …
Directorylayouts/
- …
Directorylib/
- …
Directorypages/
- …
Directorypartials/ partials enable the reuse of custom blocks across layouts
- …
Directorystyles/ contains CSS files for styling your template
- …
- template.config.ts contains all configurations for your template
- .eslintrc.json
- .gitignore
- .prettierignore
- .prettierrc
- astro.config.ts
- package-lock.json
- package.json
- README.md
- tailwind.config.js
- ts.config.json
After looking at this file structure, there are some things you have to consider:
- depending on the theme, some of these folders may not appear if were not necessary.
- Astro will look for
.astro
or.md
files in thesrc/pages/
directory. Each page is exposed as a route based on its file name. - The
src/content/
directory contains “collections” of related Markdown and MDX documents. UsegetCollection()
to retrieve posts fromsrc/content/blog/
, and type-check your frontmatter using an optional schema. See Astro’s Content Collections docs to learn more. - Any static assets, like images, can be placed in the
public/
directory. - To customize the layouts, navigate to the
src/layouts
directory. - Also in
src/components
directory, you will find custom components like React or Astro that make it easier to create and manage elements within your layouts.
I will do my best to maintain this across all templates to avoid any confusion.