How to deploy a static HTML in SvelteKit

SvelteKit is great for rapidly building dynamic web apps, but you can also use it as a static site generator (SSG) for building static HTML sites.

Here are the steps to turn SvelteKit into a static site generator. If you haven't set up your SvelteKit project yet, you might want to read How to install SvelteKit first.

First, you'll need to install adapter-static:

npm i -D @sveltejs/adapter-static

In your root project directory, navigate to svelte.config.js. If you haven't done any changes to it yet, it should look like this:

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;

Now replace the adapter-auto with adapter-static:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;

You also need to add the prerender option to your src/routes/+layout.js If you don't have such a file in your directory, create a new one.

export const prerender = true;

That's it! Now you can run build and preview your site.

npm run build && npm run preview

Your generated static files will be located in build/ directory.

For additional settings and exceptions, see the official documentation.

How to deploy a static HTML in SvelteKit

Use SvelteKit as a static site generator