Back to blog
Mar 17, 2024
3 min read

Astro Sphere: File Structure

(by Mark Horn) You'll find these directories and files in the project. What do they do?

This is a demo blog post by Mark Horn from his Astro-Sphere theme, which serves as the starting point for my site redesign.

A one line summary of what each file and directory is for:

1
/
2
├── public/ // Files publicly available to the browser
3
│ ├── fonts/ // The default fonts for Astro Sphere
4
│ │ └── atkinson-bold.woff // default font weight 700
5
│ │ └── atkinson-regular.woff // default font weight 400
6
│ ├── js/ // Javascript that will be imported into <head>
7
│ │ └── animate.js // function for animating page elements
8
│ │ └── bg.js // function for generating the background
9
│ │ └── scroll.js // scroll handler for the header styles
10
│ │ └── theme.js // controls the light and dark theme
11
│ └── brand.svg //the icon that displays in header and footer
12
│ └── favicon.svg //the icon that displays in the browser
13
│ └── ui.svg // an svg sprite for all ui icons on the website
14
│ └── social.svg // an svg sprite for all social media icons
15
│ └── open-graph.jpg // the default image for open-graph
16
│ └── robots.txt // for web crawlers and bots to index the website
17
├── src/ // Everything that will be built for the website
18
│ ├── components/ // All astro and SolidJs components
19
│ ├── content/ // Contains all static markdown to be compiled
20
│ │ | blog/ // Contains all blog post markdown
21
│ │ | projects/ // Contains all projects markdown
22
│ │ | work/ // Contains all work page markdown
23
│ │ | legal/ // Contains all legal docs markdown
24
│ │ └── config.ts // Contains the collection config for Astro
25
│ ├── layouts/ // Reused layouts across the website
26
│ └── pages/ // All of the pages on the website
27
│ └── styles/ // CSS and global tailwind styles
28
│ └── lib/ // Global helper functions
29
│ └── consts.ts // Page metadata, general configuration
30
│ └── types.ts // Types for consts.ts
31
└── .gitignore // Files and directories to be ignored by Git
32
└── .eslintignore // Files and directories to be ignored by ESLint
33
└── eslintrc.cjs // ESLint configuration
34
└── astro.config.mjs // Astro configuration
35
└── tailwind.config.mjs // Tailwind configuration
36
└── tsconfig.json // Typescript configuration
37
└── package.json // All the installed packages