Skip to content

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 the src/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. Use getCollection() to retrieve posts from src/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.