How to customize your SaaS site

The fastest way to misuse a template is to start by rewriting every component. RicoFast is built so the first ninety percent of the work is editing three places: a config file, a CSS variables block, and your content directory.

This post walks through each.

1. Site configuration - src/config/site.js

This is the single source of truth for your brand identity. Page titles, metadata, footer links, social links, and contact details should flow through this file.

export const siteConfig = {
  title: "Your SaaS",
  author: "Your Team",
  url: "https://your-domain.com",
  mail: "hello@your-domain.com",
  meta: {
    title: "Your SaaS - One-line value proposition",
    description: "A clear, specific description of what your product does.",
    keywords: "your, target, keywords",
    image: "/og.jpg",
  },
  social: {
    twitter: "https://x.com/your-handle",
    github: "https://github.com/your-org/your-repo",
  },
};

Set PUBLIC_SITE_URL in .env once you have a domain. The sitemap, RSS feed, and canonical URLs all read from it.

2. Design tokens - src/styles/global.css

The template is colored through a small set of design tokens. To rebrand the site, change these once and let the rest of the UI follow:

@theme {
  --color-primary: #2d6dc3;        /* your brand color */
  --color-primary-strong: #0066ff; /* hover/emphasis */
  --color-accent: #fad13b;         /* badges, highlights */
  --color-bg-primary: #fdfaf5;     /* page canvas */
  --font-brand: "Instrument Serif", serif;
  --font-sans: "Inter", sans-serif;
}

The full token set is documented in docs/DESIGN.md. Do not introduce ad-hoc colors inside components unless you are intentionally extending the design system.

3. Content - src/content/

Blog posts and changelog entries live in src/content/post/ and src/content/changelog/ as MDX files. The frontmatter schema is defined in src/content.config.js:

---
title: "Your post title"
description: "One-sentence summary for cards and metadata"
publishDate: 2026-05-18
read: 7
tags: ["Guide"]
img: "/posts/your-image.jpg"
img_alt: "Description for accessibility"
featured: false
---

featured: true pins a post at the top of /blog. The body is plain Markdown plus any Astro component you choose to import.

What about the pages themselves?

Section content such as Hero copy, Feature cards, Pricing tiers, and FAQ items lives inside each page file as plain JavaScript arrays. For example, src/pages/index.astro includes the homepage content near the top of the file.

That is intentional. Most SaaS teams change marketing copy often, and going through a CMS for two-line edits can slow the work down. Treat the page files as your content source until you actually need a CMS.

Five-minute checklist

When you clone the template, work through this in order:

1. Update src/config/site.js - title, email, social links, and metadata
2. Update src/styles/global.css - primary color, accent color, and typography tokens
3. Edit src/pages/index.astro - Hero copy, feature arrays, pricing copy, and FAQ
4. Replace public/og.jpg with your own social card (1200x630)
5. Replace the logo asset or update src/components/ui/Logo.astro

That is enough to deploy. Refine the rest as you go.

Deploying

The build is fully static (pnpm build outputs dist/). Any static host works:

Host	Setup
Vercel	Connect repo, framework preset = Astro
Netlify	Connect repo, build = pnpm build, publish = dist
Cloudflare Pages	Connect repo, build = pnpm build, output = dist
GitHub Pages	Use a GitHub Actions workflow that builds Astro and publishes dist

That is it. From clone to live in under thirty minutes if you do not get distracted by the color picker.