Every LiteInk theme follows the same folder conventions. Once you learn one, you know them all.

Top-Level Layout

my-theme/
├── src/
│   ├── pages/           # Routes — each .astro file = one URL
│   ├── layouts/         # Shared page wrappers (header, footer, nav)
│   ├── components/      # Reusable UI components
│   ├── content/         # Markdown collections (blog posts, etc.)
│   ├── data.ts          # ← Edit this: site content & config
│   └── styles/          # Global CSS
├── public/              # Static assets served as-is
│   ├── img/             # Images
│   ├── fonts/           # Self-hosted fonts (if any)
│   └── favicon.svg
├── astro.config.mjs     # Astro configuration
├── package.json
└── tailwind.config.mjs  # Tailwind config (if used)

The src/pages/ Folder

This is the most important folder. Every .astro file here becomes a URL route.

src/pages/
├── index.astro        → /
├── about.astro        → /about/
├── contact.astro      → /contact/
└── blog/
    ├── index.astro          → /blog/
    └── [...slug].astro      → /blog/my-article/

Files named index.astro map to the folder path. Files with brackets like [slug] are dynamic routes — they generate one page per entry in a content collection.

The src/content/ Folder

Content collections are Markdown files that Astro turns into typed data. For example, blog posts:

src/content/blog/
├── my-first-post.md
├── another-article.md
└── guide-to-astro.md

Each Markdown file has frontmatter at the top:

---
title: My First Post
description: A short summary for SEO.
date: 2026-01-15
category: design
---

Your content here in **Markdown**.

The Config File

Most themes have a central config file — usually src/data.ts or src/config.ts. This is where you spend 80% of your customization time.

It typically contains:

export const SITE = {
  name: 'My Company',
  tagline: 'We build things that last.',
  email: 'hello@example.com',
  social: { twitter: 'https://twitter.com/...', github: '...' },
};

export const NAV = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about/' },
];

You change values here — no need to hunt through component files.

Static Assets in public/

Files in public/ are served at the root URL without processing. For example:

  • public/img/hero.jpg → available at /img/hero.jpg
  • public/favicon.svg → available at /favicon.svg
  • public/fonts/Inter.woff2 → available at /fonts/Inter.woff2

This is where you put images, fonts, and other binary assets.

Astro Configuration

The astro.config.mjs file controls build behavior:

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://yoursite.com',  // ← Change this to your domain
  output: 'static',
});

The site option is important — it’s used for sitemaps, canonical URLs, and RSS feeds.

What’s Next?