{"id":74062,"date":"2023-11-04T11:03:11","date_gmt":"2023-11-04T10:03:11","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=74062&#038;preview=true&#038;preview_id=74062"},"modified":"2023-11-06T10:06:46","modified_gmt":"2023-11-06T09:06:46","slug":"statique-sveltekit","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/","title":{"rendered":"Comment construire un site statique avec SvelteKit"},"content":{"rendered":"<p>Les sites statiques sont de plus en plus populaires en raison de leur rapidit\u00e9, de leur s\u00e9curit\u00e9 et de leur simplicit\u00e9. Lorsqu&rsquo;il s&rsquo;agit de construire des sites statiques, plusieurs outils et frameworks sont disponibles, mais l&rsquo;un d&rsquo;entre eux gagne rapidement en popularit\u00e9 : <a href=\"https:\/\/kinsta.com\/fr\/blog\/generateurs-sites-statiques-svelte\/#1-sveltekit\">SvelteKit<\/a>.<\/p>\n<p>Ce guide vous accompagne dans la cr\u00e9ation d&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/blog\/site-statique\/\">site statique<\/a> avec SvelteKit, de l&rsquo;installation au d\u00e9ploiement avec l&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9bergement de sites statiques de Kinsta<\/a>, gratuitement.<\/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=\"D\u00e9monstration de site statique SvelteKit.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">D\u00e9monstration de site statique 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>Qu&rsquo;est-ce que SvelteKit ?<\/h2>\n<p><a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">SvelteKit<\/a> est un framework web robuste con\u00e7u pour cr\u00e9er des interfaces utilisateur, y compris des sites statiques. Il est connu pour ses performances, sa simplicit\u00e9 et sa capacit\u00e9 \u00e0 cr\u00e9er des composants avec une approche d\u00e9clarative.<\/p>\n<p>SvelteKit \u00e9tend les capacit\u00e9s du framework Svelte en ajoutant le routage, le rendu c\u00f4t\u00e9 serveur, etc.<\/p>\n<h3>D\u00e9marrer avec SvelteKit<\/h3>\n<p>Pour suivre ce guide, nous supposons que vous avez :<\/p>\n<ul>\n<li>Des connaissances fondamentales en <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> et <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>.<\/li>\n<li>Des connaissances de base sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/svelte-vs-react\/\">Svelte<\/a>.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js et npm<\/a> install\u00e9s sur votre ordinateur.<\/li>\n<\/ul>\n<p>Pour cr\u00e9er votre nouvelle application SvelteKit, suivez les \u00e9tapes ci-dessous.<\/p>\n<ol start=\"1\">\n<li>Cr\u00e9ez un nouveau projet en ex\u00e9cutant :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm create svelte@latest my-app<\/code><\/pre>\n<p>Cette commande permet d&rsquo;\u00e9chafauder un nouveau projet dans le r\u00e9pertoire <code>my-app<\/code>, en demandant de configurer certains outils de base, tels que <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-complet-typescript\/\">TypeScript<\/a>. Assurez-vous de choisir l&rsquo;option Skeleton project et remplacez <code>my-app<\/code> par le nom de votre choix pour votre projet.<\/p>\n<ol start=\"2\">\n<li>Naviguez dans le r\u00e9pertoire du projet et installez ses d\u00e9pendances :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-app\nnpm install<\/code><\/pre>\n<ol start=\"3\">\n<li>Ex\u00e9cutez <code>npm run dev<\/code> pour d\u00e9marrer le serveur de d\u00e9veloppement local sur <code>localhost:5173<\/code>.<\/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=\"Site squelette de SvelteKit.\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Site squelette de SvelteKit.<\/figcaption><\/figure>\n<h2>Comprendre la structure des fichiers SvelteKit<\/h2>\n<p>Lorsque vous ouvrez votre projet dans un \u00e9diteur de code, vous verrez la structure suivante. Il est essentiel de comprendre cette structure car elle vous aide \u00e0 organiser votre code de mani\u00e8re efficace.<\/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> Il s&rsquo;agit du c\u0153ur de votre projet, qui contient plusieurs sous-r\u00e9pertoires et fichiers :\n<ul>\n<li><strong>\/lib :<\/strong> Ce r\u00e9pertoire contient des biblioth\u00e8ques, des utilitaires ou des modules personnalis\u00e9s. C&rsquo;est un bon endroit pour stocker du code r\u00e9utilisable qui peut \u00eatre utilis\u00e9 dans l&rsquo;ensemble de votre application.<\/li>\n<li><strong>\/routes :<\/strong> Le r\u00e9pertoire routes est essentiel pour d\u00e9finir les diff\u00e9rentes pages ou vues de votre application. Chaque page est repr\u00e9sent\u00e9e par un fichier <strong>.svelte<\/strong>, tel que <strong>+page.svelte<\/strong>. Ces fichiers <strong>.svelte<\/strong> contiennent les composants, la logique et les styles sp\u00e9cifiques \u00e0 cette page.<\/li>\n<li><strong>app.html :<\/strong> Ce fichier est le point d&rsquo;entr\u00e9e de votre application. C&rsquo;est l\u00e0 que la structure principale de votre page web est d\u00e9finie.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static :<\/strong> Ce r\u00e9pertoire est utilis\u00e9 pour stocker des ressources statiques, telles que des images, des polices de caract\u00e8res ou tout autre fichier qui n&rsquo;a pas besoin d&rsquo;\u00eatre trait\u00e9 par votre application. Ces ressources peuvent \u00eatre directement r\u00e9f\u00e9renc\u00e9es dans vos composants HTML et Svelte.<\/li>\n<li><strong>svelte.config.js :<\/strong> Ce fichier de configuration vous permet de personnaliser divers aspects de votre projet SvelteKit. Vous pouvez l&rsquo;utiliser pour configurer le rendu c\u00f4t\u00e9 serveur, d\u00e9finir des mises en page personnalis\u00e9es, etc.<\/li>\n<\/ul>\n<h2>Le routage dans SvelteKit<\/h2>\n<p>L&rsquo;une des caract\u00e9ristiques les plus remarquables de SvelteKit est son syst\u00e8me de routage. Il suit une approche bas\u00e9e sur un syst\u00e8me de fichiers, o\u00f9 les chemins d&rsquo;URL sont d\u00e9finis par des fichiers et des dossiers dans le r\u00e9pertoire <strong>src\/routes<\/strong>, ce qui le rend intuitif et simple \u00e0 g\u00e9rer.<\/p>\n<p>Dans SvelteKit, chaque fichier correspondant \u00e0 une route doit \u00eatre nomm\u00e9 <strong>+page.svelte<\/strong>. Par exemple, le fichier d&rsquo;index de votre site SvelteKit est situ\u00e9 dans le dossier <strong>routes<\/strong> et nomm\u00e9 <strong>+page.svelte<\/strong>.<\/p>\n<p>Ajoutez le code suivant \u00e0 ce fichier pour cr\u00e9er la page d&rsquo;accueil :<\/p>\n<pre><code class=\"language-js\">&lt;!-- src\/routes\/+page.svelte --&gt;\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>Pour cr\u00e9er une route imbriqu\u00e9e dans SvelteKit, par exemple une page \u00ab about \u00bb accessible \u00e0 l&rsquo;adresse <code>localhost:5173\/about<\/code>, vous devez cr\u00e9er un dossier dans le dossier <strong>routes<\/strong> avec un nom qui repr\u00e9sente le chemin d&rsquo;acc\u00e8s \u00e0 l&rsquo;URL. Dans ce dossier, cr\u00e9ez un fichier <strong>+page.svelte<\/strong> \u00e0 rendre pour la route.<\/p>\n<p>Ajoutez le code suivant \u00e0 <strong>routes\/about\/+page.svelte<\/strong>:<\/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>Tout style ajout\u00e9 \u00e0 votre composant Svelte est d\u00e9limit\u00e9 et n&rsquo;affecte pas les autres composants.<\/p>\n<p>Il est essentiel de comprendre que SvelteKit g\u00e8re la navigation entre les pages \u00e0 l&rsquo;aide d&rsquo;\u00e9l\u00e9ments standard <code>&lt;a&gt;<\/code>, ce qui rend le processus de navigation intuitif. Il n&rsquo;est pas n\u00e9cessaire d&rsquo;importer des composants suppl\u00e9mentaires comme <code>&lt;Link&gt;<\/code>, comme c&rsquo;est le cas dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a>. Dans la section suivante, nous allons cr\u00e9er un composant Navigation qui sera ajout\u00e9 \u00e0 chaque page.<\/p>\n<p>Pour le projet actuel, la structure de route ressemble \u00e0 ceci :<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- +page.svelte<\/code><\/pre>\n<h3>Utilisation des composants dans SvelteKit<\/h3>\n<p>Pour rendre votre code plus modulaire, vous pouvez cr\u00e9er des composants et les importer dans vos pages. Par exemple, vous pouvez cr\u00e9er un composant <strong>Navbar.svelte<\/strong> dans le dossier <strong>routes<\/strong>:<\/p>\n<pre><code class=\"language-js\">&lt;!-- src\/routes\/Navbar.svelte --&gt;\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>Ensuite, importez-le dans la page d&rsquo;accueil <strong>+page.svelte<\/strong> comme ceci :<\/p>\n<pre><code class=\"language-js\">&lt;!-- src\/routes\/+page.svelte --&gt;\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>Pour les composants globaux tels que <code>Navbar<\/code> et <code>Footer<\/code>, qui sont utilis\u00e9s dans plusieurs fichiers, cr\u00e9ez-les dans le dossier <strong>src\/lib<\/strong> afin d&rsquo;\u00e9viter les longs chemins d&rsquo;importation. Lorsque vous cr\u00e9ez des composants ou des modules dans le dossier <strong>lib<\/strong>, vous pouvez les importer dans n&rsquo;importe quel composant \u00e0 l&rsquo;aide de l&rsquo;alias d&rsquo;importation <code>$lib<\/code>:<\/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>Pour utiliser des composants autonomes, par exemple, supposons que vous ayez besoin d&rsquo;un composant uniquement pour la page \u00c0 propos, cr\u00e9ez-le dans la route <strong>routes\/about<\/strong>, puis importez-le dans la page.<\/p>\n<p>Pour ce projet, vous pouvez \u00e9galement cr\u00e9er un composant <code>Footer<\/code> dans le dossier <strong>lib<\/strong> et ajouter ce code :<\/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>Ensuite, importez-le dans toutes les pages.<\/p>\n<h3>Utilisation de la mise en page dans SveletKit<\/h3>\n<p>Pour \u00e9viter d&rsquo;importer des composants dans de nombreuses pages, SvelteKit vous permet de d\u00e9finir des dispositions pour vos pages \u00e0 l&rsquo;aide de fichiers <strong>+layout.svelte<\/strong>.<\/p>\n<p>La cr\u00e9ation d&rsquo;une mise en page qui s&rsquo;applique \u00e0 toutes les pages est simple. Cr\u00e9ez un fichier nomm\u00e9 <strong>src\/routes\/+layout.svelte<\/strong> et personnalisez-le avec le balisage, les styles et le comportement souhait\u00e9s. La condition essentielle est d&rsquo;inclure un \u00e9l\u00e9ment <code><\/code> pour accueillir le contenu de la page.<\/p>\n<p>Par exemple, vous pouvez int\u00e9grer les composants <code>Navbar<\/code> et <code>Footer<\/code> dans cette mise en page :<\/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>L&rsquo;\u00e9l\u00e9ment <code>&lt;slot&gt;<\/code> permet d&rsquo;ins\u00e9rer le contenu de chaque page dans la mise en page.<\/p>\n<p>Les mises en page peuvent \u00e9galement \u00eatre imbriqu\u00e9es pour des pages sp\u00e9cifiques. Par exemple, si vous avez une page <code>\/dashboard<\/code> avec des pages imbriqu\u00e9es comme <code>\/profile<\/code> et <code>\/settings<\/code>, vous pouvez cr\u00e9er une mise en page sp\u00e9ciale :<\/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-8=\"RGFVVzJFNDZ1XzF5ZWgtUEg=\" data-r3koi=\"Im1pZGRsZSI=|ImZyX0ZSIg==\" data-Qo5Lfam=\"VW5CNVZ0WWNibGRFNEZNS1FU\" data-Etba=\"NDdSUUFad19xb3hN\" data-mupP=\"OEdlUEh2TW9GOWtZRGwtZlg=\" data-qwzd=\"bE9NdXFZQmo=\" id=\"NzQwNjI=\" data-Kn5Q=\"UE04bzFRZTUzaA==\" data-DMw=\"NjhSZ2VKSUMtVXZEVzNkU0FuTFlL\" data-g=\"U3B6RFFlY09CZ0pHNnhzSUZvbmJkdQ==\" data-XgpYJ3=\"Y1lRTGFOQXllbktEcVV6TzBw\" class=\"Wzk3OCw5NzksMTAxMV0=\"><\/aside>\n<h3>Navigation programmatique dans SvelteKit<\/h3>\n<p>SvelteKit fournit une fonction <code>goto<\/code> pour la navigation programmatique. Par exemple, pour naviguer vers la page <code>\/dashboard<\/code> apr\u00e8s une action de connexion :<\/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>Style dans SvelteKit<\/h3>\n<p>SvelteKit prend en charge le CSS traditionnel pour styliser vos pages. Les styles peuvent \u00eatre d\u00e9finis dans vos composants Svelte \u00e0 l&rsquo;aide de la balise <code>&lt;style&gt;<\/code>, ou vous pouvez choisir de lier des feuilles de style externes.<\/p>\n<p>Vous remarquerez peut-\u00eatre que les composants <code>Navbar<\/code> et <code>Footer<\/code> n&rsquo;ont pas de styles sp\u00e9cifiques. Pour y rem\u00e9dier, il est conseill\u00e9 d&rsquo;appliquer un style global. Pour ce faire, cr\u00e9ez un fichier CSS dans le dossier <strong>src<\/strong> et importez-le dans votre fichier de mise en page racine.<\/p>\n<p>Pour une meilleure organisation, cr\u00e9ez un dossier <strong>styles<\/strong> dans le r\u00e9pertoire <strong>src<\/strong>. Ce dossier peut contenir tous vos styles. Dans le cadre de ce projet, cr\u00e9ez un fichier <strong>global.css<\/strong> dans le dossier <strong>styles<\/strong> et ajoutez le code suivant :<\/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>Vous pouvez ensuite importer le fichier CSS dans votre fichier de mise en page afin qu&rsquo;il soit global et fonctionne pour tous les fichiers :<\/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>Chargement de donn\u00e9es avec SvelteKit<\/h2>\n<p>Lorsque vous travaillez avec SvelteKit, vous avez souvent besoin de charger des donn\u00e9es dans vos mises en page, pages et composants. Ces donn\u00e9es peuvent provenir d&rsquo;API externes, de bases de donn\u00e9es ou de votre serveur local. Pour g\u00e9rer cela, vous pouvez utiliser un fichier <strong>+page.js<\/strong> pour les pages et <strong>+layout.js<\/strong> pour les mises en page.<\/p>\n<p>Dans votre projet SvelteKit, un fichier <strong>+page.svelte<\/strong> peut avoir un fr\u00e8re <strong>+page.js<\/strong> qui exporte une fonction de chargement. La valeur de retour de cette fonction est mise \u00e0 la disposition de la page par l&rsquo;interm\u00e9diaire de la propri\u00e9t\u00e9 <code>data<\/code>. Prenons un exemple : supposons que vous souhaitiez cr\u00e9er une route pour r\u00e9cup\u00e9rer une <a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\" target=\"_blank\" rel=\"noopener noreferrer\">liste d&rsquo;articles<\/a> \u00e0 partir de l&rsquo;<a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API JSON Placeholder<\/a>.<\/p>\n<p>Pour charger les donn\u00e9es de l&rsquo;API, cr\u00e9ez un fichier <strong>+page.js<\/strong> dans le dossier <strong>posts<\/strong>. Ce fichier exporte une fonction <code>load<\/code>.<\/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>La fonction <code>load<\/code> est cens\u00e9e renvoyer un objet, qui est fourni comme accessoire au fichier <strong>+page.svelte<\/strong>. Vous pouvez ensuite acc\u00e9der \u00e0 la valeur <code>title<\/code> \u00e0 l&rsquo;aide de l&rsquo;accessoire <code>data<\/code>:<\/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>Passons maintenant \u00e0 l&rsquo;interaction avec l&rsquo;API JSON Placeholder posts. Pour ce faire, vous pouvez utiliser l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/requetes-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>, mais SvelteKit propose sa propre m\u00e9thode <code>fetch<\/code> que vous pouvez utiliser pour r\u00e9cup\u00e9rer les donn\u00e9es de vos points d&rsquo;extr\u00e9mit\u00e9 API avant de rendre une page :<\/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>Dans le code ci-dessus, nous extrayons la m\u00e9thode <code>fetch<\/code> de <code>loadEvent<\/code> et effectuons la requ\u00eate d&rsquo;API. La r\u00e9ponse est ensuite envoy\u00e9e en tant que props \u00e0 la page Posts, qui passe en boucle et affiche toutes les publications :<\/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>Voici \u00e0 quoi ressemble l&rsquo;arborescence actuelle des fichiers :<\/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>Routage dynamique avec SvelteKit<\/h3>\n<p>Vous avez maintenant 10 articles affich\u00e9s sur votre page d&rsquo;articles ; si vous voulez cr\u00e9er une page individuelle pour chaque article, la meilleure fa\u00e7on de le faire est de cr\u00e9er une route dynamique.<\/p>\n<p>Pour cela, vous devez recevoir la valeur slug de la route et l&rsquo;utiliser comme param\u00e8tre pour rechercher l&rsquo;article. Dans SvelteKit, vous pouvez le faire en cr\u00e9ant un dossier entre crochets avec le nom du param\u00e8tre. Voici comment vous pouvez configurer des pages d&rsquo;articles individuels :<\/p>\n<ol start=\"1\">\n<li>Cr\u00e9ez un dossier <strong>[postid]<\/strong> dans le dossier <strong>posts<\/strong>. Le <strong>[postid]<\/strong> repr\u00e9sente le param\u00e8tre dynamique qui peut contenir des valeurs telles que des identifiants d&rsquo;articles ou des mots-cl\u00e9s.<\/li>\n<li>Dans le dossier [postid], cr\u00e9ez deux fichiers :\n<ul>\n<li><strong>+page.svelte :<\/strong> Ce fichier d\u00e9finira la mise en page et la structure de vos pages d&rsquo;articles individuelles.<\/li>\n<li><strong>+page.js :<\/strong> ce fichier JavaScript g\u00e9rera la r\u00e9cup\u00e9ration des donn\u00e9es et la logique propre aux diff\u00e9rents articles.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Dans le fichier <strong>+page.js<\/strong>, r\u00e9cup\u00e9rez le param\u00e8tre <code>postid<\/code> de la route et utilisez-le pour interroger l&rsquo;article en question :<\/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>Vous pouvez ensuite acc\u00e9der \u00e0 <code>data<\/code> en tant que param\u00e8tre dans le fichier <strong>+page.svelte<\/strong>:<\/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>Vous pouvez consulter le code source complet de ce <a href=\"https:\/\/github.com\/kinsta\/static-sveltekit-demo\" target=\"_blank\" rel=\"noopener noreferrer\">projet SvelteKit sur GitHub<\/a>. Vous pouvez \u00e9galement consulter la <a href=\"https:\/\/kit.svelte.dev\/docs\/introduction\" target=\"_blank\" rel=\"noopener noreferrer\">documentation officielle de SvelteKit<\/a> pour plus d&rsquo;informations.<\/p>\n<h2>D\u00e9ployer des sites statiques SvelteKit avec Kinsta<\/h2>\n<p>Kinsta vous permet d&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9berger <strong>gratuitement<\/strong> jusqu&rsquo;\u00e0 100 sites web statiques<\/a> directement depuis votre fournisseur Git pr\u00e9f\u00e9r\u00e9 (<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> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\" target=\"_blank\" rel=\"noopener noreferrer\">GitLab<\/a>).<\/p>\n<p>Avant de commencer \u00e0 pousser votre site SvelteKit, il est important de l&rsquo;adapter \u00e0 votre cible de d\u00e9ploiement. Dans ce projet particulier, nous nous concentrons sur l&rsquo;utilisation de l&rsquo;h\u00e9bergement de sites statiques de Kinsta, ce qui n\u00e9cessite de configurer SvelteKit en tant que g\u00e9n\u00e9rateur de sites statiques (SSG).<\/p>\n<p>Voici comment obtenir votre site pr\u00e9-rendu en tant que collection de fichiers statiques :<\/p>\n<ol start=\"1\">\n<li>Installez <a href=\"https:\/\/kit.svelte.dev\/docs\/adapter-static\" target=\"_blank\" rel=\"noopener noreferrer\">@sveltejs\/adapter-static<\/a> en ex\u00e9cutant la commande suivante :<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D @sveltejs\/adapter-static<\/code><\/pre>\n<ol start=\"2\">\n<li>Ensuite, adaptez votre fichier <strong>svelte.config.js<\/strong> en rempla\u00e7ant <code>adapter-auto<\/code> par <code>fallback<\/code> \u00e0 <code>404.html<\/code>:<\/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>Maintenant, poussez vos codes vers votre fournisseur Git pr\u00e9f\u00e9r\u00e9. Ensuite, suivez les \u00e9tapes suivantes pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>Cliquez sur <strong>Sites statiques<\/strong> dans la colonne lat\u00e9rale de gauche, puis sur <strong>Ajouter un site<\/strong>.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez d\u00e9ployer.<\/li>\n<li>Attribuez un nom unique \u00e0 votre site.<\/li>\n<li>Ajoutez les param\u00e8tres de construction dans le format suivant :\n<ul>\n<li><strong>Commande de construction :<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Version du n\u0153ud :<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>R\u00e9pertoire de publication :<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<p>Et le tour est jou\u00e9 ! En quelques secondes, vous disposez d&rsquo;un site d\u00e9ploy\u00e9. Un lien est fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre site. Vous pourrez par la suite ajouter votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\" target=\"_blank\" rel=\"noopener noreferrer\">domaine personnalis\u00e9<\/a> et votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\" target=\"_blank\" rel=\"noopener noreferrer\">certificat SSL<\/a> si vous le souhaitez.<\/p>\n<p>Comme alternative \u00e0 l&rsquo;h\u00e9bergement de site statique, vous pouvez opter pour le d\u00e9ploiement de votre site statique avec l&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;application<\/a> de Kinsta, qui offre une plus grande flexibilit\u00e9 d&rsquo;h\u00e9bergement, une plus large gamme d&rsquo;avantages et l&rsquo;acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes. Par exemple, l&rsquo;\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l&rsquo;aide d&rsquo;un fichier Docker et des <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\" target=\"_blank\" rel=\"noopener noreferrer\">analyses compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Ce guide a expliqu\u00e9 le processus de cr\u00e9ation d&rsquo;un site statique avec SvelteKit. De la mise en place de votre environnement de d\u00e9veloppement au d\u00e9ploiement, vous disposez d\u00e9sormais des connaissances n\u00e9cessaires pour cr\u00e9er facilement des sites statiques performants.<\/p>\n<p>Construire des sites statiques avec SvelteKit offre un m\u00e9lange parfait de performance et de simplicit\u00e9, garantissant que vos projets web brillent sur Internet.<\/p>\n<p><em>Il est maintenant temps de mettre vos connaissances en pratique et de commencer \u00e0 construire votre propre site statique avec SvelteKit. Vous avez d\u00e9j\u00e0 utilis\u00e9 SvelteKit ? N&rsquo;h\u00e9sitez pas \u00e0 partager vos projets et vos exp\u00e9riences dans la section des commentaires ci-dessous.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les sites statiques sont de plus en plus populaires en raison de leur rapidit\u00e9, de leur s\u00e9curit\u00e9 et de leur simplicit\u00e9. Lorsqu&rsquo;il s&rsquo;agit de construire des &#8230;<\/p>\n","protected":false},"author":287,"featured_media":74063,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[978,979,1011],"class_list":["post-74062","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-erreurs-javascript","topic-frameworks-javascript","topic-generateurs-sites-statiques"],"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>Comment construire un site statique avec SvelteKit - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d&#039;un site statique rapide comme l&#039;\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu&#039;au d\u00e9ploiement avec 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\/fr\/blog\/statique-sveltekit\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment construire un site statique avec SvelteKit\" \/>\n<meta property=\"og:description\" content=\"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d&#039;un site statique rapide comme l&#039;\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu&#039;au d\u00e9ploiement avec Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T10:03:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-06T09:06:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/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=\"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d&#039;un site statique rapide comme l&#039;\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu&#039;au d\u00e9ploiement avec Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment construire un site statique avec SvelteKit\",\"datePublished\":\"2023-11-04T10:03:11+00:00\",\"dateModified\":\"2023-11-06T09:06:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/\"},\"wordCount\":2295,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/\",\"name\":\"Comment construire un site statique avec SvelteKit - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg\",\"datePublished\":\"2023-11-04T10:03:11+00:00\",\"dateModified\":\"2023-11-06T09:06:46+00:00\",\"description\":\"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d'un site statique rapide comme l'\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu'au d\u00e9ploiement avec Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"G\u00e9n\u00e9rateurs de sites statiques\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/generateurs-sites-statiques\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment construire un site statique avec SvelteKit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"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\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment construire un site statique avec SvelteKit - Kinsta\u00ae","description":"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d'un site statique rapide comme l'\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu'au d\u00e9ploiement avec 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\/fr\/blog\/statique-sveltekit\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment construire un site statique avec SvelteKit","og_description":"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d'un site statique rapide comme l'\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu'au d\u00e9ploiement avec Kinsta.","og_url":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-11-04T10:03:11+00:00","article_modified_time":"2023-11-06T09:06:46+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d'un site statique rapide comme l'\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu'au d\u00e9ploiement avec Kinsta.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment construire un site statique avec SvelteKit","datePublished":"2023-11-04T10:03:11+00:00","dateModified":"2023-11-06T09:06:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/"},"wordCount":2295,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/","url":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/","name":"Comment construire un site statique avec SvelteKit - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg","datePublished":"2023-11-04T10:03:11+00:00","dateModified":"2023-11-06T09:06:46+00:00","description":"Apprenez le processus \u00e9tape par \u00e9tape de la cr\u00e9ation d'un site statique rapide comme l'\u00e9clair avec SvelteKit. Depuis la configuration initiale jusqu'au d\u00e9ploiement avec Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/11\/static-sveltekit.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/statique-sveltekit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"G\u00e9n\u00e9rateurs de sites statiques","item":"https:\/\/kinsta.com\/fr\/sujets\/generateurs-sites-statiques\/"},{"@type":"ListItem","position":3,"name":"Comment construire un site statique avec SvelteKit"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","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\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/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\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/74062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=74062"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/74062\/revisions"}],"predecessor-version":[{"id":74073,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/74062\/revisions\/74073"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/74062\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/74063"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=74062"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=74062"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=74062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}