Skip to content

Deployment

Ardo produces a fully static site out of the box. When you run pnpm build, React Router prerenders every page to static HTML (via prerender: true in your react-router.config.ts), so no server is needed at runtime.

The build output is located in build/client/ and can be deployed to any static hosting provider.

GitHub Pages

Step 1: Configure Base Path and Basename

Ardo automatically detects your GitHub repository name from the git remote and sets Vite's base path for you. No manual base configuration is needed in vite.config.ts.

For client-side routing to work correctly under the subdirectory (e.g. https://username.github.io/my-docs/), add basename to your react-router.config.ts:

import type { Config } from "@react-router/dev/config"
import { detectGitHubBasename } from "ardo/vite"

export default {
  ssr: false,
  prerender: true,
  basename: detectGitHubBasename(),
} satisfies Config

detectGitHubBasename() returns "/repo-name/" when a GitHub remote is detected, or undefined otherwise — so it's safe to leave in place for all environments.

TIP

The build output is automatically flattened by Ardo. When basename creates nested directories like build/client/repo-name/, the plugin moves files back to build/client/ so GitHub Pages serves them correctly. No post-build script is needed.

If you deploy to the root (https://username.github.io/), no configuration is needed — both base and basename will remain at their defaults.

Step 2: Add a GitHub Actions Workflow

Create .github/workflows/deploy.yml in your repository:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "22"
          cache: "pnpm"

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build
        run: pnpm build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: build/client

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 3: Enable GitHub Pages

In your repository settings, go to Pages and set the source to GitHub Actions.

Push to main and the workflow will build and deploy your site automatically.

TIP

Projects scaffolded with pnpm create ardo@latest include this workflow out of the box.

Netlify

Netlify requires no workflow file. Connect your Git repository in the Netlify dashboard and configure:

  • Build command: pnpm build
  • Publish directory: build/client

Netlify automatically detects the Node.js version from your package.json engines field or an .nvmrc file.

For subdirectory deployments, set base in vite.config.ts as described above.

Vercel

Connect your Git repository in the Vercel dashboard and configure:

  • Build command: pnpm build
  • Output directory: build/client
  • Framework preset: Other

Vercel handles routing and CDN configuration automatically.

Other Providers

Since Ardo outputs plain static files to build/client/, it works with any static hosting provider (Cloudflare Pages, AWS S3 + CloudFront, Firebase Hosting, etc.). Use pnpm build as the build command and build/client as the output directory.