Les sites statiques sont de plus en plus populaires en raison de leur rapidité, de leur sécurité et de leur simplicité. Lorsqu’il s’agit de construire des sites statiques, plusieurs outils et frameworks sont disponibles, mais l’un d’entre eux gagne rapidement en popularité : SvelteKit.
Ce guide vous accompagne dans la création d’un site statique avec SvelteKit, de l’installation au déploiement avec l’hébergement de sites statiques de Kinsta, gratuitement.
Qu’est-ce que SvelteKit ?
SvelteKit est un framework web robuste conçu pour créer des interfaces utilisateur, y compris des sites statiques. Il est connu pour ses performances, sa simplicité et sa capacité à créer des composants avec une approche déclarative.
SvelteKit étend les capacités du framework Svelte en ajoutant le routage, le rendu côté serveur, etc.
Démarrer avec SvelteKit
Pour suivre ce guide, nous supposons que vous avez :
- Des connaissances fondamentales en HTML, CSS et JavaScript.
- Des connaissances de base sur Svelte.
- Node.js et npm installés sur votre ordinateur.
Pour créer votre nouvelle application SvelteKit, suivez les étapes ci-dessous.
- Créez un nouveau projet en exécutant :
npm create svelte@latest my-appCette commande permet d’échafauder un nouveau projet dans le répertoire my-app, en demandant de configurer certains outils de base, tels que TypeScript. Assurez-vous de choisir l’option Skeleton project et remplacez my-app par le nom de votre choix pour votre projet.
- Naviguez dans le répertoire du projet et installez ses dépendances :
cd my-app
npm install- Exécutez
npm run devpour démarrer le serveur de développement local surlocalhost:5173.
Comprendre la structure des fichiers SvelteKit
Lorsque vous ouvrez votre projet dans un éditeur de code, vous verrez la structure suivante. Il est essentiel de comprendre cette structure car elle vous aide à organiser votre code de manière efficace.
/
|-- /src
|-- /lib
|-- /routes
|-- +page.svelte
|-- app.html
|-- /static
|-- svelte.config.js- /src : Il s’agit du cœur de votre projet, qui contient plusieurs sous-répertoires et fichiers :
- /lib : Ce répertoire contient des bibliothèques, des utilitaires ou des modules personnalisés. C’est un bon endroit pour stocker du code réutilisable qui peut être utilisé dans l’ensemble de votre application.
- /routes : Le répertoire routes est essentiel pour définir les différentes pages ou vues de votre application. Chaque page est représentée par un fichier .svelte, tel que +page.svelte. Ces fichiers .svelte contiennent les composants, la logique et les styles spécifiques à cette page.
- app.html : Ce fichier est le point d’entrée de votre application. C’est là que la structure principale de votre page web est définie.
- /static : Ce répertoire est utilisé pour stocker des ressources statiques, telles que des images, des polices de caractères ou tout autre fichier qui n’a pas besoin d’être traité par votre application. Ces ressources peuvent être directement référencées dans vos composants HTML et Svelte.
- svelte.config.js : Ce fichier de configuration vous permet de personnaliser divers aspects de votre projet SvelteKit. Vous pouvez l’utiliser pour configurer le rendu côté serveur, définir des mises en page personnalisées, etc.
Le routage dans SvelteKit
L’une des caractéristiques les plus remarquables de SvelteKit est son système de routage. Il suit une approche basée sur un système de fichiers, où les chemins d’URL sont définis par des fichiers et des dossiers dans le répertoire src/routes, ce qui le rend intuitif et simple à gérer.
Dans SvelteKit, chaque fichier correspondant à une route doit être nommé +page.svelte. Par exemple, le fichier d’index de votre site SvelteKit est situé dans le dossier routes et nommé +page.svelte.
Ajoutez le code suivant à ce fichier pour créer la page d’accueil :
<!-- src/routes/+page.svelte -->
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting/">
<div class="btn">Read more</div>
</a>
</div>
<style>
.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6e7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width: 700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}
</style>Pour créer une route imbriquée dans SvelteKit, par exemple une page « about » accessible à l’adresse localhost:5173/about, vous devez créer un dossier dans le dossier routes avec un nom qui représente le chemin d’accès à l’URL. Dans ce dossier, créez un fichier +page.svelte à rendre pour la route.
Ajoutez le code suivant à routes/about/+page.svelte:
<div class="about_cont">
<h2>About</h2>
<div class="about_info">
<div class="about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinsta.com/static-site-hosting/">
host up to 100 static websites
</a>{' '}
for free. This can be done by pushing your code to your preferred Git provider
(Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
</p>
<p>
As an alternative to Static Site Hosting, you can opt for deploying your
static site with Kinsta’s{' '}
<a> href="https://kinsta.com/application-hosting/">
Application Hosting
</a>
, which provides greater hosting flexibility, a wider range of benefits,
and access to more robust features. For example, scalability, customized
deployment using a Dockerfile, and comprehensive analytics encompassing real-time
and historical data.
</p>
</div>
<iframe> width="560" height="315" src="https://www.youtube.com/embed/H7CNbsda8OA?si=40FGVlNvJ74_6hlj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</div>
</div>
<style>>
.about_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.about_info {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
}
.about_text {
flex-basis: 50%;
}
.about_text p {
margin-bottom: 20px;
font-size: 18px;
}
.about_img {
flex-basis: 50%;
width: 200px;
border-radius: 10px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
.about_img {
width: 100%;
}
}
</style>Tout style ajouté à votre composant Svelte est délimité et n’affecte pas les autres composants.
Il est essentiel de comprendre que SvelteKit gère la navigation entre les pages à l’aide d’éléments standard <a>, ce qui rend le processus de navigation intuitif. Il n’est pas nécessaire d’importer des composants supplémentaires comme <Link>, comme c’est le cas dans React. Dans la section suivante, nous allons créer un composant Navigation qui sera ajouté à chaque page.
Pour le projet actuel, la structure de route ressemble à ceci :
|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelteUtilisation des composants dans SvelteKit
Pour rendre votre code plus modulaire, vous pouvez créer des composants et les importer dans vos pages. Par exemple, vous pouvez créer un composant Navbar.svelte dans le dossier routes:
<!-- src/routes/Navbar.svelte -->
<nav>
<a href="/">
<img src="/kinsta-logo.png" alt="" class="logo-img" />
</a>
<div class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Posts</a>
</div>
</nav>Ensuite, importez-le dans la page d’accueil +page.svelte comme ceci :
<!-- src/routes/+page.svelte -->
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting">
<div> class="btn">Read more</div>
</a>
</div>
<style>
/* CSS styles */
</style>Pour les composants globaux tels que Navbar et Footer, qui sont utilisés dans plusieurs fichiers, créez-les dans le dossier src/lib afin d’éviter les longs chemins d’importation. Lorsque vous créez des composants ou des modules dans le dossier lib, vous pouvez les importer dans n’importe quel composant à l’aide de l’alias d’importation $lib:
<script>
import Navbar from '$lib/Navbar.svelte'
</script>Pour utiliser des composants autonomes, par exemple, supposons que vous ayez besoin d’un composant uniquement pour la page À propos, créez-le dans la route routes/about, puis importez-le dans la page.
Pour ce projet, vous pouvez également créer un composant Footer dans le dossier lib et ajouter ce code :
<div class="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>Ensuite, importez-le dans toutes les pages.
Utilisation de la mise en page dans SveletKit
Pour éviter d’importer des composants dans de nombreuses pages, SvelteKit vous permet de définir des dispositions pour vos pages à l’aide de fichiers +layout.svelte.
La création d’une mise en page qui s’applique à toutes les pages est simple. Créez un fichier nommé src/routes/+layout.svelte et personnalisez-le avec le balisage, les styles et le comportement souhaités. La condition essentielle est d’inclure un élément pour accueillir le contenu de la page.
Par exemple, vous pouvez intégrer les composants Navbar et Footer dans cette mise en page :
<script>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
</script>
<div class="layout">
<Navbar />
<slot />
<Footer />
</div>L’élément <slot> permet d’insérer le contenu de chaque page dans la mise en page.
Les mises en page peuvent également être imbriquées pour des pages spécifiques. Par exemple, si vous avez une page /dashboard avec des pages imbriquées comme /profile et /settings, vous pouvez créer une mise en page spéciale :
|-- /dashboard
|-- /profile
|-- +page.svelte
|-- /settings
|-- +page.svelte
|-- +layout.svelteNavigation programmatique dans SvelteKit
SvelteKit fournit une fonction goto pour la navigation programmatique. Par exemple, pour naviguer vers la page /dashboard après une action de connexion :
<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>Style dans SvelteKit
SvelteKit prend en charge le CSS traditionnel pour styliser vos pages. Les styles peuvent être définis dans vos composants Svelte à l’aide de la balise <style>, ou vous pouvez choisir de lier des feuilles de style externes.
Vous remarquerez peut-être que les composants Navbar et Footer n’ont pas de styles spécifiques. Pour y remédier, il est conseillé d’appliquer un style global. Pour ce faire, créez un fichier CSS dans le dossier src et importez-le dans votre fichier de mise en page racine.
Pour une meilleure organisation, créez un dossier styles dans le répertoire src. Ce dossier peut contenir tous vos styles. Dans le cadre de ce projet, créez un fichier global.css dans le dossier styles et ajoutez le code suivant :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}Vous pouvez ensuite importer le fichier CSS dans votre fichier de mise en page afin qu’il soit global et fonctionne pour tous les fichiers :
<script>>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles/global.css';
</script>Chargement de données avec SvelteKit
Lorsque vous travaillez avec SvelteKit, vous avez souvent besoin de charger des données dans vos mises en page, pages et composants. Ces données peuvent provenir d’API externes, de bases de données ou de votre serveur local. Pour gérer cela, vous pouvez utiliser un fichier +page.js pour les pages et +layout.js pour les mises en page.
Dans votre projet SvelteKit, un fichier +page.svelte peut avoir un frère +page.js qui exporte une fonction de chargement. La valeur de retour de cette fonction est mise à la disposition de la page par l’intermédiaire de la propriété data. Prenons un exemple : supposons que vous souhaitiez créer une route pour récupérer une liste d’articles à partir de l’API JSON Placeholder.
Pour charger les données de l’API, créez un fichier +page.js dans le dossier posts. Ce fichier exporte une fonction load.
export const load = async () => {
const title = "Hello World";
return {
title,
};
};La fonction load est censée renvoyer un objet, qui est fourni comme accessoire au fichier +page.svelte. Vous pouvez ensuite accéder à la valeur title à l’aide de l’accessoire data:
<script>>
export let data;
const title = data.title;
</script>
<div class="blog_cont">
<h2>{title}</h2>
</div>Passons maintenant à l’interaction avec l’API JSON Placeholder posts. Pour ce faire, vous pouvez utiliser l’API JavaScript Fetch, mais SvelteKit propose sa propre méthode fetch que vous pouvez utiliser pour récupérer les données de vos points d’extrémité API avant de rendre une page :
export const load = async (loadEvent) => {
const { fetch } = loadEvent;
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=10'
);
const posts = await response.json();
return {
posts,
};
};Dans le code ci-dessus, nous extrayons la méthode fetch de loadEvent et effectuons la requête d’API. La réponse est ensuite envoyée en tant que props à la page Posts, qui passe en boucle et affiche toutes les publications :
<script>
export let data;
const posts = data.posts;
</script>
<div class="blog_cont">
<h2>Posts</h2>
<div class="blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="blog_card">
<h3>{post.title}</h3>
<p>
{post.body}
</p>
</a>
{/each}
</div>
</div>
<style>
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all 0.5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
</style>Voici à quoi ressemble l’arborescence actuelle des fichiers :
|-- /src
|-- /lib
|-- Footer.svelte
|-- Navbar.svelte
|-- /routes
|-- /about
|-- +page.svelte
|-- /posts
|-- +page.js
|-- +page.svelte
|-- +page.svelte
|-- +layout.svelte
|-- /styles
|-- global.cssRoutage dynamique avec SvelteKit
Vous avez maintenant 10 articles affichés sur votre page d’articles ; si vous voulez créer une page individuelle pour chaque article, la meilleure façon de le faire est de créer une route dynamique.
Pour cela, vous devez recevoir la valeur slug de la route et l’utiliser comme paramètre pour rechercher l’article. Dans SvelteKit, vous pouvez le faire en créant un dossier entre crochets avec le nom du paramètre. Voici comment vous pouvez configurer des pages d’articles individuels :
- Créez un dossier [postid] dans le dossier posts. Le [postid] représente le paramètre dynamique qui peut contenir des valeurs telles que des identifiants d’articles ou des mots-clés.
- Dans le dossier [postid], créez deux fichiers :
- +page.svelte : Ce fichier définira la mise en page et la structure de vos pages d’articles individuelles.
- +page.js : ce fichier JavaScript gérera la récupération des données et la logique propre aux différents articles.
Dans le fichier +page.js, récupérez le paramètre postid de la route et utilisez-le pour interroger l’article en question :
export const load = async (loadEvent) => {
const { fetch, params } = loadEvent;
const { postid } = params;
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postid}`
);
const post = await response.json();
return {
post,
};
};Vous pouvez ensuite accéder à data en tant que paramètre dans le fichier +page.svelte:
<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="blog_content">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
</div>
<style>>
.blog_content h3 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
}
</style>Vous pouvez consulter le code source complet de ce projet SvelteKit sur GitHub. Vous pouvez également consulter la documentation officielle de SvelteKit pour plus d’informations.
Déployer des sites statiques SvelteKit avec Kinsta
Kinsta vous permet d’héberger gratuitement jusqu’à 100 sites web statiques directement depuis votre fournisseur Git préféré (Bitbucket, GitHub ou GitLab).
Avant de commencer à pousser votre site SvelteKit, il est important de l’adapter à votre cible de déploiement. Dans ce projet particulier, nous nous concentrons sur l’utilisation de l’hébergement de sites statiques de Kinsta, ce qui nécessite de configurer SvelteKit en tant que générateur de sites statiques (SSG).
Voici comment obtenir votre site pré-rendu en tant que collection de fichiers statiques :
- Installez @sveltejs/adapter-static en exécutant la commande suivante :
npm i -D @sveltejs/adapter-static- Ensuite, adaptez votre fichier svelte.config.js en remplaçant
adapter-autoparfallbackà404.html:
import adapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({ fallback: '404.html' }),
},
};
export default config;Maintenant, poussez vos codes vers votre fournisseur Git préféré. Ensuite, suivez les étapes suivantes pour déployer votre site statique sur Kinsta :
- Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
- Autorisez Kinsta avec votre fournisseur Git.
- Cliquez sur Sites statiques dans la colonne latérale de gauche, puis sur Ajouter un site.
- Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer.
- Attribuez un nom unique à votre site.
- Ajoutez les paramètres de construction dans le format suivant :
- Commande de construction :
npm run build - Version du nœud :
18.16.0 - Répertoire de publication :
build
- Commande de construction :
- Enfin, cliquez sur Créer un site.
Et le tour est joué ! En quelques secondes, vous disposez d’un site déployé. Un lien est fourni pour accéder à la version déployée de votre site. Vous pourrez par la suite ajouter votre domaine personnalisé et votre certificat SSL si vous le souhaitez.
Comme alternative à l’hébergement de site statique, vous pouvez opter pour le déploiement de votre site statique avec l’hébergement d’application de Kinsta, qui offre une plus grande flexibilité d’hébergement, une plus large gamme d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker et des analyses complètes englobant des données en temps réel et historiques.
Résumé
Ce guide a expliqué le processus de création d’un site statique avec SvelteKit. De la mise en place de votre environnement de développement au déploiement, vous disposez désormais des connaissances nécessaires pour créer facilement des sites statiques performants.
Construire des sites statiques avec SvelteKit offre un mélange parfait de performance et de simplicité, garantissant que vos projets web brillent sur Internet.
Il est maintenant temps de mettre vos connaissances en pratique et de commencer à construire votre propre site statique avec SvelteKit. Vous avez déjà utilisé SvelteKit ? N’hésitez pas à partager vos projets et vos expériences dans la section des commentaires ci-dessous.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire