Home / Docs / Static Sites (SSG)
Getting Started / SSG

Static Site Generation (SSG) & Deployments

Deploy blazing-fast, 100% static websites with pre-rendered SEO, zero-FOUC theming, and no server maintenance using @sveltejs/adapter-static.

⚡ Zero Server Cost & Maximum Speed

Yaxa is 100% compatible with static site generators. All components, animations, theme stores, and SEO meta tags compile directly into static .html files that can be hosted on any CDN (Cloudflare Pages, GitHub Pages, Vercel Static, Netlify, or S3).

1

Install @sveltejs/adapter-static

Add SvelteKit's official static adapter to your dev dependencies:

Terminal
bash
pnpm add -D @sveltejs/adapter-static
2

Configure Adapter in `vite.config.ts`

Replace any server adapter with adapter-static:

vite.config.ts
typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import adapter from '@sveltejs/adapter-static';
export default defineConfig({
plugins: [
tailwindcss(),
sveltekit({
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: undefined, // Set to '404.html' for SPA fallback if needed
precompress: true
})
})
]
});
3

Enable Global Prerendering in `src/routes/+layout.ts`

Create or edit src/routes/+layout.ts to instruct SvelteKit to pre-render every page into static HTML during pnpm build:

src/routes/+layout.ts
typescript
// src/routes/+layout.ts
export const prerender = true;
export const ssr = true;
Static SEO

Pre-rendering Robots, Sitemap & SVG OpenGraph Cards

Because Yaxa's dynamic Open Graph generator creates lightweight inline SVGs instead of requiring heavy headless browsers, your social preview cards can be statically generated at build time too:

src/routes/api/og/+server.ts
typescript
// src/routes/api/og/+server.ts
import { createOgImageHandler } from 'yaxa-svelte';
import { siteConfig } from '../../site.config';
// Mark the SVG OG route as prerenderable
export const prerender = true;
export const GET = createOgImageHandler({ config: siteConfig });

Deployment Recipes

Cloudflare Pages

Connect your GitHub repo to Cloudflare Pages with zero configuration:

Cloudflare Dashboard
text
# Cloudflare Pages Build Settings
Build command: pnpm build
Build output dir: build
Node.js Version: >=20

GitHub Pages (Actions)

Push to GitHub and deploy automatically with GitHub Actions:

.github/workflows/deploy.yml
yaml
# .github/workflows/deploy.yml (GitHub Pages)
name: Deploy Static Site
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
permissions:
pages: write
id-token: write
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: 'pnpm'
- run: pnpm install --frozen-lockfile
- run: pnpm build
- uses: actions/upload-pages-artifact@v3
with:
path: build/
- uses: actions/deploy-pages@v4

Static Site (SSG) vs. Full-Stack SaaS Mode

FeatureStatic Site (SSG)Full-Stack SaaS
Hosting Cost100% Free on CDNsServerless / Node.js Server
Time to First Byte (TTFB)Instant (Edge CDN cached)Fast (Server rendered)
Theme & Dark ModeZero-FOUC (pre-hydration script)Zero-FOUC (SSR + pre-hydration script)
Database & AuthClient-only / External APIBuilt-in Better-Auth & Drizzle
Sitemap & RobotsPre-rendered at build timeGenerated dynamically via hooks