Static Svelte Site Generator

A lightweight static site generator using Svelte 5 + Vite that creates multi-page sites with shared components and optimized caching.

Getting Started

npm install          # Install dependencies
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build locally

How It Works

When you add a page to src/pages, a corresponding *.html page will be added to the dist directory when you run npm run build. You can then serve the contents of the dist folder on any static web server.

A custom Vite plugin looks for *.svelte files in src/pages. For each page found:

• The plugin generates a *.html file that mounts the corresponding Svelte component
• The *.html file is based on the template found at src/template.html
• Components/assets outside the src/pages directory are reused between pages (enabling browser caching)
• Temporary HTML files generated in the project root are automatically cleaned up after build

Project Structure

src/
  pages/           # Each .svelte file here becomes a separate HTML page
  lib/             # Shared components used across pages
  template.html    # HTML template for all pages
  app.css          # Global styles
plugins/
  generate-pages.ts  # Custom Vite plugin for page generation
dist/              # Production build output (generated)

Development Workflow

• Hot Module Replacement: Changes to .svelte, .ts, and .css files update instantly in the browser
• Adding New Pages: When you add a new .svelte file to src/pages/, restart the dev server to generate its HTML entry point
• Shared Components: Create reusable components in src/lib/ and import them into your pages

Deployment

Simply deploy the dist/ folder to any static hosting service:

• GitHub Pages
• Netlify
• Vercel
• Any web server that serves static files

The build outputs fully static HTML, CSS, and JavaScript with no server-side requirements.