Statische Websites werden aufgrund ihrer Geschwindigkeit, Sicherheit und Einfachheit immer beliebter. Für die Erstellung statischer Websites gibt es verschiedene Tools und Frameworks, aber eines, das sich immer mehr durchsetzt, ist SvelteKit.
In diesem Leitfaden erfährst du, wie du eine statische Website mit SvelteKit erstellst, von der Einrichtung bis zur Bereitstellung mit dem kostenlosen Static Site Hosting von Kinsta.
Was ist SvelteKit?
SvelteKit ist ein robustes Web-Framework, das für die Gestaltung von Benutzeroberflächen, einschließlich statischer Websites, entwickelt wurde. Es ist bekannt für seine Leistung, Einfachheit und die Möglichkeit, Komponenten mit einem deklarativen Ansatz zu erstellen.
SvelteKit erweitert die Fähigkeiten des Svelte-Frameworks um Routing, serverseitiges Rendering und mehr.
Erste Schritte mit SvelteKit
Um diesem Leitfaden zu folgen, gehen wir davon aus, dass du Folgendes hast
- Ein grundlegendes Verständnis von HTML, CSS und JavaScript.
- Grundlegende Kenntnisse über Svelte.
- Node.js und npm sind auf deinem Computer installiert.
Um deine neue SvelteKit-Anwendung zu erstellen, befolge die folgenden Schritte.
- Erstelle ein neues Projekt, indem du es ausführst:
npm create svelte@latest my-appDieser Befehl erstellt ein neues Projekt im Verzeichnis my-app und fordert dich auf, einige grundlegende Werkzeuge zu konfigurieren, z. B. TypeScript. Vergewissere dich, dass du die Option Skelettprojekt wählst und my-app in den gewünschten Namen für dein Projekt änderst.
- Navigiere in das Projektverzeichnis und installiere die Abhängigkeiten:
cd my-app
npm install- Führen Sie
npm run devaus, um den lokalen Entwicklungsserver auflocalhost:5173zu starten.
Die Dateistruktur von SvelteKit verstehen
Wenn du dein Projekt in einem Code-Editor öffnest, wirst du die folgende Struktur sehen. Es ist wichtig, diese Struktur zu verstehen, da sie dir hilft, deinen Code effektiv zu organisieren.
/
|-- /src
|-- /lib
|-- /routes
|-- +page.svelte
|-- app.html
|-- /static
|-- svelte.config.js- /src: Dies ist das Herzstück deines Projekts und enthält verschiedene Unterverzeichnisse und Dateien:
- /lib: In diesem Verzeichnis befinden sich eigene Bibliotheken, Hilfsprogramme oder Module. Es ist ein guter Ort, um wiederverwendbaren Code zu speichern, der in deiner gesamten Anwendung verwendet werden kann.
- /routes: Das routes-Verzeichnis ist wichtig, um die verschiedenen Seiten oder Ansichten in deiner Anwendung zu definieren. Jede Seite wird durch eine .svelte-Datei dargestellt, z. B. +page.svelte. Diese .svelte-Dateien enthalten die Komponenten, die Logik und die Stile für die jeweilige Seite.
- app.html: Diese Datei dient als Einstiegspunkt für deine Anwendung. Hier wird die Hauptstruktur deiner Webseite definiert.
- /static: In diesem Verzeichnis werden statische Assets wie Bilder, Schriftarten oder andere Dateien gespeichert, die von deiner Anwendung nicht verarbeitet werden müssen. Diese Assets können in deinen HTML- und Svelte-Komponenten direkt referenziert werden.
- svelte.config.js: Diese Konfigurationsdatei ermöglicht es dir, verschiedene Aspekte deines SvelteKit-Projekts anzupassen. Du kannst damit das serverseitige Rendering konfigurieren, eigene Layouts definieren und vieles mehr.
Routing in SvelteKit
Eines der herausragenden Merkmale von SvelteKit ist sein Routing-System. Es folgt einem dateisystembasierten Ansatz, bei dem URL-Pfade durch Dateien und Ordner im src/routes-Verzeichnis definiert werden, was die Verwaltung intuitiv und einfach macht.
In SvelteKit muss jede Datei, die zu einer Route gehört, +page.svelte heißen. Die Indexdatei für deine SvelteKit-Website befindet sich zum Beispiel im Ordner routes und heißt +page.svelte.
Füge den folgenden Code in diese Datei ein, um die Startseite zu erstellen:
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting/">
<div class="btn">Read more</div>
</a>
</div>
<style>
.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6e7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width: 700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}
</style>Um eine verschachtelte Route in SvelteKit zu erstellen, z. B. eine Informationsseite, die unter localhost:5173/about erreichbar ist, musst du einen Ordner im routes-Ordner mit einem Namen erstellen, der den URL-Pfad darstellt. In diesem Ordner erstellst du eine +page.svelte-Datei, die für die Route gerendert wird.
Füge den folgenden Code in routes/about/+page.svelte ein:
<div class="about_cont">
<h2>About</h2>
<div class="about_info">
<div class="about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinsta.com/static-site-hosting/">
host up to 100 static websites
</a>{' '}
for free. This can be done by pushing your code to your preferred Git provider
(Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
</p>
<p>
As an alternative to Static Site Hosting, you can opt for deploying your
static site with Kinsta’s{' '}
<a> href="https://kinsta.com/application-hosting/">
Application Hosting
</a>
, which provides greater hosting flexibility, a wider range of benefits,
and access to more robust features. For example, scalability, customized
deployment using a Dockerfile, and comprehensive analytics encompassing real-time
and historical data.
</p>
</div>
<iframe> width="560" height="315" src="https://www.youtube.com/embed/H7CNbsda8OA?si=40FGVlNvJ74_6hlj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</div>
</div>
<style>>
.about_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.about_info {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
}
.about_text {
flex-basis: 50%;
}
.about_text p {
margin-bottom: 20px;
font-size: 18px;
}
.about_img {
flex-basis: 50%;
width: 200px;
border-radius: 10px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
.about_img {
width: 100%;
}
}
</style>Alle Stile, die du deiner Svelte-Komponente hinzufügst, sind skalierbar und wirken sich nicht auf andere Komponenten aus.
Es ist wichtig zu verstehen, dass SvelteKit die Navigation zwischen den Seiten mit den Standardelementen von <a> handhabt, was den Navigationsprozess intuitiv macht. Es besteht keine Notwendigkeit, zusätzliche Komponenten wie <Link> zu importieren, wie es in React erforderlich ist. Im nächsten Abschnitt werden wir eine Navigationskomponente erstellen, die zu jeder Seite hinzugefügt wird.
Für das aktuelle Projekt sieht die Routenstruktur wie folgt aus:
|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelteVerwendung von Komponenten in SvelteKit
Um deinen Code modularer zu gestalten, kannst du Komponenten erstellen und sie in deine Seiten importieren. Du kannst zum Beispiel eine Komponente Navbar.svelte im Ordner routes erstellen:
<nav>
<a href="/">
<img src="/kinsta-logo.png" alt="" class="logo-img" />
</a>
<div class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Posts</a>
</div>
</nav>Importiere sie dann wie folgt in die Homepage +page.svelte:
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting">
<div> class="btn">Read more</div>
</a>
</div>
<style>
/* CSS styles */
</style>Globale Komponenten wie Navbar und Footer, die in mehreren Dateien verwendet werden, solltest du im Ordner src/lib erstellen, um lange Importpfade zu vermeiden. Wenn du Komponenten oder Module im lib-Ordner erstellst, kannst du sie bequem in jede Komponente importieren, indem du den $lib import alias verwendest:
<script>
import Navbar from '$lib/Navbar.svelte'
</script>Wenn du z. B. eine Komponente nur für die Seite About benötigst, erstelle sie in der Route routes/about und importiere sie dann in die Seite.
Für dieses Projekt kannst du auch eine Komponente Footer im Ordner lib erstellen und diesen Code hinzufügen:
<div class="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>Importiere sie dann in alle Seiten.
Layout in SvelteKit verwenden
Um zu vermeiden, dass du Komponenten in viele Seiten importierst, kannst du in SvelteKit mit Hilfe von +layout.svelte-Dateien Layouts für deine Seiten definieren.
Es ist ganz einfach, ein Layout zu erstellen, das für jede Seite gilt. Erstelle eine Datei namens src/routes/+layout.svelte und passe sie mit dem gewünschten Markup, den Stilen und dem Verhalten an. Wichtig ist, dass du ein <slot/> Element einfügst, das den Inhalt der Seite aufnimmt.
Du kannst zum Beispiel die Komponenten Navbar und Footer in dieses Layout integrieren:
<script>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
</script>
<div class="layout">
<Navbar />
<slot />
<Footer />
</div>Mit dem Element <slot> kann der Inhalt für jede Seite in das Layout eingefügt werden.
Layouts können auch für bestimmte Seiten verschachtelt werden. Wenn du zum Beispiel eine Seite /dashboard mit verschachtelten Seiten wie /profile und /settings hast, kannst du ein spezielles Layout erstellen:
|-- /dashboard
|-- /profile
|-- +page.svelte
|-- /settings
|-- +page.svelte
|-- +layout.svelteProgrammatische Navigation in SvelteKit
SvelteKit bietet eine goto Funktion für die programmatische Navigation. Zum Beispiel, um nach einer Login-Aktion zur Seite /dashboard zu navigieren:
<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>Styling in SvelteKit
SvelteKit unterstützt herkömmliches CSS für die Gestaltung deiner Seiten. Stile können innerhalb deiner Svelte-Komponenten mit dem <style> Tag definiert werden, oder du kannst externe Stylesheets verlinken.
Du wirst feststellen, dass die Komponenten Navbar und Footer keine spezifischen Stile haben. Um dies zu beheben, ist es ratsam, ein globales Styling anzuwenden. Dazu erstellst du eine CSS-Datei im src-Ordner und importierst sie in deine Stammlayoutdatei.
Zur besseren Organisation solltest du einen Styles-Ordner im src-Verzeichnis anlegen. In diesem Ordner können alle deine Stile gespeichert werden. Erstelle im Rahmen dieses Projekts eine Datei global.css im Ordner styles und füge den folgenden Code hinzu:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}Du kannst die CSS-Datei dann in deine Layout-Datei importieren, damit sie global ist und für alle Dateien funktioniert:
<script>>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles/global.css';
</script>Daten mit SvelteKit laden
Wenn du mit SvelteKit arbeitest, musst du oft Daten in deine Layouts, Seiten und Komponenten laden. Diese Daten können von externen APIs, Datenbanken oder deinem lokalen Server stammen. Um dies zu verwalten, kannst du eine +page.js-Datei für Seiten und eine +layout.js für Layouts verwenden.
In deinem SvelteKit-Projekt kann eine +page.svelte-Datei eine Geschwisterdatei +page.js haben, die eine Ladefunktion exportiert. Der Rückgabewert dieser Funktion wird der Seite über die data prop zur Verfügung gestellt. Betrachten wir ein Beispiel: Angenommen, du möchtest eine Route erstellen, um eine Liste von Beiträgen aus der JSON-Platzhalter-API abzurufen.
Um Daten von der API zu laden, erstellst du eine Datei +page.js im Ordner posts. Diese Datei exportiert eine load Funktion.
export const load = async () => {
const title = "Hello World";
return {
title,
};
};Die Funktion load soll ein Objekt zurückgeben, das als Requisite in der Datei +page.svelte bereitgestellt wird. Auf den Wert title kann dann mit der Requisite data zugegriffen werden:
<script>>
export let data;
const title = data.title;
</script>
<div class="blog_cont">
<h2>{title}</h2>
</div>Kommen wir nun zur Interaktion mit der JSON Placeholder Posts API. Dazu kannst du die JavaScript Fetch API verwenden, aber SvelteKit bietet eine eigene fetch Methode, mit der du Daten von deinen API-Endpunkten abrufen kannst, bevor du eine Seite renderst:
export const load = async (loadEvent) => {
const { fetch } = loadEvent;
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=10'
);
const posts = await response.json();
return {
posts,
};
};Im obigen Code extrahieren wir die Methode fetch aus loadEvent und stellen die API-Anfrage. Die Antwort wird dann als Props an die Seite „Posts“ gesendet und zeigt alle Posts in einer Schleife an:
<script>
export let data;
const posts = data.posts;
</script>
<div class="blog_cont">
<h2>Posts</h2>
<div class="blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="blog_card">
<h3>{post.title}</h3>
<p>
{post.body}
</p>
</a>
{/each}
</div>
</div>
<style>
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all 0.5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
</style>So sieht der aktuelle Dateibaum aus:
|-- /src
|-- /lib
|-- Footer.svelte
|-- Navbar.svelte
|-- /routes
|-- /about
|-- +page.svelte
|-- /posts
|-- +page.js
|-- +page.svelte
|-- +page.svelte
|-- +layout.svelte
|-- /styles
|-- global.cssDynamisches Routing mit SvelteKit
Du hast jetzt 10 Beiträge auf deiner Beitragsseite angezeigt. Wenn du für jeden Beitrag eine eigene Seite erstellen möchtest, ist es am besten, eine dynamische Route zu erstellen.
Dazu musst du den Slug-Wert von der Route erhalten und ihn als Parameter für die Abfrage nach dem Beitrag verwenden. In SvelteKit kannst du das tun, indem du einen eckigen Klammerordner mit dem Parameternamen erstellst. Hier siehst du, wie du einzelne Postseiten einrichten kannst:
- Erstelle einen [postid]-Ordner innerhalb des Post-Ordners. Die [postid] steht für den dynamischen Parameter, der Werte wie Post-IDs oder Slugs enthalten kann.
- Erstelle im [postid]-Ordner zwei Dateien:
- +page.svelte: Diese Datei legt das Layout und die Struktur deiner einzelnen Beitragsseiten fest.
- +page.js: Diese JavaScript-Datei kümmert sich um das Abrufen der Daten und die Logik für die einzelnen Beiträge.
In der Datei +page.js rufst du den Parameter postid aus der Route ab und verwendest ihn zur Abfrage des jeweiligen Beitrags:
export const load = async (loadEvent) => {
const { fetch, params } = loadEvent;
const { postid } = params;
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postid}`
);
const post = await response.json();
return {
post,
};
};Du kannst dann auf data als Prop in der +page.svelte-Datei zugreifen:
<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="blog_content">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
</div>
<style>>
.blog_content h3 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
}
</style>Du kannst den vollständigen Quellcode für dieses SvelteKit-Projekt auf GitHub einsehen. Weitere Informationen findest du auch in der offiziellen SvelteKit-Dokumentation.
Bereitstellen von statischen SvelteKit-Seiten mit Kinsta
Mit Kinsta kannst du bis zu 100 statische Websites kostenlos direkt von deinem bevorzugten Git-Anbieter (Bitbucket, GitHub oder GitLab) hosten.
Bevor du mit dem Pushen deiner SvelteKit-Website beginnst, ist es wichtig, dass du sie an dein Einsatzziel anpasst. In diesem Projekt konzentrieren wir uns auf die Nutzung von Kinstas Static Site Hosting, wofür SvelteKit als Static Site Generator (SSG) konfiguriert werden muss.
Hier erfährst du, wie du deine Website als eine Sammlung statischer Dateien vorgerendert bekommst:
- Installiere den @sveltejs/adapter-static, indem du den folgenden Befehl ausführst:
npm i -D @sveltejs/adapter-static- Passe als Nächstes deine svelte.config.js-Datei an, indem du
adapter-autodurchfallbackbis404.htmlersetzst:
import adapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({ fallback: '404.html' }),
},
};
export default config;Pushe jetzt deine Codes zu deinem bevorzugten Git-Anbieter. Befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:
- Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
- Autorisiere Kinsta bei deinem Git-Anbieter.
- Klicke in der linken Seitenleiste auf Static Sites und dann auf Site hinzufügen.
- Wähle das Repository und den Zweig aus, von dem aus du bereitstellen möchtest.
- Gib deiner Website einen eindeutigen Namen.
- Füge die Build-Einstellungen in folgendem Format hinzu:
- Build-Befehl:
npm run build - Node-Version:
18.16.0 - Verzeichnis veröffentlichen:
build
- Build-Befehl:
- Zum Schluss klickst du auf Website erstellen.
Und das war’s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erhältst einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst später deine eigene Domain und dein SSL-Zertifikat hinzufügen, wenn du möchtest.
Alternativ zum Static Site Hosting kannst du deine statische Website auch mit dem Anwendungs-Hosting von Kinsta bereitstellen, das dir eine größere Hosting-Flexibilität, eine breitere Palette von Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu gehören z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und umfassende Analysen, die Echtzeit- und historische Daten umfassen.
Zusammenfassung
Dieser Leitfaden hat den Prozess der Erstellung einer statischen Website mit SvelteKit erläutert. Von der Einrichtung deiner Entwicklungsumgebung bis zur Bereitstellung hast du nun das Wissen, um mit Leichtigkeit leistungsstarke statische Websites zu erstellen.
Die Erstellung statischer Websites mit SvelteKit bietet die perfekte Mischung aus Leistung und Einfachheit und sorgt dafür, dass deine Webprojekte im Internet glänzen.
Jetzt ist es an der Zeit, dein Wissen in die Tat umzusetzen und deine eigene statische Website mit SvelteKit zu erstellen. Hast du SvelteKit in der Vergangenheit verwendet? Teile uns deine Projekte und Erfahrungen unten in den Kommentaren mit.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar