Fortuno 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 Fortuno, a multi-page marketing theme for finance, investment, and consulting businesses, built with Astro. 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.

What’s Included

Features

• Five fully responsive pages — Home, About, Services, Careers, and Contact — sharing one navbar and footer
• Animated hero slider and a looping services carousel, built with Swiper and GSAP
• Scroll-in reveal animations you control with utility classes such as fade-in-200-ms or slide-in-from-bottom-300-ms
• Accessible tabs, an accordion, a YouTube video modal, logo marquees, and a slide-over mobile menu
• Per-page SEO: title, description, canonical URL, Open Graph and Twitter/X tags, plus an automatic sitemap
• Plain CSS with design tokens — no UI framework, no Tailwind — and motion that respects prefers-reduced-motion

Technology Stack

Fortuno is a static Astro site with no UI framework. Everything it depends on:

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.
3. Open that folder in your terminal and in your code editor.

# Extract on macOS / Linux
unzip fortuno-astro.zip -d fortuno-astro
cd fortuno-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 Vite’s local dev server 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 bundles and minifies assets, writes static HTML for every page to dist/, and generates sitemap-index.xml. 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": "fortuno-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.2",
    "gsap": "^3.15.0",
    "swiper": "^14.2.0"
  }
}

astro.config.mjs

Controls integrations, the deployed site URL, and build behavior. Fortuno registers only the sitemap integration and uses Astro’s default static output. Set site to your real domain — canonical URLs, Open Graph tags, and the sitemap are all built from it.

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

// Set `site` to your deployed URL so canonical/OG URLs and the sitemap are absolute.
export default defineConfig({
  site: 'https://example.com',
  integrations: [sitemap()],
});

tsconfig.json

Fortuno’s code is plain JavaScript inside .astro files. tsconfig.json only extends Astro’s strict preset so your editor gets accurate hints; it defines no path aliases, so imports use relative paths such as ../components/Navbar.astro.

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

Environment Variables (.env)

Fortuno doesn’t read any environment variables, so there’s nothing to set out of the box. If you add values that differ between environments (API URLs, keys) or shouldn’t be committed to Git, put them in 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 each page is assembled from section components.

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. Fortuno ships five pages:

src/pages/index.astro    →  /
src/pages/about.astro    →  /about
src/pages/service.astro  →  /service
src/pages/careers.astro  →  /careers
src/pages/contact.astro  →  /contact

To add a page, create a new file in src/pages/ using an existing page as a starting point. Every page wraps its sections in BaseLayout and a <main> element, and can reuse any section component:

---
import BaseLayout from '../layouts/BaseLayout.astro';
import GetInTouch from '../components/home/GetInTouch.astro';
---
<BaseLayout
  title="Pricing"
  description="Plans for every stage of your business."
>
  <main>
    <h1>Pricing</h1>
    <GetInTouch />
  </main>
</BaseLayout>

Add the new page to the links array in src/components/Navbar.astro (and to the footer, if you want it there) so visitors can reach it — see Navigation.

Editing an Existing Page

Page files in src/pages/ are short: they set the page’s title, description, and social image, then list its sections. The actual text and images live in the section components under src/components/<page>/ (for example src/components/home/HomeHero.astro) — open those to change what a page says. Shared pieces such as Testimonial.astro are edited once and update every page that uses them.

Dynamic Routes

Fortuno doesn’t use dynamic routes — all five pages are individual files. If you add something like a blog, files wrapped in square brackets, such as [slug].astro, generate multiple pages from a single template. 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

Fortuno has a single layout, src/layouts/BaseLayout.astro. It imports the global stylesheet, renders the <head> (SEO tags, favicon, fonts), the navbar and footer, and starts the scroll-reveal and link-underline scripts. Each page’s content is injected at the <slot />. Abridged:

---
import '../styles/global.css';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';

const {
  title = 'Fortuno - Finance & Consulting Astro Theme',
  description = 'Champion of finance industry.',
  image = '/images/Our-Mission-Image_1Our-Mission-Image.webp',
  navDark = false,
} = Astro.props;
---
<html lang="en">
  <head><title>{title}</title> <!-- + meta, canonical, OG/Twitter, fonts --></head>
  <body>
    <Navbar dark={navDark} />
    <slot /> <!-- page content is injected here -->
    <Footer />
  </body>
</html>

Page Metadata & the 404 Page

Pass a title, description, and optional image into BaseLayout on every page for correct browser tabs, search results, and social previews (see also SEO). The Careers page also passes navDark, which switches the navbar to its dark logo and links for the light hero background. Fortuno doesn’t include a 404 page; add a file named 404.astro to src/pages/ 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 so it can be reused across pages without copy-pasting markup. Every component in Fortuno is an .astro file — there are no React or other framework components. They fall into two groups:

• Shared components (top level): Navbar, Footer, Testimonial, TrustedBy (logo marquee), PlayButton (YouTube video modal), MissionWidget, and ArrowIcon.
• Section components, one folder per page: home/, about/, service/, careers/, and contact/ — for example home/HomeHero.astro or contact/ContactForm.astro.

Props

Props are the inputs a component accepts, similar to HTML attributes. Fortuno’s components are plain JavaScript, so props are read from Astro.props with a default value for each — no TypeScript interfaces. For example, PlayButton:

---
// Play button that opens a YouTube video in a modal dialog.
const { videoId = 'r233kDWShkA', label = 'Play video' } = Astro.props;
---

In plain language: videoId is the YouTube video to play and label is the accessible name screen readers announce for the button. Both are optional — leave one out and the default after the = is used. The components that accept props:

Component Composition

Pages are composed from section components rather than written as one long block of markup. The home page, in full:

<BaseLayout
  title="Fortuno - Finance & Consulting Astro Theme"
  description="Champion of finance industry."
  image="/images/Our-Mission-Image_1Our-Mission-Image.webp"
>
  <main>
    <HomeHero />
    <HomeAbout />
    <NumberSection />
    <IndustriesTabs />
    <Features />
    <AccordionSection />
    <Testimonial />
    <GetInTouch />
  </main>
</BaseLayout>

Reorder, remove, or reuse sections by editing that list. Components can also nest: Testimonial renders a PlayButton and, by default, a TrustedBy marquee.

Passing Data to Components

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

---
import PlayButton from '../PlayButton.astro';
import Testimonial from '../Testimonial.astro';
---
<PlayButton videoId="YOUR_YOUTUBE_ID" label="Play company video" />
<Testimonial trustedBy={false} />

Styling

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

Global Styles & CSS Variables

Fortuno uses plain CSS. BaseLayout imports src/styles/global.css, which loads four stylesheets in order: normalize.css (reset), base-framework.css (containers, grid, nav, tabs, and button basics), fortuno.css (the theme: colors, typography, and every section), and site.css (the interactive pieces — sliders, accordion, video modal, mobile menu).

Site-wide colors, fonts, and section spacing are defined once as CSS custom properties in the :root block at the top of src/styles/fortuno.css. Change a value there and it updates across the whole site. The main tokens:

:root {
  --fonts--body: "Satoshi Variable", sans-serif;
  --fonts--heading: Outfit, sans-serif;
  --colors--heading: #1a1d39;
  --colors--body: #616377;
  --colors--blue: #0b88e2;
  --colors--dark-blue: #08317e;
  --colors--light-blue: #ecf6ff;
  --colors--green: #00a57d;
  --colors--red: #ff4e44;
  --section-spacing--desktop: 120px;
  --section-spacing--tab: 100px;
  --section-spacing--mobile: 90px;
}

Component Styles

Fortuno keeps its styles in the global stylesheets above rather than in per-component blocks, so look up a component’s class names in fortuno.css or site.css to restyle it. For components you add yourself, Astro supports scoped <style> blocks — CSS written there only applies to that component, so class names never collide across files.

<style>
  .card { color: var(--colors--heading); padding: 2rem; }
</style>

Responsive Design, Typography & Spacing

Styles are desktop-first, with responsive overrides in @media screen and (max-width: …) blocks at 991px (tablet — the navbar switches to the slide-over menu), 767px (landscape phone), and 479px (portrait phone). Headings use Outfit and body text uses Satoshi through the --fonts--* tokens, and vertical section padding comes from the --section-spacing--* tokens. Prefer adjusting these shared values over overriding sizes on individual elements, so the site keeps a consistent rhythm as you edit it.

Images & Assets

Where Fortuno keeps its images, and how to swap them.

Replacing Images

The quickest route is to overwrite the file in public/images/ with your own, keeping the same filename. Otherwise, add your file there and update the path in the component. Images are plain <img> tags; keep the srcset/sizes attributes in sync with the new file (or remove them) and write a meaningful alt:

<img
  src="/images/Home-About-Image_1Home-About-Image.webp"
  srcset="/images/Home-About-Image_1Home-About-Image.webp 1234w"
  sizes="(max-width: 767px) 79vw, (max-width: 991px) 70vw, 50vw"
  loading="lazy"
  alt="Advisor meeting with a client"
  class="home-about-image"
/>

Repeated images such as hero slides, service icons, and client logos are listed in data arrays at the top of their component — see Content Editing. Social preview images are set per page through BaseLayout’s image prop.

Supported Formats & SVGs

Fortuno ships WebP photos, SVG icons and logos, and a few PNGs (favicon, web clip, the rotating circular badge text). Any format the browser supports works in an <img> tag. Small UI icons (arrows, phone, social links) are inline <svg> markup using currentColor, so they follow the text color; larger illustrations are SVG files referenced as <img> sources.

Image Optimization

Files in public/ are not processed by the build, so compress replacement images yourself before adding them (WebP at a sensible width, as the demo images are). If you’d rather let Astro do it, move an image into src/assets/, import it, and render it with the Image component from astro:assets — it’s then resized and re-encoded at build time.

Fonts & Icons

Swapping typefaces and icon sets without touching every component.

Google Fonts

Headings use Outfit, loaded from Google Fonts in BaseLayout’s <head>. To change it, replace the stylesheet link with your chosen font’s embed code, then update --fonts--heading in src/styles/fortuno.css:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
/>

Local Fonts

Body text uses Satoshi, self-hosted as a single variable font at public/fonts/Satoshi-Variable.ttf. It’s declared with @font-face at the top of src/styles/fortuno.css and preloaded in BaseLayout. To swap it, add your font file to public/fonts/, update the @font-face rule and the <link rel="preload"> path, then point --fonts--body at the new family:

@font-face {
  font-family: Satoshi Variable;
  src: url('/fonts/Satoshi-Variable.ttf') format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

Icon Libraries

Fortuno doesn’t use an icon library. Icons come in two forms: small UI icons (the phone, email, and social icons, slider arrows, the menu close button) are inline <svg> markup inside the components that use them, and the animated “Learn More” arrow is its own component, src/components/ArrowIcon.astro. Larger illustrative icons, such as the service card icons, are SVG files in public/images/.

Replacing & Adding Icons

To replace an inline icon, paste your SVG over the existing <svg> element, keep its width/height, and use fill="currentColor" or stroke="currentColor" so it keeps following the link’s color and hover state. For file-based icons, overwrite the SVG in public/images/ or add a new file and update the icon path in the component’s data array (for example, the services array in src/components/home/HomeAbout.astro).

Content Editing

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

Headings, Paragraphs & Buttons

Text lives in the section components, not in the page files. Find the section under src/components/<page>/ (for example home/HomeAbout.astro for the home page’s “Welcome” block), locate the text between the tags, and edit it directly. Buttons are ordinary links styled with classes:

<!-- before -->
<h2 class="h2">Welcome to Fortuno Finance Company</h2>
<a href="/about" class="button-primary large w-button">Learn More</a>

<!-- after -->
<h2 class="h2">Welcome to Riverside Wealth Partners</h2>
<a href="/contact" class="button-primary large w-button">Book a call</a>

Navigation & Footer

Header links are the links array in src/components/Navbar.astro; footer link columns are written directly in src/components/Footer.astro. Both components are shared by every page, so each change is made once. See Navigation for details.

Cards, Testimonials & Pricing

Repeated items are driven by a data array in the component’s frontmatter (between the --- lines), so adding, removing, or editing an item is a matter of editing the list. The home page’s services carousel, for example:

const services = [
  {
    href: '/service#Finance-Planning',
    icon: '/images/Banking-Loans-and-Services.svg',
    tag: 'Financial Planning',
    tagColor: 'bg-color-blue-light',
    title: 'Banking Loans and Services',
    text: 'Providing banking products and services such as savings accounts, loans, credit cards, and investment opportunities.',
  },
  // …four more services
];

The other data arrays: slides in home/HomeHero.astro (hero slides), values in about/CoreValues.astro (the rotating core values), rowOne/rowTwo in TrustedBy.astro (client logos), and links in Navbar.astro. Everything else — testimonials, team members, open positions, FAQs — is written directly in the section’s markup.

Blog Content & Contact Information

Fortuno doesn’t include a blog. Contact details are written directly into the markup in three components, so update each of them:

• src/components/Navbar.astro — header phone number (1234-567-890).
• src/components/Footer.astro — consultation phone number and email (hello@example.com), plus the “Connect” social links.
• src/components/contact/ContactForm.astro — address and map link, phone (1800-123-1234), emails (hello@example.com, help@example.com), and social icons.

All people, companies, phone numbers, and addresses in the demo content are placeholders, and every email uses example.com.

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 the navbar component, so adding, removing, or reordering a link doesn’t require touching markup. The current page’s link is highlighted automatically:

const links = [
  { href: '/', label: 'Home' },
  { href: '/about', label: 'About' },
  { href: '/service', label: 'Services' },
  { href: '/careers', label: 'Careers' },
  { href: '/contact', label: 'Contact' },
];

The phone number and the “Inquire with us” button on the right of the navbar are written in the same file’s markup.

Mobile Menu & Dropdown Menus

At 991px and below the links move into a slide-over menu. It’s driven by a plain <script> inside src/components/Navbar.astro (no React): the hamburger button slides the panel in from the right over a fading overlay using GSAP, and the menu closes via its × button, a click on the overlay, or the Escape key. The menu uses the same links array as the desktop bar. Fortuno has no dropdown menus.

Footer Navigation

The footer’s four link columns — Services, Industries, Pages, and Connect (social links) — are written directly as markup in src/components/Footer.astro, not as an array. Edit each link’s label and href in place. The Services and Industries links point at anchors on the Services page, such as /service#Finance-Planning.

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 — Fortuno’s existing social and map links already follow this pattern:

<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

The form lives in src/components/contact/ContactForm.astro and collects first and last name, phone, email, profession, the service needed, and a message. To make it live, add an action attribute pointing at your endpoint and change method to post. The component’s script only fakes the success message when the form has no action, so once one is set the browser submits to it normally:

<!-- before -->
<form id="contact-form" name="contact-form" method="get" class="contact-form" data-contact-form>

<!-- after -->
<form id="contact-form" name="contact-form" method="post"
  action="https://your-form-endpoint.example" class="contact-form" data-contact-form>

The two dropdowns (“Your Profession” and “Need service for”) contain demo options (Option One to Option Three); replace them with your own <option> values.

Newsletter Forms

Fortuno doesn’t include a newsletter form. If you add one, the same approach applies: point its action at your email provider’s signup endpoint or embed code.

Form Validation

Validation uses standard HTML attributes, so the browser checks fields before submitting and gives immediate feedback without a round trip to a server. First name, phone, email, and message are required; the email field uses type="email", the phone field type="tel"; and every field has a maxlength. There’s no custom validation script.

Third-Party Form Services

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

API & Data

Fortuno doesn’t fetch data from any API — this section only applies if you add an external data source.

API Configuration

API URLs and keys are read from environment variables (see Configuration) rather than hard-coded, 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

Fortuno defines no API data shapes. The closest equivalents are the frontmatter data arrays: services in home/HomeAbout.astro uses the fields href, icon, tag, tagColor, title, and text, and slides in home/HomeHero.astro uses tag, title, tags, image, and width. If you move content to an API or CMS, return data in the same shape and those components will render it unchanged.

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 at the top of every page — these drive both the browser tab and the snippet shown in search results. image sets the social preview image:

<BaseLayout
  title="Service"
  description="Finance and business consulting agency"
  image="/images/Our-Mission-Image-1_1Our-Mission-Image-1.webp"
>

The demo titles and descriptions are short placeholders (“Service”, “Careers”, “Contact”) — rewrite them for your business before launch.

Canonical URL, Open Graph & Twitter/X Cards

Already set up in BaseLayout’s <head>, using the site value from astro.config.mjs to build absolute URLs. You don’t need to edit this — just set site and pass the page props:

---
const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url);
const ogImage = new URL(image, Astro.site ?? Astro.url);
---
<link rel="canonical" href={canonical} />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImage} />

Sitemap & Robots.txt

Fortuno includes Astro’s official sitemap integration (@astrojs/sitemap), which generates sitemap-index.xml automatically at build time from the site value. No robots.txt is included; to add one, create public/robots.txt pointing at the sitemap on your domain:

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

Structured Data & Semantic HTML

Use landmark elements (<header>, <nav>, <main>, <article>) and a single <h1> per page so both search engines and screen readers can parse the page’s structure. Every Fortuno page wraps its sections in <main>, and the navbar is a labelled <nav>. No JSON-LD structured data is included; add it to BaseLayout’s <head> for rich results (e.g. Organization or FinancialService schema) if it suits your content.

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. Fortuno needs no environment variables. If you’ve added some, set them under Project Settings → Environment Variables, and make sure the project’s Node.js version is 22.x.
5. Click Deploy.

Netlify

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

[build.environment]
  NODE_VERSION = "22"

Fortuno doesn’t ship a netlify.toml; add the file above to the project root, or enter the same settings in the dashboard. Connect the repository in Netlify, confirm the build settings, add any environment variables you’ve introduced 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, and set a NODE_VERSION environment variable of 22. Fortuno is static, so no adapter is needed.

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

Run npm run build locally, then upload the contents of dist/ to your host’s public web root via FTP/SFTP or your host’s file manager. Because Fortuno is fully static, any plain shared host can serve it — no Node.js process is needed on the server.

Build & Production

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

npm run build     # bundle, write dist/, and generate the sitemap
npm run preview   # serve dist/ locally, exactly as it will run in production

Build Output

The build writes one static HTML file per page, hashed CSS/JS bundles, sitemap-index.xml, and a copy of everything in public/ to dist/. This folder is disposable and regenerated by every build; Fortuno’s .gitignore already keeps it out of Git.

Environment Variables in Production

Fortuno uses none by default. 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.
• Replace https://example.com as the site URL in astro.config.mjs with your real domain.
• Give the contact form a real action endpoint (see Forms).
• Replace the placeholder phone numbers, example.com emails, address, and social links (see Content Editing).
• Swap the favicon (public/images/favicon.png), Apple touch icon (webclip.png), demo photos, and each page’s title, description, and social image for your own.
• Point the PlayButton videos at your own YouTube IDs.
• Set any environment variables you’ve added in your hosting platform’s dashboard.

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