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
or
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>
<!-- src/routes/contact/+page.svelte -->
<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.
Further Reading & Resources
To deepen your understanding, explore these trusted references:
SvelteKit Docs
https://kit.svelte.dev/docs
→ Official guide to routing, layout, endpoints, deployment, and more.
Svelte Tutorial (Interactive)
https://svelte.dev/tutorial
→ Learn Svelte step by step through hands-on code examples.
https://sveltesociety.dev/
→ Best practices for auth, headers, input validation, and more.
Top comments (0)