Paydesk Documentation

Introduction

Everything you need to know before you open your editor — what’s in the box, what it’s built with, and what it expects from your machine.

Welcome

Thanks for picking up Paydesk. This guide walks through installing the template, understanding how the project is organized, customizing content and styling, and shipping it to production. It’s written for developers who are comfortable with the command line but new to this specific codebase — if you already know Astro well, feel free to skip ahead using the sidebar.

Paydesk is a clean, conversion-focused landing page template for billing, invoicing, and payment SaaS products. It ships a full one-page marketing site plus login and signup pages, with smooth GSAP scroll-reveal animations, a monthly/yearly pricing switch, accessible accordions, and a responsive mobile menu.

What’s Included

Features

• Five pages: Home, Login, Signup, Changelog, and License
• Home page sections: hero with email capture, feature rows, use cases, feature grid, integrations, “Why Paydesk” accordion, pricing with a monthly/yearly toggle, FAQ, reviews with an infinite logo marquee, call-to-action, and a footer with a newsletter form
• Scroll reveals, sticky navbar, pricing switch, accordions, and logo marquee animated with GSAP + ScrollTrigger — all respect prefers-reduced-motion
• Accessible markup: semantic landmarks, one h1 per page, keyboard-operable menu, tabs, and accordions, and visible focus states
• Fast static output with responsive images optimized by astro:assets, self-hosted fonts, and no jQuery
• SEO-ready: per-page titles and descriptions, Open Graph/Twitter tags, canonical URLs, and an automatic sitemap via @astrojs/sitemap

Technology Stack

Paydesk is built with Astro and plain CSS, with GSAP for animation. There is no UI framework, no TypeScript, and no CSS preprocessor — components are .astro files and browser scripts are plain JavaScript.

Requirements

Browser Support

The built site targets the last two versions of all evergreen browsers:

Getting Started

From a downloaded ZIP to a running dev server in five steps.

Installation & Extraction

1. Download the template ZIP from your purchase confirmation email or account downloads page.
2. Extract it to a folder on your machine — avoid folder names with spaces or special characters. The ZIP contains a paydesk-astro-package/ folder holding the project folder paydesk-astro/ and a documentation.txt file.
3. Open the paydesk-astro/ folder in your terminal and in your code editor.

# Extract on macOS / Linux
unzip paydesk-astro-package.zip
cd paydesk-astro-package/paydesk-astro

Node.js Setup

Check which version of Node.js is currently active:

node --version
# v22.12.0 or later

If you manage multiple Node versions, tools like nvm or fnm make switching painless:

nvm install 22
nvm use 22

Install Dependencies

From the project root, install packages with your preferred package manager:

npm install

pnpm install

yarn install

This reads package.json and downloads every dependency into a local node_modules/ folder. It only needs to be re-run when dependencies change.

Run the Development Server

npm run dev

pnpm dev

This starts Astro’s local dev server (powered by Vite) with hot module reloading — edits to components, pages, and styles appear in the browser immediately without a manual refresh. By default it’s available at http://localhost:4321; the terminal output will confirm the exact address.

Build for Production & Preview

# Compile an optimized production build into dist/
npm run build

# Serve that build locally to sanity-check it
npm run preview

build renders every page to static HTML, bundles and minifies CSS and JavaScript, optimizes images, generates the sitemap, and writes everything to dist/. preview serves that exact output locally so you can verify it before deploying — it does not rebuild automatically, so re-run build after further changes.

Project Structure

A tour of the folders you’ll actually touch, and the ones you generally shouldn’t.

Configuration

The files that control how the project builds, and where to set site-wide values.

package.json

Defines dependencies and the scripts you run from the terminal (dev, build, preview). Add your own script here if you introduce a new tool.

{
  "name": "paydesk-astro",
  "type": "module",
  "version": "0.0.1",
  "engines": {
    "node": ">=22.12.0"
  },
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/sitemap": "^3.7.4",
    "astro": "^7.3.4",
    "gsap": "^3.15.0"
  }
}

astro.config.mjs

Controls integrations, the deployed site URL, and build behavior. Paydesk registers only the sitemap integration and renders fully static output (Astro’s default). Replace site with your production URL — it is used for canonical URLs, Open Graph image URLs, and the generated sitemap.

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

// Replace `site` with your production URL — it is used for canonical URLs,
// Open Graph image URLs and the generated sitemap.
export default defineConfig({
  site: 'https://example.com',
  integrations: [sitemap()],
});

jsconfig.json

Paydesk is written in plain JavaScript, so instead of a tsconfig.json it ships a small jsconfig.json that extends Astro’s base settings for editor autocomplete. No path aliases are defined — imports use relative paths such as ../components/Navbar.astro.

{
  "extends": "astro/tsconfigs/base",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

Environment Variables (.env)

Paydesk doesn’t read any environment variables out of the box. If you add values that differ between environments (API URLs, keys) or shouldn’t be committed to Git, create a .env file in the project root. Variables must be prefixed PUBLIC_ to be readable in client-side code.

# Exposed to the browser — never put secrets here
PUBLIC_SITE_URL=https://example.com

# Server-only — safe for secrets, not readable in browser code
API_SECRET_KEY=your_secret_key

Pages

How routes are created, and how Paydesk’s five pages are put together.

Creating a New Page

Astro uses file-based routing: any .astro or .md file placed in src/pages/ automatically becomes a route matching its file path. Paydesk ships these routes:

src/pages/index.astro      →  /           (one-page marketing site)
src/pages/login.astro      →  /login
src/pages/signup.astro     →  /signup
src/pages/changelog.astro  →  /changelog
src/pages/license.astro    →  /license    (image and font credits)

To add a page, create a new file in src/pages/ using the layout and structure of an existing, similar page as a starting point. The changelog and license pages are a good model for a simple content page:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import TemplatePageHeader from '../components/TemplatePageHeader.astro';
import Footer from '../components/Footer.astro';
---
<BaseLayout title="About | Paydesk" description="Who we are and why we built Paydesk.">
  <TemplatePageHeader title="About" subtitle="Who we are and why we built Paydesk." />
  <main>
    <!-- page content -->
  </main>
  <Footer />
</BaseLayout>

Editing an Existing Page

Open the relevant file under src/pages/ and edit the markup directly. The home page (index.astro) is only a list of section components — Hero, Benefits, UseCases, MoreFeatures, Integrations, WhyPaydesk, Pricing, Faq, Reviews, and Cta — so its text lives in those files under src/components/. Reorder or remove a section by moving or deleting its tag in index.astro.

Dynamic Routes

Paydesk doesn’t include any dynamic routes. If you add one, files wrapped in square brackets, such as [slug].astro, generate multiple pages from a single template — commonly used for blog posts or product pages. Astro requires a getStaticPaths() function for these on statically-generated sites:

---
export async function getStaticPaths() {
  const posts = await import.meta.glob('./posts/*.md');
  return Object.keys(posts).map((path) => ({
    params: { slug: path.split('/').pop().replace('.md', '') },
  }));
}
---

Layouts

Paydesk has a single layout, src/layouts/BaseLayout.astro. It provides the <html> shell, the <head> metadata, font preloads, and the global stylesheets, and renders the page through a <slot />. The navbar and footer are not part of the layout — each page includes the Navbar, Footer, or TemplatePageHeader components it needs, which is why the login and signup pages can show a stripped-down navbar and no footer. A simplified view of the layout:

---
import '../styles/normalize.css';
import '../styles/base-framework.css';
import '../styles/paydesk.css';
import '../styles/site.css';
import defaultOgImage from '../assets/images/Hero-Image.webp';

const {
  title = 'Paydesk — Online Billing and Payment Platform',
  description = 'Online Billing and Payment Platform. ...',
  bodyClass = 'main-body',
  ogImage: ogImageAsset = defaultOgImage,
} = Astro.props;
---
<html lang="en">
  <head>
    <title>{title}</title>
    <!-- description, canonical, Open Graph, Twitter, favicons, font preloads -->
  </head>
  <body class={bodyClass}>
    <slot /> <!-- page content is injected here -->
  </body>
</html>

Page Metadata & the 404 Page

Pass a title and description (and optionally an ogImage) into BaseLayout on every page for correct browser tabs and search results (see also SEO); pages that omit them fall back to the defaults above. Paydesk doesn’t ship a custom 404 page — create src/pages/404.astro and Astro will serve it automatically whenever no route matches.

Components

The building blocks pages are assembled from, and how data flows into them.

Reusable Components

Components live in src/components/ and encapsulate one piece of UI — a page section, a form, the navigation bar — so it can be reused across pages without copy-pasting markup. Every component in Paydesk is an .astro file:

Props

Props are the inputs a component accepts, similar to HTML attributes. Paydesk is plain JavaScript, so there are no TypeScript interfaces — instead, each component reads its props from Astro.props with default values, and documents them in a comment at the top of the file. For example, CheckList:

---
/**
 * Check-mark bullet list.
 *  items:        array of strings
 *  class:        extra classes for the wrapper (e.g. "justify-space-between")
 *  itemClass:    extra classes per item (e.g. "use-case-point")
 *  checkClass:   extra classes for the check badge (e.g. "yellow")
 */
const { items = [], class: className, itemClass, checkClass } = Astro.props;
---

In plain language: items is the list of strings to show, and defaults to an empty list if omitted; the three class props are optional and only add extra styling hooks. Because there is no type checking, a misspelled prop name is silently ignored — check the comment at the top of the component if something doesn’t render as expected.

Component Composition

Larger sections are composed from smaller components rather than written as one long block of markup. The FAQ section, for example, passes its questions to the shared Accordion and drops an AnimatedLink into the accordion’s slot:

<Accordion items={faqs} class="faq-accordions" id="faq">
  <div class="faq-contact-link-wrapper">
    <div class="body---variant-1 body-color">Still have questions? Please connect with our</div>
    <AnimatedLink href="mailto:support@example.com">Support Team</AnimatedLink>
  </div>
</Accordion>

Passing Data to Components

In Astro, props are passed the same way as HTML attributes and read via Astro.props:

---
import AnnouncementBar from '../components/AnnouncementBar.astro';
---
<AnnouncementBar label="New" href="/signup" text="Try Paydesk free for 30 days" />

Styling

Where to change colors, type, and spacing without fighting the build.

Global Styles & CSS Variables

Paydesk uses plain CSS — no Tailwind or Sass. The brand palette is defined once as CSS custom properties at the top of src/styles/paydesk.css and referenced throughout the stylesheet. Change a value here and it updates across the whole site:

:root {
  --heading: #1c1e30;       /* headings and dark text */
  --body: #494c65;          /* body copy */
  --white: white;
  --green: #01a66b;         /* primary brand / accent color */
  --blue-light: #e6eeff;    /* soft section backgrounds */
  --purple-light: #f0e8fd;
  --orange-light: #fceeed;
  --green-lite: #e6f7f1;
}

The stylesheets are loaded in this order by BaseLayout, so later files win: normalize.css (browser reset) → base-framework.css (base layout and utility classes) → paydesk.css (all theme and section styles) → site.css (behaviour styles for the mobile menu, accordions, tabs, and scroll-reveal states). Most visual edits belong in paydesk.css.

Component Styles

Paydesk’s components don’t use scoped styles — all styling lives in the global stylesheets above and is applied through class names such as pricing-section or btn bg-color-green. If you add a new component, you can still use an Astro scoped <style> block — CSS written there only applies to that component, so class names never collide across files.

<style>
  .card { color: var(--heading); border-radius: 0.5rem; }
</style>

Responsive Design, Typography & Spacing

Responsive rules in paydesk.css use these breakpoints: max-width: 991px (tablet), 767px (mobile landscape), 479px (mobile portrait), and min-width: 1280px (large desktop). Type styles are reusable classes — h1–h6, display-and-page-title, body, and the body-variant-* classes — plus body---variant-1 — so prefer editing those shared classes over overriding sizes on individual elements, and the site keeps a consistent rhythm as you edit it.

Images & Assets

Two homes for static files, and when to use each.

Replacing Images

Swap the file in place (keeping the same filename) or update the import/path to point at your new file. The hero image, for example, is imported at the top of src/components/Hero.astro:

---
import { Image } from 'astro:assets';
import heroImage from '../assets/images/Hero-Image.webp';
---
<Image
  src={heroImage}
  alt="Paydesk dashboard showing invoices and payment activity"
  widths={[500, 800, 1080, 1600, 2000]}
  sizes="(max-width: 479px) 87vw, ..., 1055px"
  loading="eager"
/>

SVGs in public/images/ are plain <img> tags — replace the file with one of the same name, or change the src (e.g. /images/Logo.svg in Navbar.astro). Hero-Image.webp is also the default social-share (Open Graph) image; see SEO.

Supported Formats & SVGs

JPEG, PNG, WebP, AVIF, and GIF are supported through the optimized Image component. In Paydesk, most SVGs are referenced as plain <img> sources from public/images/; icons that need to be styled with CSS (the social icons and “Why Paydesk” icons) are inline SVG components in src/components/icons/.

Image Optimization

Images imported from src/assets/ are automatically resized and re-encoded at build time based on the width/height (or densities/widths) you specify — you generally don’t need a separate compression step before adding an image to the project.

Fonts & Icons

Swapping typefaces and icon sets without touching every component.

Google Fonts

Paydesk doesn’t load anything from Google Fonts or any other font CDN — all fonts are self-hosted (see below), so the site makes no third-party font requests. If you want to switch to a Google Font, add its <link> tags to the <head> in BaseLayout.astro and update the font-family declarations in paydesk.css:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Local Fonts

Paydesk uses two typefaces: Onest (Medium and Bold) and Satoshi (Medium). The font files live in public/fonts/ (Onest-Medium.ttf, Onest-Bold.ttf, Satoshi-Medium.woff) and are declared with @font-face at the bottom of src/styles/paydesk.css:

@font-face {
  font-family: 'Onest Medium';
  src: url('/fonts/Onest-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

Each weight is registered as its own family name ('Onest Medium', 'Onest Bold', 'Satoshi Medium'), and the theme refers to those names directly in its font-family rules. To swap a typeface, replace the file in public/fonts/, update its @font-face rule, and update the matching font-family references in paydesk.css. BaseLayout.astro also preloads Onest-Medium.ttf and Satoshi-Medium.woff — update those <link rel="preload"> tags if you rename the files.

Icon Libraries

Paydesk doesn’t use an icon library package. Icons come from three places:

• SVG files in public/images/ (feature icons, check marks, arrows, star ratings), used as <img> tags.
• Inline SVG components in src/components/icons/: FacebookIcon, InstagramIcon, PinterestIcon, TwitterIcon, and WhyIcon1–WhyIcon3.
• A tiny embedded icon font, paydesk-icons, defined at the top of src/styles/base-framework.css for a few framework UI glyphs.

Replacing & Adding Icons

To replace an image-based icon, overwrite the SVG in public/images/ or point the component’s src at a new file. To add an inline icon that can be colored with CSS, create a new .astro file in src/components/icons/ containing the <svg> markup, then import it like any other component — the existing social icons in Footer.astro show the pattern.

Content Editing

The fastest, lowest-risk way to make the site say what you want it to say.

Headings, Paragraphs & Buttons

Home page text lives in the section components under src/components/ (the page file itself only lists the sections). Open the component, locate the text between the tags, and edit it directly — for example, the hero headline in Hero.astro:

<!-- before -->
<span class="display-and-page-title">Online Billing</span>
...
<p class="body-variant-3">Join with 5600+ User and grow your business online</p>

<!-- after -->
<span class="display-and-page-title">Smarter Invoicing</span>
...
<p class="body-variant-3">Trusted by 10,000+ freelancers and finance teams</p>

The announcement strip text is a prop default in AnnouncementBar.astro, and the default page title and description are set in BaseLayout.astro.

Navigation & Footer

Menu links are a links array at the top of src/components/Navbar.astro; footer link columns, social links, and the bottom “template” links are arrays at the top of src/components/Footer.astro. Edit the label and URL once there rather than hunting through every page. See Navigation for the full pattern.

Cards, Testimonials & Pricing

Repeating content blocks are driven by a data array at the top of each component rather than hand-written per card, so adding or removing an item is a matter of editing the list. Reviews live in Reviews.astro, pricing plans in Pricing.astro, FAQs in Faq.astro, and feature lists in Benefits.astro, UseCases.astro, MoreFeatures.astro, and Cta.astro:

const plans = [
  { name: 'Starter', caption: 'For the professionals', monthly: 19, yearly: 59 },
  { name: 'Agency', caption: 'For the professionals', monthly: 59, yearly: 99, recommended: true },
  { name: 'Ultimate', caption: 'For the professionals', monthly: 99, yearly: 199 },
];

Review avatars are imported images at the top of Reviews.astro; customer logos for the marquee are in the logos array in LogoMarquee.astro.

Blog Content & Contact Information

Paydesk doesn’t include a blog. Contact details appear in a few places, each edited directly in its component: the company address, social links, and copyright line in src/components/Footer.astro, and the “Support Team” email link (mailto:support@example.com) in src/components/Faq.astro. The changelog entries are an array in src/pages/changelog.astro, and image/font credits are in src/pages/license.astro.

Navigation

Header, mobile menu, and footer links, in one predictable place.

Header Navigation

Primary nav links are defined as a small array at the top of src/components/Navbar.astro, so adding, removing, or reordering a link doesn’t require touching markup. Each id is the anchor of a home page section; on other pages the links automatically become /#id so they jump back to the home page:

const links = [
  { id: 'Feature', label: 'Features' },
  { id: 'Why-Paydesk', label: 'Why Paydesk?' },
  { id: 'Pricing', label: 'Pricing' },
  { id: 'FAQs', label: 'Faqs' },
  { id: 'Reviews', label: 'Reviews' },
];

The Login and Signup buttons are written directly in the navbar markup. The navbar also highlights the link of the section currently in view (scroll-spy). On the home page a second, variant="fixed" copy of the navbar slides down once you start scrolling; the login and signup pages pass showLinks={false} to hide the section links.

Mobile Menu & Dropdown Menus

Below 991px the links collapse into a drawer that slides in from the right. It’s driven by a vanilla <script> (using GSAP) inside src/components/Navbar.astro — there is no React island. The drawer closes on link click, overlay click, or the Escape key, and the menu button keeps aria-expanded in sync. Paydesk has no dropdown menus.

Footer Navigation

Footer link groups follow the same data-driven pattern in src/components/Footer.astro: a columns array (“Quick links” and “Products”), a socials array, and a templateLinks array for the Changelog and License Info links in the bottom row. The “Products” links point to # as placeholders — replace them with your own URLs.

Internal vs. External Links

Internal links should be root-relative (/about, not the full domain) so they keep working across environments. External links should open safely in a new tab:

<a href="/about">About</a>
<a href="https://partner-site.com" target="_blank" rel="noopener noreferrer">Partner</a>

Forms

What ships out of the box, and what still needs a backend.

Contact Forms

Paydesk has no dedicated contact form. Its forms are the email signup form (SignupForm.astro, used in the hero and CTA), the login and signup forms (AuthForm.astro), and the footer newsletter form (Footer.astro). All of them use the same demo pattern: action="#" plus a data-demo-form attribute, which src/scripts/forms.js intercepts to show the success message instead of submitting:

<!-- before: demo mode -->
<form name={`${id}-form`} method="post" action="#" class="form" data-demo-form>

<!-- after: submits to your endpoint -->
<form name={`${id}-form`} method="post" action="https://formspree.io/f/your-form-id" class="form">

To connect a real backend, set each form’s action to your endpoint (Formspree, Netlify Forms, an API route, …) and remove the data-demo-form attribute. The “Continue with Google” button on the login/signup pages is a placeholder link (href="#") with no authentication behind it.

Newsletter Forms

The footer “Subscribe Newsletter” form in src/components/Footer.astro isn’t pre-wired to any email provider. Point its action at your provider’s form endpoint (e.g. a Mailchimp or ConvertKit embed URL) and remove data-demo-form; you may also need to rename the email input to match the field name your provider expects.

Form Validation

Required fields and email format are checked in the browser before submission using standard HTML attributes (required, type="email", maxlength="256"), giving users immediate feedback without a round trip to a server. There is no custom validation script.

Third-Party Form Services

If you’d rather not run your own backend, services like Formspree, Getform, or Basin accept form submissions directly from static HTML and forward them to your email — typically a one-line change to the form’s action attribute.

API & Data

Only relevant if your template fetches data from an external source — skip this section otherwise.

API Configuration

If you add an API, read its URLs and keys from environment variables (see Configuration) rather than hard-coding them, so the same code can point at a staging or production API depending on environment:

PUBLIC_API_URL=https://example.com/api
PUBLIC_API_KEY=your_api_key

Fetch Requests

const res = await fetch(`${import.meta.env.PUBLIC_API_URL}/products`, {
  headers: { Authorization: `Bearer ${import.meta.env.PUBLIC_API_KEY}` },
});
const data = await res.json();

Data Structures

Paydesk’s content data is plain JavaScript arrays of objects inside each component. If you replace one with API data, keep the same shape so the markup keeps working — for example, each entry in the reviews array in Reviews.astro has title, text, name, and avatar (an imported image), and each plan in Pricing.astro has name, caption, monthly, yearly, and an optional recommended flag.

Error Handling

try {
  const res = await fetch(apiUrl);
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  const data = await res.json();
} catch (err) {
  // show a fallback UI state instead of a blank page
  console.error(err);
}

SEO

Per-page metadata, social previews, and the machine-readable files search engines expect.

Page Title & Meta Description

Pass a unique title and description into BaseLayout on every page — these drive both the browser tab and the snippet shown in search results. The home page uses the layout’s defaults; the other pages set their own, for example:

<BaseLayout
  title="Login | Paydesk"
  description="Register an account to start your free trial"
  ogImage={formImage}
>

Canonical URL, Open Graph & Twitter/X Cards

Set inside BaseLayout.astro’s <head>, using the site value from astro.config.mjs to build absolute URLs. The social image is generated at build time from the page’s ogImage prop (a 1200px-wide PNG), defaulting to src/assets/images/Hero-Image.webp:

const canonical = new URL(Astro.url.pathname, Astro.site);
const ogImage = await getImage({ src: ogImageAsset, format: 'png', width: 1200 });
const ogImageUrl = new URL(ogImage.src, Astro.site);
---
<link rel="canonical" href={canonical} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImageUrl} />
<meta name="twitter:card" content="summary_large_image" />

Sitemap & Robots.txt

Paydesk includes Astro’s official sitemap integration (@astrojs/sitemap), which generates sitemap-index.xml automatically at build time from the site value, and BaseLayout links to it. No robots.txt ships with the template — to add one, create public/robots.txt pointing at your sitemap:

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

Structured Data & Semantic HTML

Paydesk already uses landmark elements (<header>, <nav>, <main>, <footer>) and a single <h1> per page so both search engines and screen readers can parse each page’s structure — keep that pattern when you add sections. No JSON-LD structured data is included; add it in BaseLayout’s <head> for rich results (e.g. Organization or SoftwareApplication schema) where relevant to your product.

Deployment

Platform-by-platform steps. Confirm your rendering mode first — it changes the build output you deploy.

Vercel

1. Push the project to a GitHub, GitLab, or Bitbucket repository.
2. In Vercel, choose Add New → Project and import that repository.
3. Build command: npm run build · Output directory: dist (Astro static) — Vercel’s Astro preset detects this automatically in most cases.
4. Paydesk needs no environment variables; if you’ve added any to a .env file, set them under Project Settings → Environment Variables.
5. Click Deploy.

Netlify

[build]
  command = "npm run build"
  publish = "dist"

Connect the repository in the Netlify dashboard, confirm these build settings, add environment variables under Site configuration → Environment variables, and deploy.

Cloudflare Pages

Connect the repository, set the build command to npm run build and the output directory to dist. For SSR Astro sites, use the official @astrojs/cloudflare adapter instead of the static preset.

GitHub Pages

Set site and base in astro.config.mjs to match your repository URL, then build and publish the dist/ folder to the gh-pages branch (via the official astro build + a deploy action, or manually). GitHub Pages only serves static output — it cannot run an SSR adapter.

Traditional Hosting

Because Paydesk is static, upload the contents of dist/ to your host’s public web root via FTP/SFTP or your host’s file manager — any plain shared host works. Only if you later switch to an SSR build would the host need to run node continuously (a VPS or a Node-compatible host).

Build & Production

What happens when you run build, and a checklist before you ship.

npm run build     # render pages, bundle assets, and write dist/
npm run preview   # serve dist/ locally, exactly as it will run in production

Build Output

The build writes one static HTML file per route, hashed CSS/JS bundles (including GSAP), optimized responsive images, the social-share PNGs, and sitemap-index.xml to dist/. This folder is disposable and regenerated by every build — Paydesk’s .gitignore already keeps it out of Git.

Environment Variables in Production

Paydesk itself needs no environment variables. If you add some, remember that variables from your local .env are not deployed automatically — each hosting platform requires you to set them again in its dashboard (see Deployment). A missing production variable is one of the most common causes of a build that works locally but fails, or behaves unexpectedly, once deployed.

Production Checklist

• Run npm run build locally and confirm it completes with no errors.
• Run npm run preview and click through the main pages.
• Confirm the site URL in astro.config.mjs matches your real domain.
• If you added environment variables, set each one in your hosting platform’s dashboard.
• Point every form’s action at a real endpoint and remove data-demo-form (see Forms).
• Replace the placeholder address and social links in Footer.astro, the support@example.com link in Faq.astro, and the # “Products” footer links.
• Verify favicon, Open Graph image, and meta descriptions are your own, not the template defaults.

Troubleshooting

The most common problems, in the order you’re likely to hit them.

FAQ

Quick answers to the questions we hear most.

Changelog

Every notable change, newest first. Add a new entry above the last one for each release.

Support

Stuck on something this guide didn’t cover? Here’s how to reach us.

What to Include in a Support Request

The fastest way to get a useful answer is to include the details below in your first message:

When contacting support, please include:

- Template name and version
- Browser (and version)
- Operating system
- Node.js version (node --version)
- The exact error message
- Steps to reproduce the problem