The Ultimate Configuration Guide

This template is designed with a "Single Source of Truth" philosophy. Almost every global aspect of your website—from the name in the header to the JSON-LD structured data for SEO—is controlled by a single file: config/site.ts.

Modifying config/site.ts is the first and most important step in personalizing your blog. It ensures consistency across all pages and simplifies future updates.

Core Site Information#

The siteConfig object starts with high-level identity settings. These are used in the browser title bar, meta tags, and the homepage hero section.

1
export const siteConfig = {
2
    name: "Base-Blog",
3
    title: "Base-Blog Simple & High-Performance Blog Boilerplate",
4
    tagline: "The simplest way to build a high-performance, developer blog.",
5
    description: "A clean, simple, and high-performance blog boilerplate built with Next.js, MDX, and Shadcn UI.",
6
    // ...
7
}

Tip: Your tagline and description are critical for SEO. Ensure they contain your primary keywords while remaining engaging for human readers.

Branding & Themes#

You can toggle between a text-based logo and an image-based logo, and set your default theme preferences.

Logo Configuration#

Text Logo

1
logo: {
2
  text: "My Brand",
3
  image: null,
4
}

Image Logo

1
logo: {
2
  text: "My Brand",
3
  image: "/logo.svg",
4
  width: 120,
5
  height: 40,
6
}

Theme Customization#

Control the default appearance and whether users can toggle between light and dark modes.

1
theme: {
2
    defaultTheme: "system", // "light" | "dark" | "system"
3
    enableToggle: true,
4
}

Navigation & Social Links#

Easily manage your header and footer links. The social object is used for both visible links and automated SEO metadata.

1
mainNav: [
2
    { title: "Home", href: "/" },
3
    { title: "Blog", href: "/blog" },
4
    { title: "About", href: "/about" },
5
],

• Twitter Config: twitter: "basedev"
• GitHub Config: github: "basedev"
• RSS Feed: rss: "/feed.xml"

Feature Flags#

This template comes with powerful features that can be toggled on or off instantly.

• Global Search: Enable/disable the CMD+K search dialog.
• Reading Progress: Toggle the progress bar at the top of blog posts.
• Sitemap & RSS: Automated generation for SEO and syndication.
• Page Transitions: Smooth animations between page loads.

1
features: {
2
    search: true,
3
    rss: true,
4
    sitemap: true,
5
    codeHighlighting: true,
6
    pageTransitions: true,
7
    readingProgress: true,
8
},

Workflow: How to Customize#

Follow these steps to personalize your site in minutes.

1. Open config/site.ts: Navigate to the config/ directory in your IDE.
2. Update Core Info: Change the name, url, and description to match your project.
3. Configure Social Links: Add your handles to the social object to enable automatic SEO and footer links.
4. Toggle Features: Decide which advanced features (Search, RSS, etc.) you want active.
5. Verify Results: Run the development server and check your header, footer, and metatags.

Need More Help?#

If you want to dive deeper into custom styling beyond the config file, check out our other guides:

• Typography & UI Components
• Advanced Syntax Highlighting
• SEO Best Practices

Did you know? The layout of the About and Contact pages is also managed in site.ts. Look for the about and contact objects to update headings and sections without touching the page code!

Happy Customizing!