Configure a project

After creating a project, replace the starter defaults with the information and assets for the site before building out its content and features.

The starter provides sensible structure and working examples, but project-specific values should not remain in the finished site.

Update the site configuration

Most site-wide information is defined in:

src/site.config.ts

Update the starter values with the project’s real information.

This includes:

• production URL
• brand and business names
• default title and description
• language and locale
• contact information
• address
• social profiles
• author information
• navigation links
• analytics ID

Production URL

Set url to the canonical production origin:

export const siteConfig = {
  url: "https://example.com",
  // ...
}

Use the final HTTPS origin without a trailing path.

The starter uses this value for site-wide URL generation, including canonical URLs, the sitemap, and robots.txt, so it must be correct before deployment.

Site metadata

Replace the starter brand and metadata values:

brand: {
  name: "Business Name",
  shortName: "Business",
  legalName: "Business Legal Name",
  tagline: "Business tagline",
},

title: "Default site title",
description: "Default site description",

Keep this configuration for information that is shared across the site rather than duplicating the same values in individual components.

Update the language, locale, contact, address, social, and author values when they apply to the project as well.

Configure the brand

The starter includes example branding so a new project has a working baseline. Replace it with the project’s visual identity.

Logo

Replace:

src/assets/logo.svg

If the project needs multiple logo variants or a different branding structure, adapt the branding component and assets to the actual requirement.

Colors

Project-level brand colors are defined in:

src/styles/_colors.scss

Replace the starter brand colors while continuing to use the shared semantic color system provided by UluBit foundations.

Add project-specific colors only when the design requires them rather than recreating shared foundation tokens locally.

Replace site assets

Replace the starter files in public/ with the project’s production assets:

apple-touch-icon.png
favicon-96x96.png
favicon.ico
favicon.svg
og-image.jpg
site.webmanifest
web-app-manifest-192x192.png
web-app-manifest-512x512.png

Keep the existing filenames unless there is a reason to change the references in BaseHead.astro.

The default Open Graph image is expected to be 1200 × 630 pixels.

Also update the site name, short name, colors, and any other project-specific values in:

public/site.webmanifest

Configure fonts

Fonts are configured through Astro’s Fonts API in:

astro.config.mjs

The starter uses Fontsource and includes Fira Sans and JetBrains Mono as defaults.

Replace those font definitions with the families and weights required by the project.

For example:

fonts: [
  {
    provider: fontProviders.fontsource(),
    name: "Your Sans",
    cssVariable: "--font-your-sans",
    weights: ["300 700"],
  },
]

Then update the project font roles in:

src/styles/_typography.scss

For example:

:root {
  --font-heading: var(--font-your-sans);
  --font-body: var(--font-your-sans), system-ui, sans-serif;
}

If the generated font variable names change, also update the <Font> references in BaseHead.astro so the intended fonts are preloaded.

Only configure the families and weights the project actually uses.

Update the navigation

The primary navigation links are defined in:

src/site.config.ts

Replace the example links with the project’s real top-level navigation:

export const navigationLinks = [
  {
    path: "/about/",
    title: "About",
  },
  {
    path: "/contact/",
    title: "Contact",
  },
]

Internal page paths should use trailing slashes consistently:

/about/
/contact/

Create or remove the corresponding pages as the navigation changes. Do not leave links to routes that do not exist.

The starter provides one responsive primary navigation. Adapt its structure only when the project has requirements the standard navigation does not cover.

Configure analytics

The starter includes production analytics support through the UluBit analytics service.

Set the website ID in src/site.config.ts:

analyticsId: "your-website-id",

Analytics loads only in production when an ID is present.

If the project does not use UluBit analytics, leave the ID empty or remove the analytics integration if it is not needed.

Replace starter pages and content

The starter includes minimal content and example routes to demonstrate the project shell.

Replace or remove these as the real site structure is created.

Pages should continue to provide the main content target expected by the base layout’s skip link:

<main id="main-content">
  <!-- Page content -->
</main>

Use existing UluBit foundations and UI components when they correctly solve the requirement. Add project-specific implementations when the project needs something different, and promote them into the shared system only when broader reuse is justified.

Verify the configuration

After the initial configuration is complete, run:

pnpm check
pnpm build

Both commands should complete without errors.

Before deployment, also confirm that:

• no starter business information remains
• the production URL is correct
• branding and icons have been replaced
• navigation points to real routes
• metadata describes the actual site
• the expected fonts load
• analytics is configured or intentionally disabled

Next, see Project Structure to understand where project-specific pages, components, layouts, styles, assets, and configuration belong.