Charted Data.

Command Palette

Search for a command to run...

3 min readCharted Data

The Ultimate Configuration Guide

Learn how to fully customize your website's branding, SEO, navigation, and features using the single source of truth: site.ts.

Tutorialsconfigurationcustomizationnextjsmdx

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.

config/site.ts
export const siteConfig = {
    name: "Charted Data",
    title: "Charted Data Blog",
    tagline: "Insights on development, design, and technology",
    description: "A modern, typographic blog template built with Next.js, MDX, and Shadcn UI.",
    // ...
}

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.

Text Logo
logo: {
  text: "My Brand",
  image: null,
}
Image Logo
logo: {
  text: "My Brand",
  image: "/logo.svg",
  width: 120,
  height: 40,
}

Theme Customization#

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

theme: {
    defaultTheme: "system", // "light" | "dark" | "system"
    enableToggle: true,
}

Navigation & Social Links#

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

Header Navigation
mainNav: [
    { title: "Home", href: "/" },
    { title: "Blog", href: "/blog" },
    { title: "About", href: "/about" },
],
Twitter ConfigGitHub ConfigRSS Feed

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.

Example Feature Toggles
features: {
    search: true,
    rss: true,
    sitemap: true,
    codeHighlighting: true,
    pageTransitions: true,
    readingProgress: true,
},

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 ComponentsAdvanced Syntax HighlightingSEO 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!

Download This Boilerplate ⚡