How to customize your SaaS site

The fastest way to misuse a template is to start by rewriting every component. The RicoFast template 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. Everything from page titles to OG images to footer links flows 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 whole template is colored through a small set of CSS custom properties. To rebrand, change these once and the rest of the site follows:

@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;
}

There are about thirty tokens total — they’re all listed in docs/DESIGN.md with their roles. Don’t introduce ad-hoc colors in components; extend the token system if you genuinely need a new value.

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 OG meta"
publishDate: 2026-05-18
read: 7
tags: ["Guide"]
img: "/posts/your-image.jpg"
img_alt: "Description for accessibility"
featured: false
---

featured: true will pin the post at the top of /blog. The body is plain Markdown plus any Astro component you want to import.

What about the pages themselves?

Section content (Hero copy, Feature cards, Pricing tiers, FAQ items) lives inside each page file as plain JS arrays — for example, src/pages/index.astro has a features array, a useCases array, and a faqItems array right at the top.

This is intentional: most SaaS sites change their marketing copy every few weeks, and going through a CMS for two-line edits is friction. Treat the page files as your content source.

Five-minute checklist

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

1. Update src/config/site.js — title, mail, social links
2. Update src/styles/global.css — primary color, accent color
3. Edit src/pages/index.astro — Hero copy, Features array, FAQ array
4. Replace public/og.jpg with your own social card (1200×630)
5. Drop your logo into src/components/ui/Logo.astro

That’s 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 @astrojs/upgrade workflow

That’s it. From clone to live in under thirty minutes if you don’t get distracted by the color picker.