Skip to content
Blacks

Folder Structure

Folder Structure

When you first open the Blacks project, you’ll see many folders and files. Don’t worry — you only need to work inside one folder called src. Everything you’ll edit lives there.

Blacks Astro JS Folder Structure

Open the src folder and work from there. Here is what each folder does.

src/content

This is where your article content lives — specifically the promotional widget area used on post pages.

Use this folder when you want to:

  • Add promotional content to blog posts
  • Manage post-specific widgets
  • Organize content by service or topic

src/data

This is where the template stores all its configuration and text content in .json files.

Use this folder when you want to:

  • Change the homepage text
  • Update navigation and footer
  • Edit pricing tiers
  • Manage card grids

No coding required. Open a .json file, change the text between quotes, save.

src/design

This folder contains the page layouts — the structural templates that wrap your content.

Use this folder when you want to:

  • Change how a page type looks
  • Modify the structure of blog posts
  • Customize the layout of service pages

Tip for beginners: Don’t edit this folder until you’re comfortable with Astro. It’s the scaffolding — small mistakes here can break pages.

src/pages

This is where pages and content live — written in Markdown (.md) or MDX (.mdx).

Use this folder when you want to:

  • Add a new page
  • Create a new blog post
  • Update a service or gallery page

The filename becomes the URL. For example, src/pages/blog/my-post.md becomes /blog/my-post/.

src/styles

This folder contains the global CSS for the template.

Use this folder when you want to:

  • Change colors
  • Adjust fonts
  • Modify spacing
  • Add custom styles

Tip: Start with the existing files. Edit small values first — one color, one font size — before making big changes.

src/widget

This folder contains reusable UI components — the building blocks of every page.

Use this folder when you want to:

  • Change the navbar
  • Edit the footer
  • Modify cards or sections
  • Add a new reusable component

Tip: Widgets are shared across pages. Changing one here changes it everywhere it’s used.

Which Folder Should You Use?

Here’s a quick guide for common tasks:

I want to…Go to
Change homepage textsrc/data
Add a new pagesrc/pages
Write a new blog postsrc/pages/blog
Change site colorssrc/styles
Edit the navbar or footersrc/widget
Add promotional content to postssrc/content
Customize page layoutsrc/design

Tips for Beginners

  1. Start with src/data. It’s the easiest folder to work with — just edit text.
  2. Don’t edit src/design until you’re comfortable. It’s structural.
  3. Keep the folder names unchanged. Astro relies on them.
  4. Use VS Code or a code editor. Notepad can break .json and .md files.
  5. Test after every change. Run npm run dev and check your browser.

Next Step

Now that you understand the folder structure, continue to:

👉 Installation — install Blacks on your machine