> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleap.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Self Hosting

> Deploy your app to your own infrastructure

Kleap provides built-in hosting by default (your site goes live automatically at
`https://your-app.kleap.io`). But you own your code — it's a standard **Astro**
project, so you can build it and host it anywhere that serves static or edge sites.

<Info>
  Self-hosting means hosting the static Astro build. Features backed by Kleap
  services — **Kleap Database**, **KleapForm** submissions, and built-in user
  accounts — are provided by Kleap. If your site uses them, keeping the site on
  Kleap Hosting is simplest; self-hosted copies would need those services to stay
  reachable.
</Info>

## Getting Your Code

### Export to GitHub

1. Connect GitHub in settings
2. Push your code to a repository
3. Clone the repository locally

```bash theme={null}
git clone https://github.com/you/your-app.git
cd your-app
```

### Download ZIP

1. Go to **Settings** > **Export**
2. Click **Download ZIP**
3. Extract and open in your editor

## Running Locally

### Prerequisites

* Node.js 18.20.8+ (or 20+/22+)
* npm or pnpm

### Setup

```bash theme={null}
npm install
npm run dev
```

Visit `http://localhost:4321` (Astro's default dev port).

### Build for Production

Astro outputs a static site to the `dist/` folder:

```bash theme={null}
npm run build      # builds to ./dist
npm run preview    # preview the production build locally
```

## Hosting Options

Any static or edge host works. Point it at the `dist/` output.

### Cloudflare Pages

1. Connect your GitHub repo
2. Build command: `npm run build`
3. Output directory: `dist`

### Netlify

```toml theme={null}
[build]
  command = "npm run build"
  publish = "dist"
```

### Vercel

1. Import the GitHub repo
2. Vercel auto-detects Astro
3. Output directory: `dist`

### Static Host / VPS

`dist/` is plain static files — serve it with Nginx, Caddy, an S3 bucket +
CDN, GitHub Pages, or any static host.

```dockerfile theme={null}
# Simple static container
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html
EXPOSE 80
```

## Environment Variables

Astro exposes variables prefixed with `PUBLIC_` to the browser via
`import.meta.env`. If your site calls any external service, set its variables in
your hosting platform:

```bash theme={null}
PUBLIC_SOME_SERVICE_URL=https://...
```

<Warning>
  Never commit `.env` files. Add them to `.gitignore` and configure secrets in
  your hosting platform.
</Warning>

## Custom Domains

### On Kleap Hosting

If you stay on Kleap, point your domain with an **A record** to Kleap's proxy:

```
A record  @    178.104.71.55
```

Use an **A record on the root/apex domain** (root domains can't use CNAME), keep
Cloudflare DNS in **DNS-only** mode if you use Cloudflare, and Kleap issues SSL
automatically. You can also buy a domain directly in-app.

### On Your Own Host

Most platforms support custom domains from their dashboard:

1. Add the domain in your host's dashboard
2. Configure DNS per that host's instructions (A record for root, CNAME for subdomains)
3. SSL is usually automatic

## CI/CD Setup

### GitHub Actions

```yaml theme={null}
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      # Add a step to publish ./dist to your platform
```

## Monitoring

### Analytics

Add analytics by including their script in your base layout:

* **Plausible** - Privacy-focused
* **Google Analytics** - Comprehensive
* **PostHog** - Product analytics

### Uptime Monitoring

* **UptimeRobot** - Free monitoring
* **Pingdom** - Professional monitoring
* **Better Uptime** - Status pages

## Performance

A static Astro build is already fast — it ships HTML with minimal JavaScript
(React only hydrates the interactive islands). To go further:

* Put a **CDN** in front of your static host (Cloudflare, CloudFront, Fastly)
* Keep images optimized and lazy-loaded
* Limit interactive islands to what actually needs them

## Comparison

| Platform              | Ease | Cost      | Control |
| --------------------- | ---- | --------- | ------- |
| **Kleap Hosting**     | ⭐⭐⭐  | Included  | Low     |
| **Cloudflare Pages**  | ⭐⭐⭐  | Free tier | Medium  |
| **Netlify**           | ⭐⭐⭐  | Free tier | Medium  |
| **Static host / VPS** | ⭐    | \$        | Full    |

## Troubleshooting

<AccordionGroup>
  <Accordion title="Build fails">
    * Check the Node.js version (18.20.8+, or 20+/22+)
    * Verify all dependencies install (`npm ci`)
    * Check any required environment variables are set
    * Review build logs for the specific error
  </Accordion>

  <Accordion title="Pages 404 on my host">
    * Make sure the publish/output directory is set to `dist`
    * Serve `dist/` at the site root, not a subfolder
    * Check your host supports clean URLs for static files
  </Accordion>

  <Accordion title="Kleap features stopped working">
    * Forms, Kleap Database, and accounts are Kleap-backed services
    * Self-hosted copies need those services to remain reachable, or you'll need
      to replace them
    * Keeping the site on Kleap Hosting avoids this entirely
  </Accordion>
</AccordionGroup>

<Card title="Publishing with Kleap" icon="rocket" href="/features/publishing">
  The easiest deployment option
</Card>