L’engouement pour les sites statiques ne cesse de croître en raison de leur rapidité, de leur sécurité et de leur simplicité. Lorsqu’il s’agit de construire des sites statiques, divers outils et frameworks sont à disposition, mais l’un d’entre eux se distingue rapidement : SvelteKit.
Ce guide vous guidera à travers toutes les étapes, de l’installation à la mise en service, pour créer un site statique avec SvelteKit.
Sommaire
Qu’est-ce que SvelteKit ?
SvelteKit est un framework web robuste conçu pour la création d’interfaces utilisateur, y compris des sites statiques. Il est renommé pour ses performances, sa simplicité, et sa capacité à construire des composants selon une approche déclarative.
SvelteKit étend les fonctionnalités du framework Svelte en intégrant le routage, le rendu côté serveur, etc.
Pour démarrer avec SvelteKit, nous supposons que vous possédez :
- Des connaissances fondamentales en HTML, CSS et JavaScript.
- Une compréhension de base de Svelte.
- js et npm installés sur votre ordinateur.
Suivez les étapes ci-dessous pour créer votre nouvelle application SvelteKit :
- Créez un nouveau projet en exécutant la commande suivante :
npm create svelte@latest my-app
Cette commande permet de mettre en place un nouveau projet dans le répertoire “my-app”, en vous 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 que vous souhaitez donner à votre projet.
- Naviguez dans le répertoire du projet et installez ses dépendances en exécutant la commande :
cd my-app npm install - Enfin, lancez le serveur de développement local sur localhost:5173.
Comprendre la structure des fichiers SvelteKit
Lorsque vous ouvrez votre projet dans un éditeur de code, vous découvrirez la structure suivante. Il est essentiel de bien comprendre cette organisation car elle vous aide à structurer 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, comprenant plusieurs sous-répertoires et fichiers.
/lib : Ce répertoire contient des bibliothèques, des utilitaires, ou des modules personnalisés. C’est un emplacement idéal pour stocker du code réutilisable qui peut être utilisé dans l’ensemble de votre application.
/routes : Ce répertoire 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 adopte 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 facile à 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 est 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 appsStSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://apps.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, suivez ces étapes :
- Créez un dossier dans le répertoire routes avec un nom représentant le chemin d’accès à l’URL. Par exemple, pour “/about”, créez un dossier “about” dans routes.
- À l’intérieur de 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> appsallows 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 apps. </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>
Il est important de noter que tout style ajouté à votre composant Svelte est encapsulé, ce qui signifie qu’il ne affecte pas les autres composants.
SvelteKit gère la navigation entre les pages en utilisant des éléments standard tels que <a>, simplifiant ainsi le processus de navigation. Il n’est pas nécessaire d’importer des composants supplémentaires tels que <Link>, comme c’est le cas dans React. Dans la section suivante, nous allons créer un composant Navigation qui sera inclus dans chaque page.
Pour le projet actuel, la structure des routes ressemble à ceci :
|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelteUtilisation des composants dans SvelteKit
Pour rendre votre code plus modulaire, vous avez la possibilité de créer des composants et de 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="/apps-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 suit :
<!-- src/routes/+page.svelte -->
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="home_hero">
<h1>Enjoy Static Site Hosting With apps.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://apps.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, utilisés dans plusieurs fichiers, il est recommandé de les créer dans le dossier src/lib afin d’éviter des chemins d’importation longs. Lorsque vous créez des composants ou des modules dans le dossier lib, vous pouvez les importer dans n’importe quel composant en utilisant l’alias d’importation $lib :
<script>
import Navbar from '$lib/Navbar.svelte'
</script>Si vous avez besoin d’un composant spécifique à une page, par exemple un composant uniquement pour la page “À propos”, créez-le dans le répertoire routes/about et 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 apps{' '}
<a> href="https://apps.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>Ensuite, importez-le dans la page d’accueil ou toute autre page où vous en avez besoin.
Utilisation de la mise en page dans SvelteKit
Pour éviter d’importer des composants dans de nombreuses pages, SvelteKit vous permet de définir des mises en page 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.svelteEnsuite, pour la page /dashboard/profile, vous pouvez créer une mise en page spécifique dans le dossier routes/dashboard/profile/+layout.svelte en suivant le même principe.
SvelteKit propose une fonction appelée `goto` pour effectuer une navigation programmatique. Par exemple, pour naviguer vers la page /dashboard après une action de connexion, vous pouvez utiliser la syntaxe suivante :
<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>Style dans SvelteKit
SvelteKit offre une prise en charge du CSS traditionnel pour la stylisation de 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.
Si vous remarquez que les composants Navbar et Footer n’ont pas de styles spécifiques, il est recommandé 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 principale.
Pour une organisation plus claire, vous pouvez créer 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;
}Ensuite, vous pouvez importer le fichier CSS dans votre fichier de mise en page principale pour qu’il soit global et s’applique à 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, il est souvent nécessaire de charger des données dans vos pages, mises en page 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 homologue +page.js qui exporte une fonction de chargement. La valeur de retour de cette fonction est mise à disposition de la page via 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 en tant que propriété à la page via 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 la méthode fetch de JavaScript, 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 l’objet loadEvent et effectuons la requête d’API. La réponse est ensuite envoyée en tant que propriétés à la page “Posts”, qui les utilise pour boucler et afficher 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 actuellement 10 articles affichés sur votre page d’articles ; si vous souhaitez créer une page individuelle pour chaque article, la meilleure façon de procéder est de mettre en place une route dynamique.
Pour ce faire, vous devez récupérer la valeur du slug de la route et l’utiliser comme paramètre pour rechercher l’article. Dans SvelteKit, vous pouvez le réaliser en créant un dossier entre crochets avec le nom du paramètre. Voici comment vous pouvez configurer des pages pour les 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.
- À l’intérieur du dossier [postid], créez deux fichiers :
– +page.svelte : Ce fichier définira la mise en page et la structure de vos pages pour les articles individuels.
– +page.js : Ce fichier JavaScript gérera la récupération des données et la logique propre à chaque article.
- 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>
Conclusion
Ce guide a couvert le processus de création d’un site statique avec SvelteKit. De la configuration de votre environnement de développement au déploiement, vous avez maintenant les connaissances nécessaires pour créer facilement des sites statiques performants.
La construction de sites statiques avec SvelteKit offre un équilibre optimal entre performance et simplicité, assurant que vos projets web se démarquent sur Internet.
