Changing Branding

Site name and description

Update src/lib/config.ts for the site name and description, and your .env.local for the public-facing URL:

export const siteConfig = {
  name: 'Your Blog Name',
  description: 'Your blog description for SEO.',
  url: process.env.NEXT_PUBLIC_APP_URL!,
}

Logo

The logo component is in src/components/Logo.tsx (or defined inline in NavBar). Replace the SVG or image with your own. For an SVG logo, paste the SVG markup directly. For a raster image, place it in public/ and use next/image.

// Simple text logo
export function Logo() {
  return (
    <Link href="/" className="font-display text-xl font-bold">
      MyBlog
    </Link>
  )
}

// Image logo
export function Logo() {
  return (
    <Link href="/">
      <Image src="/logo.svg" alt="MyBlog" width={120} height={32} />
    </Link>
  )
}

Color palette

BloggFast's color system lives in src/styles/tailwind.css inside the @theme block. Override the default Tailwind colors or add custom ones:

@theme {
  /* Override accent color */
  --color-brand: oklch(60% 0.2 250);
  --color-brand-dark: oklch(50% 0.2 250);
}

Then use bg-brand, text-brand, etc. in your components.

Typography

Fonts are loaded in src/app/layout.tsx. To change the display or body font:

import { Outfit } from 'next/font/google'

const outfit = Outfit({
  subsets: ['latin'],
  variable: '--font-display',
})

// Then update the CSS variable in @theme:
// --font-display: Outfit, ui-sans-serif, ...

Favicon

Replace src/app/favicon.ico with your own favicon. You can also add apple-icon.png and icon.png in the same directory for additional icon sizes. Next.js automatically picks these up.