{"id":66673,"date":"2023-11-04T11:01:41","date_gmt":"2023-11-04T10:01:41","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=66673&#038;preview=true&#038;preview_id=66673"},"modified":"2023-11-16T08:53:19","modified_gmt":"2023-11-16T07:53:19","slug":"statisch-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/","title":{"rendered":"Wie man eine statische Website mit SvelteKit erstellt"},"content":{"rendered":"<p>Statische Websites werden aufgrund ihrer Geschwindigkeit, Sicherheit und Einfachheit immer beliebter. F\u00fcr die Erstellung statischer Websites gibt es verschiedene Tools und Frameworks, aber eines, das sich immer mehr durchsetzt, ist <a href=\"https:\/\/kinsta.com\/de\/blog\/svelte-statischer-seiten-generator\/#1-sveltekit\">SvelteKit<\/a>.<\/p>\n<p>In diesem Leitfaden erf\u00e4hrst du, wie du eine <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-statische-website\/\">statische Website<\/a> mit SvelteKit erstellst, von der Einrichtung bis zur Bereitstellung mit dem kostenlosen <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Static Site Hosting von Kinsta<\/a>.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105526 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-static-site-demo.gif\" alt=\"Demo der statischen Website von SvelteKit\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Demo der statischen Website von SvelteKit<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist SvelteKit?<\/h2>\n<p><a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">SvelteKit<\/a> ist ein robustes Web-Framework, das f\u00fcr die Gestaltung von Benutzeroberfl\u00e4chen, einschlie\u00dflich statischer Websites, entwickelt wurde. Es ist bekannt f\u00fcr seine Leistung, Einfachheit und die M\u00f6glichkeit, Komponenten mit einem deklarativen Ansatz zu erstellen.<\/p>\n<p>SvelteKit erweitert die F\u00e4higkeiten des Svelte-Frameworks um Routing, serverseitiges Rendering und mehr.<\/p>\n<h3>Erste Schritte mit SvelteKit<\/h3>\n<p>Um diesem Leitfaden zu folgen, gehen wir davon aus, dass du Folgendes hast<\/p>\n<ul>\n<li>Ein grundlegendes Verst\u00e4ndnis von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/\">CSS<\/a> und <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>.<\/li>\n<li>Grundlegende Kenntnisse \u00fcber <a href=\"https:\/\/kinsta.com\/de\/blog\/svelte-vs-react\/\">Svelte<\/a>.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js und npm<\/a> sind auf deinem Computer installiert.<\/li>\n<\/ul>\n<p>Um deine neue SvelteKit-Anwendung zu erstellen, befolge die folgenden Schritte.<\/p>\n<ol start=\"1\">\n<li>Erstelle ein neues Projekt, indem du es ausf\u00fchrst:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm create svelte@latest my-app<\/code><\/pre>\n<p>Dieser Befehl erstellt ein neues Projekt im Verzeichnis <code>my-app<\/code> und fordert dich auf, einige grundlegende Werkzeuge zu konfigurieren, z. B. <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-typescript\/\">TypeScript<\/a>. Vergewissere dich, dass du die Option Skelettprojekt w\u00e4hlst und <code>my-app<\/code> in den gew\u00fcnschten Namen f\u00fcr dein Projekt \u00e4nderst.<\/p>\n<ol start=\"2\">\n<li>Navigiere in das Projektverzeichnis und installiere die Abh\u00e4ngigkeiten:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-app\nnpm install<\/code><\/pre>\n<ol start=\"3\">\n<li>F\u00fchren Sie <code>npm run dev<\/code> aus, um den lokalen Entwicklungsserver auf <code>localhost:5173<\/code> zu starten.<\/li>\n<\/ol>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105526 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-skeleton-site.png\" alt=\"SvelteKit-Skelettseite\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">SvelteKit-Skelettseite<\/figcaption><\/figure>\n<h2>Die Dateistruktur von SvelteKit verstehen<\/h2>\n<p>Wenn du dein Projekt in einem Code-Editor \u00f6ffnest, wirst du die folgende Struktur sehen. Es ist wichtig, diese Struktur zu verstehen, da sie dir hilft, deinen Code effektiv zu organisieren.<\/p>\n<pre><code class=\"language-bash\">\/\n|-- \/src\n    |-- \/lib\n    |-- \/routes\n        |-- +page.svelte\n    |-- app.html\n|-- \/static\n|-- svelte.config.js<\/code><\/pre>\n<ul>\n<li><strong>\/src:<\/strong> Dies ist das Herzst\u00fcck deines Projekts und enth\u00e4lt verschiedene Unterverzeichnisse und Dateien:\n<ul>\n<li><strong>\/lib:<\/strong> 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.<\/li>\n<li><strong>\/routes:<\/strong> Das routes-Verzeichnis ist wichtig, um die verschiedenen Seiten oder Ansichten in deiner Anwendung zu definieren. Jede Seite wird durch eine <strong>.svelte-Datei<\/strong> dargestellt, z. B. <strong>+page.svelte<\/strong>. Diese <strong>.svelte-Dateien<\/strong> enthalten die Komponenten, die Logik und die Stile f\u00fcr die jeweilige Seite.<\/li>\n<li><strong>app.html:<\/strong> Diese Datei dient als Einstiegspunkt f\u00fcr deine Anwendung. Hier wird die Hauptstruktur deiner Webseite definiert.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> In diesem Verzeichnis werden statische Assets wie Bilder, Schriftarten oder andere Dateien gespeichert, die von deiner Anwendung nicht verarbeitet werden m\u00fcssen. Diese Assets k\u00f6nnen in deinen HTML- und Svelte-Komponenten direkt referenziert werden.<\/li>\n<li><strong>svelte.config.js:<\/strong> Diese Konfigurationsdatei erm\u00f6glicht es dir, verschiedene Aspekte deines SvelteKit-Projekts anzupassen. Du kannst damit das serverseitige Rendering konfigurieren, eigene Layouts definieren und vieles mehr.<\/li>\n<\/ul>\n<h2>Routing in SvelteKit<\/h2>\n<p>Eines der herausragenden Merkmale von SvelteKit ist sein Routing-System. Es folgt einem dateisystembasierten Ansatz, bei dem URL-Pfade durch Dateien und Ordner im <strong>src\/routes-Verzeichnis<\/strong> definiert werden, was die Verwaltung intuitiv und einfach macht.<\/p>\n<p>In SvelteKit muss jede Datei, die zu einer Route geh\u00f6rt, <strong>+page.svelte<\/strong> hei\u00dfen. Die Indexdatei f\u00fcr deine SvelteKit-Website befindet sich zum Beispiel im Ordner <strong>routes<\/strong> und hei\u00dft <strong>+page.svelte<\/strong>.<\/p>\n<p>F\u00fcge den folgenden Code in diese Datei ein, um die Startseite zu erstellen:<\/p>\n<pre><code class=\"language-js\"><!-- src\/routes\/+page.svelte -->\n&lt;div class=\"home_hero\"&gt;\n    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n    &lt;a href=\"https:\/\/sevalla.com\/static-site-hosting\/\"&gt;\n        &lt;div class=\"btn\"&gt;Read more&lt;\/div&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    .home_hero {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        text-align: center;\n    }\n    .home_hero h1 {\n        font-size: 60px;\n        width: 70%;\n    }\n    .home_hero p {\n        color: #6e7076;\n        font-size: 20px;\n    }\n    .btn {\n        background-color: #5333ed;\n        padding: 20px 30px;\n        margin-top: 40px;\n        border-radius: 5px;\n        color: #fff;\n    }\n    @media (max-width: 700px) {\n        .home_hero h1 {\n            font-size: 40px;\n        }\n        .home_hero p {\n            font-size: 16px;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Um eine verschachtelte Route in SvelteKit zu erstellen, z. B. eine Informationsseite, die unter <code>localhost:5173\/about<\/code> erreichbar ist, musst du einen Ordner im <strong>routes-Ordner<\/strong> mit einem Namen erstellen, der den URL-Pfad darstellt. In diesem Ordner erstellst du eine <strong>+page.svelte-Datei<\/strong>, die f\u00fcr die Route gerendert wird.<\/p>\n<p>F\u00fcge den folgenden Code in <strong>routes\/about\/+page.svelte<\/strong> ein:<\/p>\n<pre><code class=\"language-js\">&lt;div class=\"about_cont\"&gt;\n    &lt;h2&gt;About&lt;\/h2&gt;\n    &lt;div class=\"about_info\"&gt;\n        &lt;div class=\"about_text\"&gt;\n            &lt;p&gt;\n                Kinsta allows you to{' '}\n                &lt;a&gt; href=\"https:\/\/sevalla.com\/static-site-hosting\/\"&gt;\n                    host up to 100 static websites\n                &lt;\/a&gt;{' '}\n                for free. This can be done by pushing your code to your preferred Git provider\n                (Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.\n            &lt;\/p&gt;\n            &lt;p&gt;\n                As an alternative to Static Site Hosting, you can opt for deploying your\n                static site with Kinsta\u2019s{' '}\n                &lt;a&gt; href=\"https:\/\/sevalla.com\/application-hosting\/\"&gt;\n                    Application Hosting\n                &lt;\/a&gt;\n                , which provides greater hosting flexibility, a wider range of benefits,\n                and access to more robust features. For example, scalability, customized\n                deployment using a Dockerfile, and comprehensive analytics encompassing real-time\n                and historical data.\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;iframe&gt; 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&gt; &lt;\/iframe&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;&gt;\n    .about_cont h2 {\n        font-size: 40px;\n        margin-bottom: 20px;\n    }\n    .about_info {\n        display: flex;\n        width: 100%;\n        justify-content: space-between;\n        gap: 20px;\n    }\n    @media (max-width: 700px) {\n        .about_info {\n            flex-direction: column;\n        }\n    }\n    .about_text {\n        flex-basis: 50%;\n    }\n    .about_text p {\n        margin-bottom: 20px;\n        font-size: 18px;\n    }\n    .about_img {\n        flex-basis: 50%;\n        width: 200px;\n        border-radius: 10px;\n    }\n    @media (max-width: 700px) {\n        .about_info {\n            flex-direction: column;\n        }\n        .about_img {\n            width: 100%;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Alle Stile, die du deiner Svelte-Komponente hinzuf\u00fcgst, sind skalierbar und wirken sich nicht auf andere Komponenten aus.<\/p>\n<p>Es ist wichtig zu verstehen, dass SvelteKit die Navigation zwischen den Seiten mit den Standardelementen von <code>&lt;a&gt;<\/code> handhabt, was den Navigationsprozess intuitiv macht. Es besteht keine Notwendigkeit, zus\u00e4tzliche Komponenten wie <code>&lt;Link&gt;<\/code> zu importieren, wie es in <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> erforderlich ist. Im n\u00e4chsten Abschnitt werden wir eine Navigationskomponente erstellen, die zu jeder Seite hinzugef\u00fcgt wird.<\/p>\n<p>F\u00fcr das aktuelle Projekt sieht die Routenstruktur wie folgt aus:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- +page.svelte<\/code><\/pre>\n<h3>Verwendung von Komponenten in SvelteKit<\/h3>\n<p>Um deinen Code modularer zu gestalten, kannst du Komponenten erstellen und sie in deine Seiten importieren. Du kannst zum Beispiel eine Komponente <strong>Navbar.svelte<\/strong> im Ordner <strong>routes<\/strong> erstellen:<\/p>\n<pre><code class=\"language-js\"><!-- src\/routes\/Navbar.svelte -->\n&lt;nav&gt;\n    &lt;a href=\"\/\"&gt;\n        &lt;img src=\"\/kinsta-logo.png\" alt=\"\" class=\"logo-img\" \/&gt;\n    &lt;\/a&gt;\n    &lt;div class=\"nav-links\"&gt;\n        &lt;a href=\"\/\"&gt;Home&lt;\/a&gt;\n        &lt;a href=\"\/about\"&gt;About&lt;\/a&gt;\n        &lt;a href=\"\/posts\"&gt;Posts&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n<p>Importiere sie dann wie folgt in die Homepage <strong>+page.svelte<\/strong>:<\/p>\n<pre><code class=\"language-js\"><!-- src\/routes\/+page.svelte -->\n&lt;script&gt;&gt;\n    import Navbar from '.\/Navbar.svelte'\n&lt;\/script&gt;\n\n&lt;Navbar \/&gt;\n&lt;div class=\"home_hero\"&gt;\n    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta.&lt;\/h1&gt;\n    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n    &lt;a href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;\n        &lt;div&gt; class=\"btn\"&gt;Read more&lt;\/div&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n      \/* CSS styles *\/\n&lt;\/style&gt;<\/code><\/pre>\n<p>Globale Komponenten wie <code>Navbar<\/code> und <code>Footer<\/code>, die in mehreren Dateien verwendet werden, solltest du im Ordner <strong>src\/lib<\/strong> erstellen, um lange Importpfade zu vermeiden. Wenn du Komponenten oder Module im <strong>lib-Ordner<\/strong> erstellst, kannst du sie bequem in jede Komponente importieren, indem du den <code>$lib<\/code> import alias verwendest:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import Navbar from '$lib\/Navbar.svelte'\n&lt;\/script&gt;<\/code><\/pre>\n<p>Wenn du z. B. eine Komponente nur f\u00fcr die Seite About ben\u00f6tigst, erstelle sie in der Route <strong>routes\/about<\/strong> und importiere sie dann in die Seite.<\/p>\n<p>F\u00fcr dieses Projekt kannst du auch eine Komponente <code>Footer<\/code> im Ordner <strong>lib<\/strong> erstellen und diesen Code hinzuf\u00fcgen:<\/p>\n<pre><code class=\"language-js\">&lt;div class=\"footer\"&gt;\n    &lt;p&gt;\n        Hosted with \u2764\ufe0f by Kinsta's{' '}\n        &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n        .\n    &lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Importiere sie dann in alle Seiten.<\/p>\n<h3>Layout in SvelteKit verwenden<\/h3>\n<p>Um zu vermeiden, dass du Komponenten in viele Seiten importierst, kannst du in SvelteKit mit Hilfe von <strong>+layout.svelte-Dateien<\/strong> Layouts f\u00fcr deine Seiten definieren.<\/p>\n<p>Es ist ganz einfach, ein Layout zu erstellen, das f\u00fcr jede Seite gilt. Erstelle eine Datei namens <strong>src\/routes\/+layout.svelte<\/strong> und passe sie mit dem gew\u00fcnschten Markup, den Stilen und dem Verhalten an. Wichtig ist, dass du ein <code>&lt;slot\/&gt;<\/code> Element einf\u00fcgst, das den Inhalt der Seite aufnimmt.<\/p>\n<p>Du kannst zum Beispiel die Komponenten <code>Navbar<\/code> und <code>Footer<\/code> in dieses Layout integrieren:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import Navbar from '$lib\/Navbar.svelte';\n    import Footer from '$lib\/Footer.svelte';\n&lt;\/script&gt;\n\n&lt;div class=\"layout\"&gt;\n    &lt;Navbar \/&gt;\n    &lt;slot \/&gt;\n    &lt;Footer \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Mit dem Element <code>&lt;slot&gt;<\/code> kann der Inhalt f\u00fcr jede Seite in das Layout eingef\u00fcgt werden.<\/p>\n<p>Layouts k\u00f6nnen auch f\u00fcr bestimmte Seiten verschachtelt werden. Wenn du zum Beispiel eine Seite <code>\/dashboard<\/code> mit verschachtelten Seiten wie <code>\/profile<\/code> und <code>\/settings<\/code> hast, kannst du ein spezielles Layout erstellen:<\/p>\n<pre><code class=\"language-bash\">|-- \/dashboard\n    |-- \/profile\n        |-- +page.svelte\n    |-- \/settings\n        |-- +page.svelte\n    |-- +layout.svelte<\/code><\/pre>\n<aside data-Y=\"Rkc5MWU3Zm9MeQ==\" data-W8=\"UXdxLVhDOGM0OU8wZlc3NWtaSmJCbA==\" id=\"NjY2NzM=\" data-S1=\"QmNlZ0g3aDVmUG9OOVo=\" data-PzacGr=\"bVVDZ3dJeW5wa3NMSzJkcWg=\" data-Fxyd4=\"R1ZIa2NwZDFYQg==\" data-r3koi=\"Im1pZGRsZSI=|ImRlX0RFIg==\" class=\"Wzk4Miw5NTAsOTUxXQ==\"><\/aside>\n<h3>Programmatische Navigation in SvelteKit<\/h3>\n<p>SvelteKit bietet eine <code>goto<\/code> Funktion f\u00fcr die programmatische Navigation. Zum Beispiel, um nach einer Login-Aktion zur Seite <code>\/dashboard<\/code> zu navigieren:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import { goto } from '$app\/navigation';\n    \n    async function login() {\n        \/\/ Perform login action\n        goto('\/dashboard');\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h3>Styling in SvelteKit<\/h3>\n<p>SvelteKit unterst\u00fctzt herk\u00f6mmliches CSS f\u00fcr die Gestaltung deiner Seiten. Stile k\u00f6nnen innerhalb deiner Svelte-Komponenten mit dem <code>&lt;style&gt;<\/code> Tag definiert werden, oder du kannst externe Stylesheets verlinken.<\/p>\n<p>Du wirst feststellen, dass die Komponenten <code>Navbar<\/code> und <code>Footer<\/code> keine spezifischen Stile haben. Um dies zu beheben, ist es ratsam, ein globales Styling anzuwenden. Dazu erstellst du eine CSS-Datei im <strong>src-Ordner<\/strong> und importierst sie in deine Stammlayoutdatei.<\/p>\n<p>Zur besseren Organisation solltest du einen <strong>Styles-Ordner<\/strong> im <strong>src-Verzeichnis<\/strong> anlegen. In diesem Ordner k\u00f6nnen alle deine Stile gespeichert werden. Erstelle im Rahmen dieses Projekts eine Datei <strong>global.css<\/strong> im Ordner <strong>styles<\/strong> und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500&display=swap');\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\nbody {\n    background-color: #ddd;\n    font-family: 'Poppins',\n        sans-serif;\n    width: 1200px;\n    margin: 0 auto;\n}\na {\n    text-decoration: none;\n}\nimg {\n    width: 100%;\n}\nnav {\n    display: flex;\n    justify-content: space-between;\n    height: 200px;\n    align-items: center;\n}\nnav .logo-img {\n    width: 100px;\n}\nnav .nav-links a {\n    padding: 0 20px;\n    font-size: 18px;\n}\n@media (max-width:700px) {\n    body {\n        width: 100%;\n        padding: 0 20px;\n    }\n    nav .nav-links a {\n        padding: 0 18px;\n    }\n}\n.footer {\n    width: 100%;\n    text-align: center;\n    margin: 100px 0 20px;\n}<\/code><\/pre>\n<p>Du kannst die CSS-Datei dann in deine Layout-Datei importieren, damit sie global ist und f\u00fcr alle Dateien funktioniert:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    import Navbar from '$lib\/Navbar.svelte';\n    import Footer from '$lib\/Footer.svelte';\n    import '..\/styles\/global.css';\n&lt;\/script&gt;<\/code><\/pre>\n<h2>Daten mit SvelteKit laden<\/h2>\n<p>Wenn du mit SvelteKit arbeitest, musst du oft Daten in deine Layouts, Seiten und Komponenten laden. Diese Daten k\u00f6nnen von externen APIs, Datenbanken oder deinem lokalen Server stammen. Um dies zu verwalten, kannst du eine <strong>+page.js-Datei<\/strong> f\u00fcr Seiten und eine <strong>+layout.js<\/strong> f\u00fcr Layouts verwenden.<\/p>\n<p>In deinem SvelteKit-Projekt kann eine <strong>+page.svelte-Datei<\/strong> eine Geschwisterdatei <strong>+page.js<\/strong> haben, die eine Ladefunktion exportiert. Der R\u00fcckgabewert dieser Funktion wird der Seite \u00fcber die <code>data<\/code> prop zur Verf\u00fcgung gestellt. Betrachten wir ein Beispiel: Angenommen, du m\u00f6chtest eine Route erstellen, um eine <a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\" target=\"_blank\" rel=\"noopener noreferrer\">Liste von Beitr\u00e4gen<\/a> aus der <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSON-Platzhalter-API<\/a> abzurufen.<\/p>\n<p>Um Daten von der API zu laden, erstellst du eine Datei <strong>+page.js<\/strong> im Ordner <strong>posts<\/strong>. Diese Datei exportiert eine <code>load<\/code> Funktion.<\/p>\n<pre><code class=\"language-js\">export const load = async () =&gt; {\n    const title = \"Hello World\";\n    return {\n        title,\n    };\n};<\/code><\/pre>\n<p>Die Funktion <code>load<\/code> soll ein Objekt zur\u00fcckgeben, das als Requisite in der Datei <strong>+page.svelte<\/strong> bereitgestellt wird. Auf den Wert <code>title<\/code> kann dann mit der Requisite <code>data<\/code> zugegriffen werden:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    export let data;\n    const title = data.title;\n&lt;\/script&gt;\n\n&lt;div class=\"blog_cont\"&gt;\n    &lt;h2&gt;{title}&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Kommen wir nun zur Interaktion mit der JSON Placeholder Posts API. Dazu kannst du die <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-http-anfrage\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">JavaScript Fetch API<\/a> verwenden, aber SvelteKit bietet eine eigene <code>fetch<\/code> Methode, mit der du Daten von deinen API-Endpunkten abrufen kannst, bevor du eine Seite renderst:<\/p>\n<pre><code class=\"language-js\">export const load = async (loadEvent) =&gt; {\n    const { fetch } = loadEvent;\n    const response = await fetch(\n        'https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10'\n    );\n    const posts = await response.json();\n    return {\n        posts,\n    };\n};<\/code><\/pre>\n<p>Im obigen Code extrahieren wir die Methode <code>fetch<\/code> aus <code>loadEvent<\/code> und stellen die API-Anfrage. Die Antwort wird dann als Props an die Seite &#8222;Posts&#8220; gesendet und zeigt alle Posts in einer Schleife an:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    export let data;\n    const posts = data.posts;\n&lt;\/script&gt;\n\n&lt;div class=\"blog_cont\"&gt;\n    &lt;h2&gt;Posts&lt;\/h2&gt;\n    &lt;div class=\"blog_grid\"&gt;\n        {#each posts as post}\n            &lt;a href={`\/posts\/${post.id}`} class=\"blog_card\"&gt;\n                &lt;h3&gt;{post.title}&lt;\/h3&gt;\n                &lt;p&gt;\n                    {post.body}\n                &lt;\/p&gt;\n            &lt;\/a&gt;\n        {\/each}\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    .blog_cont h2 {\n        font-size: 40px;\n        margin-bottom: 20px;\n    }\n    .blog_grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 20px;\n    }\n    @media (max-width: 700px) {\n        .blog_grid {\n            grid-template-columns: 1fr;\n        }\n    }\n    .blog_card {\n        background-color: #bfbfbf;\n        padding: 20px;\n        border-radius: 5px;\n        color: #000;\n        transition: all 0.5s ease-in-out;\n    }\n    .blog_card:hover {\n        background-color: #5333ed;\n        color: #fff;\n    }\n    .blog_card h3 {\n        margin-bottom: 15px;\n    }\n    .blog_card p {\n        margin-bottom: 15px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>So sieht der aktuelle Dateibaum aus:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/lib\n        |-- Footer.svelte\n        |-- Navbar.svelte\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- \/posts\n            |-- +page.js\n            |-- +page.svelte\n        |-- +page.svelte\n        |-- +layout.svelte\n    |-- \/styles\n        |-- global.css<\/code><\/pre>\n<h3>Dynamisches Routing mit SvelteKit<\/h3>\n<p>Du hast jetzt 10 Beitr\u00e4ge auf deiner Beitragsseite angezeigt. Wenn du f\u00fcr jeden Beitrag eine eigene Seite erstellen m\u00f6chtest, ist es am besten, eine dynamische Route zu erstellen.<\/p>\n<p>Dazu musst du den Slug-Wert von der Route erhalten und ihn als Parameter f\u00fcr 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:<\/p>\n<ol start=\"1\">\n<li>Erstelle einen <strong>[postid]-Ordner<\/strong> innerhalb des <strong>Post-Ordners<\/strong>. Die <strong>[postid]<\/strong> steht f\u00fcr den dynamischen Parameter, der Werte wie Post-IDs oder Slugs enthalten kann.<\/li>\n<li>Erstelle im [postid]-Ordner zwei Dateien:\n<ul>\n<li><strong>+page.svelte:<\/strong> Diese Datei legt das Layout und die Struktur deiner einzelnen Beitragsseiten fest.<\/li>\n<li><strong>+page.js<\/strong>: Diese JavaScript-Datei k\u00fcmmert sich um das Abrufen der Daten und die Logik f\u00fcr die einzelnen Beitr\u00e4ge.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>In der Datei <strong>+page.js<\/strong> rufst du den Parameter <code>postid<\/code> aus der Route ab und verwendest ihn zur Abfrage des jeweiligen Beitrags:<\/p>\n<pre><code class=\"language-js\">export const load = async (loadEvent) =&gt; {\n    const { fetch, params } = loadEvent;\n    const { postid } = params;\n    const response = await fetch(\n        `https:\/\/jsonplaceholder.typicode.com\/posts\/${postid}`\n    );\n    const post = await response.json();\n    return {\n        post,\n    };\n};<\/code><\/pre>\n<p>Du kannst dann auf <code>data<\/code> als Prop in der <strong>+page.svelte-Datei<\/strong> zugreifen:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    export let data;\n    const post = data.post;\n&lt;\/script&gt;\n\n&lt;div&gt;\n    &lt;div class=\"blog_content\"&gt;\n        &lt;h3&gt;{post.title}&lt;\/h3&gt;\n        &lt;p&gt;{post.body}&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;&gt;\n    .blog_content h3 {\n        font-size: 40px;\n        margin-bottom: 20px;\n        text-align: center;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Du kannst den vollst\u00e4ndigen Quellcode f\u00fcr dieses <a href=\"https:\/\/github.com\/kinsta\/static-sveltekit-demo\" target=\"_blank\" rel=\"noopener noreferrer\">SvelteKit-Projekt auf GitHub<\/a> einsehen. Weitere Informationen findest du auch in der <a href=\"https:\/\/kit.svelte.dev\/docs\/introduction\" target=\"_blank\" rel=\"noopener noreferrer\">offiziellen SvelteKit-Dokumentation<\/a>.<\/p>\n<h2>Bereitstellen von statischen SvelteKit-Seiten mit Kinsta<\/h2>\n<p>Mit Kinsta kannst du <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\" target=\"_blank\" rel=\"noopener noreferrer\">bis zu 100 statische Websites<\/a> <strong>kostenlos<\/strong> direkt von deinem bevorzugten Git-Anbieter <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\" target=\"_blank\" rel=\"noopener noreferrer\">(Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> oder <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\" target=\"_blank\" rel=\"noopener noreferrer\">GitLab<\/a>) hosten.<\/p>\n<p>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\u00fcr SvelteKit als Static Site Generator (SSG) konfiguriert werden muss.<\/p>\n<p>Hier erf\u00e4hrst du, wie du deine Website als eine Sammlung statischer Dateien vorgerendert bekommst:<\/p>\n<ol start=\"1\">\n<li>Installiere den <a href=\"https:\/\/kit.svelte.dev\/docs\/adapter-static\" target=\"_blank\" rel=\"noopener noreferrer\">@sveltejs\/adapter-static<\/a>, indem du den folgenden Befehl ausf\u00fchrst:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D @sveltejs\/adapter-static<\/code><\/pre>\n<ol start=\"2\">\n<li>Passe als N\u00e4chstes deine <strong>svelte.config.js-Datei<\/strong> an, indem du <code>adapter-auto<\/code> durch <code>fallback<\/code> bis <code>404.html<\/code> ersetzst:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import adapter from '@sveltejs\/adapter-static';\n\nconst config = {\n    kit: {\n        adapter: adapter({ fallback: '404.html' }),\n    },\n};\n\nexport default config;<\/code><\/pre>\n<p>Pushe jetzt deine Codes zu deinem bevorzugten Git-Anbieter. Befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta bei deinem Git-Anbieter.<\/li>\n<li>Klicke in der linken Seitenleiste auf <strong>Static Sites<\/strong> und dann auf <strong>Site hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle das Repository und den Zweig aus, von dem aus du bereitstellen m\u00f6chtest.<\/li>\n<li>Gib deiner Website einen eindeutigen Namen.<\/li>\n<li>F\u00fcge die Build-Einstellungen in folgendem Format hinzu:\n<ul>\n<li><strong>Build-Befehl:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Node-Version:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Verzeichnis ver\u00f6ffentlichen:<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Zum Schluss klickst du auf <strong>Website erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Und das war&#8217;s! Innerhalb weniger Sekunden hast du eine fertige Website. Du erh\u00e4ltst einen Link, \u00fcber den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst sp\u00e4ter deine <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\" target=\"_blank\" rel=\"noopener noreferrer\">eigene Domain<\/a> und dein <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\" target=\"_blank\" rel=\"noopener noreferrer\">SSL-Zertifikat<\/a> hinzuf\u00fcgen, wenn du m\u00f6chtest.<\/p>\n<p>Alternativ zum Static Site Hosting kannst du deine statische Website auch mit dem <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting<\/a> von Kinsta bereitstellen, das dir eine gr\u00f6\u00dfere Hosting-Flexibilit\u00e4t, eine breitere Palette von Vorteilen und den Zugang zu robusteren Funktionen bietet. Dazu geh\u00f6ren z. B. Skalierbarkeit, benutzerdefinierte Bereitstellung mithilfe eines Dockerfiles und <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\" target=\"_blank\" rel=\"noopener noreferrer\">umfassende Analysen<\/a>, die Echtzeit- und historische Daten umfassen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Dieser Leitfaden hat den Prozess der Erstellung einer statischen Website mit SvelteKit erl\u00e4utert. Von der Einrichtung deiner Entwicklungsumgebung bis zur Bereitstellung hast du nun das Wissen, um mit Leichtigkeit leistungsstarke statische Websites zu erstellen.<\/p>\n<p>Die Erstellung statischer Websites mit SvelteKit bietet die perfekte Mischung aus Leistung und Einfachheit und sorgt daf\u00fcr, dass deine Webprojekte im Internet gl\u00e4nzen.<\/p>\n<p><em>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.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Statische Websites werden aufgrund ihrer Geschwindigkeit, Sicherheit und Einfachheit immer beliebter. F\u00fcr die Erstellung statischer Websites gibt es verschiedene Tools und Frameworks, aber eines, das sich &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66674,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[982,950,951],"class_list":["post-66673","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-statische-seiten-generatoren","topic-javascript-fehler","topic-javascript-frameworks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man eine statische Website mit SvelteKit erstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine statische Website mit SvelteKit erstellt\" \/>\n<meta property=\"og:description\" content=\"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T10:01:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-16T07:53:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"12\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Wie man eine statische Website mit SvelteKit erstellt\",\"datePublished\":\"2023-11-04T10:01:41+00:00\",\"dateModified\":\"2023-11-16T07:53:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\"},\"wordCount\":1935,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\",\"name\":\"Wie man eine statische Website mit SvelteKit erstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg\",\"datePublished\":\"2023-11-04T10:01:41+00:00\",\"dateModified\":\"2023-11-16T07:53:19+00:00\",\"description\":\"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generatoren f\u00fcr statische Seiten\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man eine statische Website mit SvelteKit erstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man eine statische Website mit SvelteKit erstellt - Kinsta\u00ae","description":"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man eine statische Website mit SvelteKit erstellt","og_description":"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.","og_url":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-11-04T10:01:41+00:00","article_modified_time":"2023-11-16T07:53:19+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"12\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Wie man eine statische Website mit SvelteKit erstellt","datePublished":"2023-11-04T10:01:41+00:00","dateModified":"2023-11-16T07:53:19+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/"},"wordCount":1935,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/","url":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/","name":"Wie man eine statische Website mit SvelteKit erstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg","datePublished":"2023-11-04T10:01:41+00:00","dateModified":"2023-11-16T07:53:19+00:00","description":"Erfahre Schritt f\u00fcr Schritt, wie du eine blitzschnelle statische Website mit SvelteKit erstellst. Von der ersten Einrichtung bis zur Bereitstellung mit Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/11\/static-sveltekit.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/statisch-sveltekit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Generatoren f\u00fcr statische Seiten","item":"https:\/\/kinsta.com\/de\/thema\/statische-seiten-generatoren\/"},{"@type":"ListItem","position":3,"name":"Wie man eine statische Website mit SvelteKit erstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=66673"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66673\/revisions"}],"predecessor-version":[{"id":66941,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/66673\/revisions\/66941"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/66673\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/66674"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=66673"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=66673"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=66673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}