Quick Start

Clone juju-template to start any new client project. It ships with all pages, components, and integrations wired up — edit two files and replace the dummy data.

---

1. Clone the template

git clone https://github.com/ctrl07/juju-template <client-name>
cd <client-name>
npm install

# Start fresh git history for this client
rm -rf .git
git init
git add .
git commit -m "init: from juju-template"

---

2. Edit src/config/site.ts

This is the only file that drives the entire site identity. Every field here propagates automatically to meta tags, JSON-LD schema, nav, footer, contact form, WhatsApp float button, and canonical URLs.

export const site = {
  name: "Client Business Name",
  domain: "https://clientdomain.com",
  tagline: "Short punchy tagline.",
  contact: {
    email: "hello@clientdomain.com",
    phone: "+91XXXXXXXXXX",
    whatsapp: "+91XXXXXXXXXX",
    address: {
      street: "...",
      city: "Pune",
      state: "Maharashtra",
      pin: "411001",
      country: "IN",
    },
    geo: { lat: "18.5204", lng: "73.8567" },
  },
  ga4: "",          // fill in once client provides G-XXXXXXX
  web3forms: "",    // fill in from web3forms.com
  cashfree: false,  // true only if client needs payments
};

---

3. Pick a theme in src/config/theme.ts

Change the one import line to switch the entire visual identity:

import { darkGreen } from "../themes/dark-green";   // default (jujualpha style)
// import { darkBlue } from "../themes/dark-blue";
// import { darkPurple } from "../themes/dark-purple";
// import { lightNeutral } from "../themes/light-neutral";

export const theme: Theme = darkGreen;

Or create a custom palette — copy src/themes/dark-green.ts, replace the brand color scale (50–950, 11 stops). Use uicolors.app to generate a full scale from a single hex value.

See Theme system for how the build-time CSS injection works.

---

4. Replace dummy content in src/data/

All pages read from these JSON files — no .astro files need touching for content changes.

File	What to replace
pricing.json	Plan names, prices, features
faqs.json	FAQs per page (homepage, webDesign, seo, hosting keys)
about.json	Team members, stats, tools
comparison.json	Comparison table columns and rows
homepage.json	Client logos, process steps

See Data files for the exact JSON shape of each file.

---

5. Update astro.config.mjs

export default defineConfig({
  site: "https://clientdomain.com",  // must match site.ts domain exactly
  // ...
});

---

6. Update public files

• public/robots.txt — update the sitemap URL
• public/_redirects — update the www domain
• public/favicon.svg — replace the placeholder “A” mark with the client’s logo
• public/og-image.jpg — create a 1200×630 social preview image
• public/llms.txt — update with real business description and service URLs

---

7. Swap fonts (if needed)

If staying with Inter + Plus Jakarta Sans, skip this — variable fonts are already in public/fonts/.

If the client has a different typeface:

1. Copy the .woff2 variable font file to public/fonts/
2. Update theme.fonts.sans and theme.fonts.display in the theme file
3. Update --font-sans / --font-display defaults in src/styles/global.css

---

8. Build and verify

npm run build

Should produce a clean output in dist/. If it passes, the site is ready to deploy.

---

9. Deploy to Cloudflare Pages

1. Push to a new GitHub repo
2. Connect in Cloudflare Pages → Create application → Connect to Git
3. Build command: npm run build, output: dist
4. Add both clientdomain.com AND www.clientdomain.com as custom domains
5. Set environment variables if using Cashfree (see Environment variables)

---

10. Post-deploy

• Submit sitemap in Google Search Console
• Submit sitemap in Bing Webmaster Tools (feeds Perplexity + ChatGPT)
• Run node scripts/indexnow.mjs to submit all URLs to Bing/Yandex via IndexNow

---

Minimum viable start

The absolute minimum before a client sees the site:

1. site.ts — name, domain, contact
2. Theme preset selected
3. pricing.json — real prices
4. about.json — real team
5. astro.config.mjs — correct domain
6. npm run build passes

Everything else (GA4, Web3Forms key, real FAQs, OG image) can be filled in before launch.