Configuration Guide

Learn how to configure SaaSKit to match your brand, set up SEO, and customize settings.

Site Configuration

The main configuration file is located at src/config.ts. Update it with your information:

export const siteConfig = {
  name: 'Your SaaS Name',
  description: 'Your SaaS description',
  url: 'https://yourdomain.com',
  ogImage: 'https://yourdomain.com/og-image.jpg',
  links: {
    twitter: 'https://twitter.com/yourhandle',
    github: 'https://github.com/yourusername',
    facebook: 'https://facebook.com/yourpage',
  },
  author: {
    name: 'Your Name',
    email: '[email protected]',
  },
};

Astro Configuration

Edit astro.config.mjs to configure Astro settings:

import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://yourdomain.com',
  integrations: [
    react(),
    tailwind(),
    sitemap({
      changefreq: 'weekly',
      priority: 0.7,
    }),
  ],
});

Tailwind Configuration

Customize your design system in tailwind.config.mjs:

export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          // Your brand colors
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
};

Environment Variables

Create a .env file for sensitive or environment-specific values:

# Public variables (accessible in client code)
PUBLIC_SITE_URL=https://yourdomain.com
PUBLIC_API_URL=https://api.yourdomain.com

# Private variables (server-side only)
PRIVATE_API_KEY=your_secret_key
DATABASE_URL=your_database_url

Access public variables in your code:

const siteUrl = import.meta.env.PUBLIC_SITE_URL;

SEO Configuration

Meta Tags

Update meta tags in src/layouts/BaseLayout.astro:

<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />

Sitemap

The sitemap is automatically generated. Configure it in astro.config.mjs:

sitemap({
  changefreq: 'weekly',
  priority: 0.7,
  lastmod: new Date(),
})

robots.txt

Create public/robots.txt:

User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml

Feature Flags

Enable or disable features in src/config.ts:

export const features = {
  darkMode: true,
  blog: true,
  newsletter: true,
  testimonials: true,
  pricing: true,
  integrations: true,
};

Content Collections

Blog Configuration

Configure blog settings:

export const blogConfig = {
  title: 'Our Blog',
  description: 'Latest news and updates',
  postsPerPage: 12,
  featuredPosts: 3,
};

Documentation Configuration

Documentation is automatically organized by category. Update categories in your markdown frontmatter.

Customization Checklist

Next Steps

Customization Guide - Learn how to customize components
Deployment - Deploy your site
Components Reference - Explore available components

Configuration complete! Your site is ready to customize. 🎨