Site Configuration

The site.config.js file is your site's central configuration. It stores information used throughout your site via template variables and component props.

Contribute to Statue! Built a useful component, theme, or template? Share it with the community—it only takes a single command. Learn how →

Location

site.config.js - in your project root

Basic Structure

export const siteConfig = {
  site: { /* Site info */ },
  contact: { /* Contact details */ },
  social: { /* Social media */ },
  legal: { /* Legal pages */ },
  seo: { /* SEO settings */ }
};

export default siteConfig;

Site Information

Basic information about your site:

site: {
  name: "Your Site Name",
  description: "Your site description",
  url: "https://yoursite.com",
  author: "Your Name or Organization"
}

Usage:

• Statue SSG in markdown
• {data.siteConfig.site.name} in components
• SEO meta tags

When to update:

• When you first set up your site
• When you rebrand
• When you change domains

Contact Information

Basic Contact

contact: {
  email: "[email protected]",
  privacyEmail: "[email protected]",
  supportEmail: "[email protected]",
  phone: "+1 (555) 123-4567"
}

Usage:

• [email protected] in markdown
• Legal pages (privacy policy, terms)
• Contact forms
• Footer

Tip: Use the same email for all if you don't have separate addresses.

Address

contact: {
  address: {
    street: "123 Main Street",
    city: "San Francisco",
    state: "CA",
    zipCode: "94103",
    country: "United States"
  }
}

Usage:

• 930 Montgomery Street, Suite 100 - Individual fields
• 930 Montgomery Street, Suite 100, San Francisco, CA 94133 - Auto-formatted full address
• Legal pages (business address requirements)
• Contact page

Tip: Required for some legal pages and business sites.

Social Media

Links to your social media profiles:

social: {
  twitter: "https://twitter.com/yourhandle",
  github: "https://github.com/yourorg",
  linkedin: "https://linkedin.com/company/yourcompany",
  facebook: "https://facebook.com/yourpage",
  instagram: "https://instagram.com/yourhandle",
  youtube: "https://youtube.com/@yourchannel",
  discord: "https://discord.gg/yourserver",
  reddit: "https://reddit.com/r/yourcommunity"
}

Usage:

• https://x.com/FredAccretional in markdown
• Footer social links
• Share buttons

Tip: Remove or leave empty the ones you don't use.

Legal Settings

Configuration for legal pages:

legal: {
  privacyPolicyLastUpdated: "2025-01-15",
  termsLastUpdated: "2025-01-15",
  isCaliforniaCompliant: true,
  doNotSell: {
    processingTime: "15 business days",
    confirmationRequired: true
  }
}

Usage:

• 2024-01-15 - Shows update date
• Privacy policy requirements
• CCPA/CPRA compliance

When to update:

• When you modify your privacy policy
• When you modify your terms of service
• When you update data handling practices

Important: Keep dates accurate for legal compliance.

SEO Settings

Search engine optimization configuration:

seo: {
  defaultTitle: "Your Site - Tagline",
  titleTemplate: "%s | Your Site",
  defaultDescription: "Your site description for search results",
  keywords: ["your", "site", "keywords"],
  ogImage: "/images/og-image.png",
  twitterCard: "summary_large_image"
}

SEO Fields

defaultTitle

• Fallback title when no title is specified
• Used on homepage if no custom title set

titleTemplate

• Template for page titles
• %s is replaced with the page title
• Example: "Blog Post | Your Site"

defaultDescription

• Fallback meta description
• Used when pages don't specify description
• Shows in search results

keywords

• Array of site-wide keywords
• Less important for modern SEO but still useful

ogImage

• Image URL for social sharing (Open Graph)
• Shows when links are shared on social media
• Should be 1200×630px

twitterCard

• Twitter card type
• Options: summary, summary_large_image, player

Using Configuration in Markdown

Template Variables

Statue lets you use config values and dynamic variables in your markdown using the {{variable}} syntax.

Basic Usage

Access config values in any markdown file:

---
title: Contact Us
description: Get in touch with Statue SSG
---

# Contact Us

Email: [[email protected]](mailto:[email protected])
Phone: +1 (707) 563-9948

Our office: 930 Montgomery Street, Suite 100, San Francisco, CA 94133

Follow us on [Twitter](https://x.com/FredAccretional)

© 2025 Statue SSG

Available Variables

Site Information:

• Statue SSG - Site name
• A simple static site generator for markdown content with SvelteKit - Site description
• https://mplode.dev - Site URL
• Statue Team - Site author

Contact Information:

• [email protected] - Main email
• [email protected] - Privacy email
• [email protected] - Support email
• +1 (707) 563-9948 - Phone number
• 930 Montgomery Street, Suite 100 - Street address
• San Francisco - City
• CA - State
• 94133 - ZIP code
• United States - Country
• 930 Montgomery Street, Suite 100, San Francisco, CA 94133 - Full formatted address

Social Media:

• https://x.com/FredAccretional - Twitter URL
• https://github.com/accretional - GitHub URL
• https://www.linkedin.com/company/accretional/ - LinkedIn URL
• undefined - Facebook URL
• undefined - Instagram URL
• https://www.youtube.com/@accretional - YouTube URL
• {{social.discord}} - Discord URL
• {{social.reddit}} - Reddit URL

Legal:

• 2024-01-15 - Privacy policy date
• 2024-01-15 - Terms of service date
• 15 business days - Processing time

Date Variables:

• 12/8/2025 - Today's date (e.g., "12/7/2025")
• 2025 - Current year (e.g., "2025")
• December - Current month name (e.g., "December")
• 8 - Current day (e.g., "7")

Using in Frontmatter

Variables work in frontmatter too:

---
title: Privacy Policy for Statue SSG
description: Statue SSG's privacy policy, last updated 2024-01-15
---

Template Variable Examples

Email links:

Contact us: [[email protected]](mailto:[email protected])
Privacy: [[email protected]](mailto:[email protected])

Social media:

Follow us:
- [Twitter](https://x.com/FredAccretional)
- [GitHub](https://github.com/accretional)
- [Discord]({{social.discord}})

Copyright notices:

© 2025 Statue SSG. All rights reserved.

Dynamic dates:

Last updated: 12/8/2025

How Variables Work

• Variables are processed at build time, not runtime
• If a variable isn't found, the {{variable}} text stays unchanged
• A warning is logged to console for missing variables
• Variables are safe - no user input is evaluated

Using Configuration in Components

Access config in Svelte components:

<script>
  import siteConfig from '/site.config.js';

  const siteName = siteConfig.site.name;
  const email = siteConfig.contact.email;
</script>

<h1>Welcome to {siteName}</h1>
<a href="mailto:{email}">Contact us</a>

Environment-Specific Configuration

Dynamic URL Configuration

Handle different URLs for development and production:

let siteUrl;

if (typeof import.meta !== 'undefined' && import.meta.env) {
  siteUrl = import.meta.env.VITE_SITEURL;
} else {
  siteUrl = process.env.VITE_SITEURL;
}

siteUrl = siteUrl ?? 'https://yoursite.com'; // Fallback

export const siteConfig = {
  site: {
    url: siteUrl,
    // ... other config
  }
};

Set via environment variable:

VITE_SITEURL=https://staging.yoursite.com npm run dev

Configuration Best Practices

1. Update Immediately

Change placeholder values when you first set up:

email: "[email protected]"  // ❌ Don't leave this
email: "[email protected]"      // ✅ Change to your email

2. Keep Legal Dates Current

privacyPolicyLastUpdated: "2025-01-15"  // Update when you change policy

3. Remove Unused Socials

// ❌ Don't leave fake links
facebook: "https://facebook.com/statuessg"

// ✅ Remove or use your actual link
facebook: "https://facebook.com/yourpage"
// Or remove the line entirely

4. Use Consistent Formatting

// ✅ Good - consistent URL formats
twitter: "https://twitter.com/handle"
github: "https://github.com/user"

// ❌ Bad - inconsistent
twitter: "twitter.com/handle"  // Missing protocol
github: "https://github.com/user"

5. Validate Email Addresses

Ensure emails are valid:

email: "[email protected]"      // ✅ Valid
email: "hello @ yoursite.com"    // ❌ Invalid (spaces)
email: "hello"                    // ❌ Invalid (no domain)

Common Configuration Patterns

Startup/SaaS Site

export const siteConfig = {
  site: {
    name: "YourApp",
    description: "The best app for X",
    url: "https://yourapp.com",
    author: "YourApp Team"
  },
  contact: {
    email: "[email protected]",
    supportEmail: "[email protected]"
  },
  social: {
    twitter: "https://twitter.com/yourapp",
    github: "https://github.com/yourorg"
  }
};

Personal Blog

export const siteConfig = {
  site: {
    name: "John's Blog",
    description: "Thoughts on code and life",
    url: "https://johnblog.com",
    author: "John Doe"
  },
  contact: {
    email: "[email protected]"
  },
  social: {
    twitter: "https://twitter.com/johndoe",
    github: "https://github.com/johndoe"
  }
};

Documentation Site

export const siteConfig = {
  site: {
    name: "ProjectDocs",
    description: "Official documentation for Project",
    url: "https://docs.project.com",
    author: "Project Team"
  },
  contact: {
    email: "[email protected]"
  },
  social: {
    github: "https://github.com/project/project",
    discord: "https://discord.gg/project"
  }
};

Troubleshooting

Variables not showing in markdown

Check:

1. Is the variable name correct?
2. Did you restart the dev server?
3. Is the value defined in site.config.js?

Fix:

# Restart dev server
npm run dev

Config changes not applying

Build cache issue. Clear build artifacts:

rm -rf .svelte-kit build
npm run dev

TypeScript errors with config

Create a type definition file (optional):

// site.config.d.ts
export interface SiteConfig {
  site: {
    name: string;
    description: string;
    url: string;
    author: string;
  };
  // ... other types
}

Next Steps

• Statue.dev - Official documentation
• New Site Checklist - Setup walkthrough
• Components - Use config in components
• Themes - Style your site