Site Configuration

Configuring your Statue site with site.config.js

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:

  • Accretional 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:

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/fredweitendorf 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:

  • 2025-12-10 - 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 Accretional
---

# 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/fredweitendorf)

© 2025 Accretional

Available Variables

Site Information:

  • Accretional - Site name
  • A simple static site generator for markdown content with SvelteKit - Site description
  • https://statue.dev - Site URL
  • Statue Maintainers (currently the team at Accretional) - 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/fredweitendorf - 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
  • https://discord.gg/accretional - Discord URL
  • https://www.reddit.com/r/accretional/ - Reddit URL

Legal:

  • 2025-12-10 - Privacy policy date
  • 2025-12-10 - Terms of service date
  • 15 business days - Processing time

Date Variables:

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

Using in Frontmatter

Variables work in frontmatter too:

---
title: Privacy Policy for Accretional
description: Accretional's privacy policy, last updated 2025-12-10
---

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/fredweitendorf)
- [GitHub](https://github.com/accretional)
- [Discord](https://discord.gg/accretional)

Copyright notices:

© 2025 Accretional. All rights reserved.

Dynamic dates:

Last updated: 12/18/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