How To Build a Static Site With SvelteKit

Static sites have become increasingly popular due to their speed, security, and simplicity. When it comes to building static sites, several tools and frameworks are available, but one that’s gaining rapid traction is SvelteKit.

This guide takes you through the journey of creating a static site with SvelteKit, from setup to deployment with Kinsta’s Static Site Hosting, for free.

SvelteKit static site demo
SvelteKit static site demo.

What Is SvelteKit?

SvelteKit is a robust web framework designed for crafting user interfaces, including static sites. It’s known for its performance, simplicity, and the ability to create components with a declarative approach.

SvelteKit extends the capabilities of the Svelte framework by adding routing, server-side rendering, and more.

Getting Started With SvelteKit

To follow along with this guide, we assume you have:

To build your new SvelteKit application, follow the steps below.

  1. Scaffold a new project by executing:
npm create svelte@latest my-app

This command scaffolds a new project in the my-app directory, asking to configure some basic tooling, such as TypeScript. Ensure you choose the Skeleton project option and change my-app to the preferred name for your project.

  1. Navigate into the project directory and install its dependencies:
cd my-app
npm install
  1. Execute npm run dev to start the local development server on localhost:5173.
SvelteKit skeleton site
SvelteKit skeleton site.