Simple Website with SvelteKit

Are you looking to build a fast, lightweight, and modern personal website with minimal setup? SvelteKit offers a refreshing developer experience and excellent performance out of the box.

Svelte is a JavaScript framework for building user interfaces. Unlike traditional frameworks, it shifts most of the work to compile time, producing highly optimized JavaScript that runs in the browser without using a virtual DOM. You write components using a clean, reactive syntax, and Svelte compiles them into efficient, minimal JavaScript.

SvelteKit, on the other hand, is a full-stack application framework built on top of Svelte. It provides everything needed to build production-grade web apps including routing, server-side rendering (SSR), API endpoints, data loading, and deployment tools. While Svelte handles the UI components, SvelteKit manages the entire app structure and runtime behavior.

This guide walks you through creating a very simple SvelteKit site from setup to deployment preview.

Project Goal

Create a basic personal site with the following:

Home page

About page

Contact form (no backend, just an alert message)

Simple layout and navigation

Step 1: Prerequisites

Before starting, ensure you have the following installed on your system:
Install Node.js (version 18 or newer is recommended)

To check your version:

node -v

If not installed, you can install it using your package manager or via nvm:

Using apt (Ubuntu)

sudo apt install nodejs npm

using nvm (recommended)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 18

Step 2: Create a SvelteKit Project

Run the following command to create a new SvelteKit project where simpleesvelt is the name of the website:

$ npx sv create simpleesvelt

Then follow the guideline bellow:

┌  Welcome to the Svelte CLI! (v0.8.10)
│
◇  Which template would you like?
│  ❯ SvelteKit minimal       ← (Select this)
│    SvelteKit demo
│    SvelteKit skeleton
│    Vanilla JS
│
◇  Add type checking with TypeScript?
│  ❯ Yes, using JavaScript with JSDoc comments   ← (Select this)
│    Yes, using TypeScript syntax
│    No
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  ◉ none    ← (Make sure none is selected, press Enter)
│  ◯ ESLint
│  ◯ Prettier
│  ◯ Playwright
│  ◯ Vitest
│
◇  Which package manager do you want to install dependencies with?
│  ❯ npm     ← (Select this or your preferred one)
│    yarn
│    pnpm
│
◇  Installing dependencies with npm...

Step 3: Project Structure Overview

Add src/routes/about/+page.svelte, src/routes/+layout.svelte and src/routes/contact/+page.svelte pages.
Here is how you file structure should look like:

simpleesvelt/
├── src/
│   ├── app.css                  # Global CSS file
│   ├── app.html                 #  HTML shell (defines <head>, links to app.css)
│   ├── routes/
│   │   ├── +layout.svelte       #  Shared layout for nav and page slot
│   │   ├── +page.svelte         #  Home page
│   │   ├── about/
│   │   │   └── +page.svelte     #  About page
│   │   └── contact/
│   │       └── +page.svelte     #  Contact page
├── static/                      #  Public assets like favicon.png
├── svelte.config.js
├── vite.config.js
├── package.json
└── ...

Step 4: Install Dependencies

Navigate into the project directory and install the required dependencies:

cd simpleesvelt
npm install

Step 5: Build Pages
Home Page – src/routes/+page.svelte

<script>
  import { onMount } from 'svelte';
</script>

<h1>Welcome to My Simple Svelte Site</h1>
<p>This is the home page.</p>

<nav>
  <a href="/about">About</a> |
  <a href="/contact">Contact</a>
</nav>

About Page – src/routes/about/+page.svelte

<h3>About Me</h3>
<p>I'm learning Svelte and loving it!</p>

<a href="/">Back to Home</a>

Contact Page – src/routes/contact/+page.svelte

<script>
  let name = '';
  let message = '';

  const submitForm = () => {
    alert(`Thank you, ${name}! We'll respond soon.`);
    name = '';
    message = '';
  };
</script>

<h3>Contact Me</h3>
<script>
  let name = '';
  let message = '';

  function submitForm() {
    alert(`Thank you, ${name}! Your message has been received:\n\n"${message}"`);

    // Reset form (optional)
    name = '';
    message = '';
  }
</script>

<h1>Contact Us</h1>

<form on:submit|preventDefault={submitForm}>
  <label>
    Name:
    <input bind:value={name} required />
  </label>
  <br />

  <label>
    Message:
    <textarea bind:value={message} required></textarea>
  </label>
  <br />

  <button type="submit">Send</button>
</form>

Step 6: Add Basic Styling

Create a new file at src/app.css and add the following:

body {
    font-family: sans-serif;
    background: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;  /* horizontally centers content */
  }


  nav a {
    -ms-flex-item-align: center;
    margin-right: 1rem;
    text-decoration: none;
    color: #0070f3;
  }

Import this CSS file in src/routes/+layout.svelte:

<script>
  import '../app.css';
</script>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<slot />

Step 7: Build and Preview for Production

Once you are ready to prepare your site for deployment, build it and preview the PORT and output:

npm run build
npm run preview

Open your browser and go to:

http://localhost:PORT

It's that simple and your site is now production-ready.

Final Thoughts

SvelteKit gives you a modern, minimal, and scalable foundation for building fast and secure websites with less boilerplate and more control. You've now laid down the groundwork for projects using a framework accessible enough for beginners. Whether you're building a portfolio, a blog, or your first client project, this setup can grow with your skills. Keep your code clean, your structure intentional, and always build with security and accessibility in mind.

Omulo Samuel Okoth @somulo