Archio 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 Archio, a multi-page Astro theme for architecture studios, interior designers and building firms. It pairs a full-screen project slider, scroll-triggered reveals and a filterable portfolio with detailed project case studies, all built from plain .astro components, CSS and small vanilla JavaScript modules. 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

• Pages for Home, About, Services, Work (filterable by category) and Contact, plus nine project case studies, three category pages, and Licensing and Changelog pages
• Projects managed as Markdown in an Astro content collection — add a file and its case-study page, portfolio card, and category listing appear automatically
• GSAP + ScrollTrigger scroll reveals, image reveals, rotating badges, a marquee and a vertical word loop, all respecting prefers-reduced-motion
• Swiper-powered hero fade slider, team and testimonial carousels, and a cross-fading quote slider, plus a video lightbox
• Lottie-animated hamburger and arrow icons via lottie-web
• Accessible by default: skip link, keyboard-operable menu, tabs, sliders and lightbox, labelled form fields, visible focus states
• Per-page title, description, canonical URL, Open Graph and Twitter tags, plus a sitemap from @astrojs/sitemap

Technology Stack

Archio is a plain Astro project — no TypeScript source files, no UI framework, and no CSS preprocessor. Interactivity comes from small vanilla JavaScript modules using these libraries:

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 archio-architecture-astro-package.zip
cd archio-architecture-astro-package/archio-architecture-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 validates the project content collection, renders every route (including each project and category page), bundles and minifies CSS/JS, and writes static output plus sitemap-index.xml 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": "archio-architecture-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.5",
    "gsap": "^3.15.0",
    "lottie-web": "^5.13.0",
    "swiper": "^14.3.0"
  }
}

astro.config.mjs

Controls integrations, the deployed site URL, and build behavior. Archio registers a single integration, @astrojs/sitemap, and keeps the default static output. Set site to your real domain — canonical links, Open Graph image URLs, and the sitemap are all built from it.

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

export default defineConfig({
  // Replace with your production URL. It is used for canonical links, Open Graph images and the sitemap.
  site: "https://example.com",
  integrations: [
    sitemap({
      filter: (page) => !page.includes("/template-info/"),
    }),
  ],
});

content.config.js

Defines the projects content collection: every Markdown file in src/content/projects/ is loaded and its frontmatter validated against this schema. Add a field here before using it in a project file.

const projects = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/projects" }),
  schema: z.object({
    title: z.string(),
    order: z.number(),
    category: z.enum(["Residential", "Commercial", "Hospitality"]),
    estimated: z.string(),
    thumbnail: z.string(),
    image: z.string(),
    video: z.string().optional(),
    address: z.string(),
    client: z.string(),
    type: z.string(),
    location: z.string(),
    services: z.array(z.string()),
    featured: z.boolean().default(false),
    seoTitle: z.string().optional(),
    seoDescription: z.string().optional(),
  }),
});

tsconfig.json

Archio’s source is plain JavaScript, so this file only gives your editor Astro’s type information (including the generated content-collection types). It defines no path aliases — imports use relative paths such as ../components/Navbar.astro.

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

Environment Variables (.env)

Archio doesn’t read any environment variables out of the box, so no .env file is needed. If you add one later for values that differ between environments (API URLs, keys) or shouldn’t be committed to Git, create it 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, which pages ship with Archio, and how project pages are generated.

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. Archio ships these routes:

src/pages/index.astro                   →  /
src/pages/about.astro                   →  /about
src/pages/services.astro                →  /services
src/pages/work.astro                    →  /work  (filterable portfolio)
src/pages/contact.astro                 →  /contact
src/pages/project/[slug].astro          →  /project/:slug  (one per project, dynamic)
src/pages/category/[slug].astro         →  /category/residential | commercial | hospitality
src/pages/template-info/licensing.astro →  /template-info/licensing
src/pages/template-info/changelog.astro →  /template-info/changelog

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:

---
import BaseLayout from "../layouts/BaseLayout.astro";
import EnquiryForm from "../components/EnquiryForm.astro";
---
<BaseLayout title="Careers | Archio" description="Join our studio.">
  <h1 class="page-title">Careers</h1>
  <EnquiryForm variant="contact" />
</BaseLayout>

Editing an Existing Page

Archio’s page files are short — they import BaseLayout and a list of section components. For example, src/pages/index.astro is just HomeHero, HomeAbout, NumberSection, FeaturedWork, Approach, TeamSlider, SingleTestimonial and EnquiryForm. To change a section’s text or images, open its component in src/components/<page>/; to reorder or remove a section, edit the page file.

Dynamic Routes

Files wrapped in square brackets, such as [slug].astro, generate multiple pages from a single template. Archio uses this for project case studies and category listings. Astro requires a getStaticPaths() function for these on statically-generated sites — here is the real one from the project page, which also wires up the previous/next project links:

---
import { render } from "astro:content";
import { getProjects } from "../../lib/projects.js";

export async function getStaticPaths() {
  const projects = await getProjects();
  return projects.map((project, i) => ({
    params: { slug: project.id },
    props: {
      project,
      prev: projects[(i - 1 + projects.length) % projects.length],
      next: projects[(i + 1) % projects.length],
    },
  }));
}
---

A project’s URL slug is its Markdown filename — src/content/projects/costa-blanca.md becomes /project/costa-blanca.

Layouts

Layouts (in src/layouts/) wrap page content with shared structure — the <html> shell, <head> metadata, header, and footer. Every Archio page renders inside BaseLayout.astro via a <slot /> (simplified here):

---
import "../styles/archio.css"; // plus normalize, base-framework, overrides
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
const { title, description, ogImage, navVariant = "dark", noindex = false } = Astro.props;
---
<html lang="en">
  <head><title>{title}</title> <!-- + SEO, fonts, favicon --></head>
  <body>
    <Navbar variant={navVariant} />
    <main id="main">
      <slot /> <!-- page content is injected here -->
    </main>
    <Footer />
  </body>
</html>

Page Metadata & the 404 Page

BaseLayout accepts title, description, ogImage (defaults to /images/og-image.webp), navVariant ("light" for pages with a dark hero, such as Home and About; "dark" otherwise) and noindex. Pass a unique title and description on every page for correct browser tabs and search results (see also SEO). Archio doesn’t ship a custom 404 page — your host’s default is shown. To add one, create src/pages/404.astro; Astro serves 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 Archio component is an .astro file:

Props

Props are the inputs a component accepts, similar to HTML attributes. Archio components read them by destructuring Astro.props with default values — there are no TypeScript interfaces, so the defaults in the frontmatter are the documentation. EnquiryForm is a good example:

---
/**
 * Enquiry form. The "home" variant shows the phone/email links, "contact" shows the rotating star.
 * Set `action` to your form endpoint (Formspree, Netlify Forms, your own API…).
 */
const { variant = "home", action = "#" } = Astro.props;
---

In plain language: variant is optional and switches the side panel between the phone/email links ("home") and a rotating star ("contact"); action is optional and, if omitted, the form runs in demo mode and just shows its success message. Other components with props: Navbar (variant: "light" or "dark") and ProjectCard (project, coverClass, imageAlt).

Component Composition

Larger sections are usually composed from smaller components rather than written as one long block of markup. The category page, for instance, renders a ProjectCard for every project in that category:

{projects.map((project) => (
  <div role="listitem" class="all-projects-collection-item">
    <ProjectCard project={project} coverClass="cream-bg" imageAlt={project.data.title} />
  </div>
))}

Passing Data to Components

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

---
import EnquiryForm from "../components/EnquiryForm.astro";
---
<EnquiryForm variant="contact" action="https://formspree.io/f/your-id" />

Styling

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

Global Styles & CSS Variables

Archio is styled with plain CSS — no Tailwind, no Sass. BaseLayout.astro imports four global stylesheets in this order: normalize.css, base-framework.css (layout and utility classes), archio.css (the theme), and overrides.css (small fixes layered on top). The brand palette and font families are CSS custom properties at the top of src/styles/archio.css. Change a value here and it updates across the whole site.

:root {
  --fonts--body: "Satoshi Variable", sans-serif;
  --colors--body: #616377;
  --colors--heading: #1c203a;
  --colors--white: white;
  --fonts--heading: Outfit, sans-serif;
  --colors--yellow: #e0a211;
  --colors--cream: #fff7ed;
  --colors--black: black;
}

--colors--yellow is the accent used on buttons, the menu button, and highlights; --colors--cream is the warm section background.

Component Styles

Astro components support scoped <style> blocks — CSS written there only applies to that component, so class names never collide across files. Most of Archio’s styling lives in the global stylesheets above, but a few components (HomeHero, NumberSection, Story, CoreValues, SliderArrows) carry small scoped blocks like this one:

<style>
  .arrow-line {
    display: block;
  }
</style>

Responsive Design, Typography & Spacing

The heading and body type scale is set on the element and class selectors in archio.css, with desktop-first breakpoints at max-width: 991px (tablet), 767px (landscape phone), and 479px (phone). Prefer adjusting these shared rules over overriding sizes on individual elements, so the site keeps a consistent rhythm as you edit it.

Images & Assets

Where Archio keeps its static files, and how to swap them for your own.

Archio serves every asset from public/ — there is no src/assets/ folder. Files there are copied to the build output as-is and referenced by root-relative URLs such as /images/og-image.webp.

Replacing Images

Swap the file in place (keeping the same filename) or update the path to point at your new file. In components, images are plain <img> tags; for projects, the paths sit in each Markdown file’s frontmatter:

thumbnail: "/images/projects/thumb-5.webp"    # card on Home, Work, category pages
image: "/images/projects/project-main.webp"    # case-study hero + og:image
video: "/videos/project-film.mp4"            # optional

Supported Formats & SVGs

The demo photos are WebP, and icons and logos are SVG files referenced as plain <img> sources (a few small icons, such as the social links and slider arrows, are inline <svg> markup inside their components). Any format the browser can display — JPEG, PNG, WebP, AVIF, GIF, SVG — works in public/.

Image Optimization

Because the images live in public/, the build does not resize or re-encode them. Compress and size your replacements before adding them (WebP at roughly the dimensions of the image you’re replacing is a good target). If you want build-time optimization, you can move an image into src/ and render it with Astro’s <Image /> component from astro:assets instead.

Fonts & Icons

Swapping typefaces and icon sets without touching every component.

Google Fonts

Archio uses two typefaces: Outfit for headings (--fonts--heading) and Satoshi for body text (--fonts--body). Outfit is loaded from Google Fonts by a <link> tag in the shared layout’s <head>. To change it, replace that link with your chosen font’s embed code, then update --fonts--heading in archio.css. A few rules in archio.css name Outfit, sans-serif directly instead of using the variable, so search the file for Outfit as well.

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

Local Fonts

Satoshi (from Fontshare) is self-hosted as a variable font in public/fonts/Satoshi-Variable.ttf, declared with @font-face at the top of archio.css, and preloaded from BaseLayout. To swap it, drop your font file into public/fonts/, update the src URL and family name here, and change the <link rel="preload"> path in the layout:

@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

Archio doesn’t use an icon library or icon components. Its icons come in three forms:

• SVG files in public/images/ (e.g. Interior-Design.svg, Awards.svg, Star.svg, Quote.svg), referenced with <img> tags.
• Inline <svg> markup for small UI icons such as the social links, slider arrows, and close buttons, written directly in their components.
• Lottie animations in public/documents/ for the animated hamburger and arrow icons, loaded by src/scripts/lottie.js into any element carrying a data-lottie="/documents/…json" attribute.

Replacing & Adding Icons

To replace an SVG icon, overwrite the file in public/images/ with the same name, or point the <img src> at a new file. Inline SVGs can be swapped by pasting new <svg> markup into the component. To change a Lottie animation, export a new JSON file (e.g. from LottieFiles), place it in public/documents/, and update the data-lottie path.

Content Editing

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

Headings, Paragraphs & Buttons

Page text lives in the section components, not the page files. Find the section in src/components/<page>/, locate the text between the tags, and edit it directly. Keep the existing class attributes — classes like slide-in-from-bottom-100ms drive the scroll-reveal animation:

<!-- before -->
<h1 class="page-title white-font-color slide-in-from-bottom-100ms">Crafting exquisite architectural and interior designs</h1>

<!-- after -->
<h1 class="page-title white-font-color slide-in-from-bottom-100ms">Designing calm, light-filled homes</h1>

Navigation & Footer

Header menu links are a small links array at the top of src/components/Navbar.astro. Footer link columns and social icons are written directly in src/components/Footer.astro. See Navigation for the full pattern.

Sliders, Team & Testimonials

Repeating content blocks are driven by an array at the top of their component rather than hand-written per card, so adding or removing an item is a matter of editing the list. The arrays are slides in home/HomeHero.astro, team in TeamSlider.astro, testimonials in home/SingleTestimonial.astro and services/Testimonials.astro, and values in about/CoreValues.astro:

const team = [
  { name: "Phoenix Smith", role: "CEO & Head Architect", image: "/images/1.webp" },
  { name: "Peter Smith", role: "Project Manager", image: "/images/4.webp" },
  { name: "Sofia Woods", role: "Interior Designer", image: "/images/2.webp" },
  { name: "Anthony Green", role: "Senior Architect", image: "/images/3.webp" },
];

Projects & Contact Information

Archio has no blog; its long-form content is the project case studies. Each one is a Markdown file in src/content/projects/ — edit the frontmatter (title, category, client, location, images, featured, order) and the body directly, or copy a file to add a new project. Its case-study page, portfolio card, and category listing appear automatically. The first six projects with featured: true appear in the home page’s featured work, and order sets their position in every list.

The placeholder contact details (hello@example.com, phone numbers, social links) are repeated in a few components, so update each of them: Navbar.astro (header and slide-in menu), contact/ContactHero.astro, EnquiryForm.astro (the “home” variant’s phone/email links), and Footer.astro (social icons).

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. The same array feeds both the header links and the slide-in menu, and the current page is highlighted automatically (project pages highlight “Work”):

const links = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
  { href: "/services", label: "Services" },
  { href: "/work", label: "Work" },
  { href: "/contact", label: "Contact" },
];

The navbar has two color variants, set per page through BaseLayout’s navVariant prop: "light" (white logo and links, for dark heroes) and "dark" (the default).

Mobile Menu & Dropdown Menus

The slide-in menu, opened by the animated hamburger button, is plain HTML plus a vanilla <script> at the bottom of src/components/Navbar.astro. It uses GSAP to animate the panel and overlay and src/scripts/lottie.js to play the hamburger icon, and it handles aria-expanded, Escape-to-close, and focus. Archio has no dropdown menus.

Footer Navigation

Footer link columns (pages, services, and the License / Changelog / “Built with Astro” links), social icons, and the copyright line are written directly in src/components/Footer.astro — edit the <a> tags there.

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

The enquiry form (src/components/EnquiryForm.astro) appears on the Home and Contact pages and collects first and last name, email, phone number, service, budget, and a message. To connect it, pass your endpoint as the action prop wherever the form is used; the form then submits as a normal POST to that URL:

<!-- before: demo mode -->
<EnquiryForm variant="contact" />

<!-- after: real submissions -->
<EnquiryForm variant="contact" action="https://formspree.io/f/your-id" />

Do the same in src/pages/index.astro for the home page form. The “Service looking for” and “Budget” dropdowns ship with placeholder options (“First choice”, “Second choice”…); edit the <option> tags in EnquiryForm.astro to match your services and price bands.

Newsletter Forms

Archio doesn’t include a newsletter signup form, so no email provider is pre-wired. If you add one, a provider’s embedded form (Mailchimp, ConvertKit, etc.) can be pasted into any component.

Form Validation

Required fields and email format are checked in the browser before submission using standard HTML attributes (required, type="email", maxlength), giving users immediate feedback without a round trip to a server. Validate again on whatever service receives the submission.

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

Archio fetches no data from an external API — all content is local. The examples below only apply if you add one.

API Configuration

If you connect 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

Archio’s one structured data type is a project entry. Each item returned by getProjects() has an id (the filename, used as the URL slug), a body (the Markdown content, rendered with render() from astro:content), and a data object with the fields defined in src/content.config.js (see Configuration):

{
  id: "classic-villa",
  data: {
    title: "Classic Villa", order: 5, category: "Residential",
    estimated: "Est. 2019 — 20", thumbnail: "/images/projects/thumb-5.webp",
    image: "/images/projects/project-main.webp", video: "/videos/project-film.mp4",
    address: "123 Design Avenue, Springfield, USA", client: "John Carter",
    type: "Luxury Villa", location: "New York, NY",
    services: ["Architecture", "Interior", "Planning"],
    featured: true, seoTitle: "…", seoDescription: "…"
  }
}

If you replace the Markdown files with data from a headless CMS, have getProjects() map its response onto this same shape so the pages and components that read project.data keep working. The project page renders Markdown bodies with render(), so it needs adjusting if your CMS returns HTML instead.

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 the layout on every page — these drive both the browser tab and the snippet shown in search results. The home page passes none, so it falls back to the defaults in BaseLayout.astro; project pages use each project’s seoTitle and seoDescription frontmatter.

<BaseLayout
  title="About | Archio"
  description="Crafting exquisite architectural and interior designs"
  ogImage="/images/story-image_1.webp"
  navVariant="light"
>

Canonical URL, Open Graph & Twitter/X Cards

Set inside BaseLayout’s <head>, using the site value from astro.config.mjs to build absolute URLs. The og:image defaults to /images/og-image.webp and can be overridden per page with the ogImage prop:

---
const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url);
const ogImageUrl = new URL(ogImage, 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={ogImageUrl} />
<meta name="twitter:card" content="summary_large_image" />
{noindex && <meta name="robots" content="noindex" />}

Sitemap & Robots.txt

Archio uses Astro’s official @astrojs/sitemap integration, which generates sitemap-index.xml automatically at build time from the site value. The /template-info/ pages are filtered out of the sitemap and also carry a noindex tag. No robots.txt ships with the template — to add one, create public/robots.txt pointing to the sitemap:

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. Archio’s layout already provides these landmarks (plus a skip link to <main id="main">), and every inner page has one <h1>. The home page has no <h1> — its hero slider titles are styled text — so consider adding one (it can be visually hidden) with your studio’s name and specialty. No JSON-LD structured data ships with the template; add it in BaseLayout’s <head> for rich results (e.g. Organization or LocalBusiness schema for your studio) where relevant.

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. If you’ve added a .env file, add its variables under Project Settings → Environment Variables (Archio needs none by default).
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

For a static build, upload the contents of dist/ to your host’s public web root via FTP/SFTP or your host’s file manager. If you later switch to an SSR build that needs a Node process, the host must support running node continuously (a VPS or a Node-compatible host) — plain shared hosting without Node support cannot run it.

Build & Production

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

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

Build Output

The build writes static HTML for every page (including one per project and per category), hashed CSS/JS bundles, the sitemap, and a copy of everything in public/ to dist/. This folder is disposable and regenerated by every build — Archio’s .gitignore already keeps it out of Git.

Environment Variables in Production

Archio needs no environment variables out of the box. 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 a .env file, set each of its variables in your hosting platform’s dashboard.
• Pass a real action endpoint to both <EnquiryForm> usages (Home and Contact) so the form stops running in demo mode.
• Replace the placeholder hello@example.com, phone numbers, and social links in the Navbar, Contact hero, Enquiry form, and Footer.
• Verify favicon (public/images/favicon.png), Open Graph image (public/images/og-image.webp), and the default title/description in BaseLayout.astro are your own, not the template defaults.
• Replace the demo photos and project film, and decide whether to keep the /template-info/ Licensing and Changelog pages and their footer links.

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