Construire un site statique performant avec SvelteKit

Introduction à SvelteKit

Les avantages des sites statiques, tels que leur rapidité, leur sécurité et leur simplicité, les propulsent de plus en plus vers le devant de la scène. Dans le domaine des outils et frameworks pour la construction de sites statiques, un acteur gagne rapidement en popularité : SvelteKit.

Découverte de SvelteKit

SvelteKit se positionne en tant que framework web robuste dédié à la création d’interfaces utilisateur, notamment pour les sites statiques. Il se distingue par ses performances, sa simplicité, et sa capacité à concevoir des composants de manière déclarative.

SvelteKit étend les fonctionnalités du framework Svelte en incorporant des éléments tels que le routage et le rendu côté serveur.

Lancement avec SvelteKit

Avant de plonger dans les détails de la création d’un site statique avec SvelteKit, certaines prérequis sont nécessaires :

Des connaissances de base en HTML, CSS et JavaScript.
Une compréhension élémentaire de Svelte.
Node.js et npm doivent être installés sur votre ordinateur.

Pour initier votre nouvelle application SvelteKit, suivez ces étapes :

bash

Copy code

npm create svelte@latest my-app

cd my-app

npm install

npm run dev

Exploration de la structure de fichiers

Lorsque vous ouvrez votre projet dans un éditeur de code, la structure suivante se dévoile. La compréhension de cette organisation est cruciale pour une gestion efficace du code.

lua

Copy code

|– /src

|– /lib

|– /routes

|– +page.svelte

|– app.html

|– /static

|– svelte.config.js

/src : Le cœur du projet, renfermant divers sous-répertoires et fichiers.
- /lib : Stockage idéal pour des bibliothèques, utilitaires ou modules réutilisables.
- /routes : Répertoire essentiel pour définir les différentes pages de l’application, chacune représentée par un fichier .svelte.
- app.html : Fichier point d’entrée de l’application, où la structure principale de la page web est définie.
/static : Répertoire destiné aux ressources statiques telles que des images, des polices de caractères, ou tout fichier ne nécessitant pas de traitement par l’application.
svelte.config.js : Fichier de configuration offrant une personnalisation du projet SvelteKit, notamment pour le rendu côté serveur et la définition de mises en page personnalisées.

Le Routage dans SvelteKit

Le système de routage de SvelteKit se distingue par son approche basée sur un système de fichiers. Les chemins d’URL sont définis par des fichiers et des dossiers dans le répertoire src/routes, assurant ainsi une gestion intuitive.

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.

Création de pages captivantes avec SvelteKit

Donner vie à la page d’accueil

Lorsque vous souhaitez créer une page d’accueil attrayante pour votre site statique avec SvelteKit, voici un exemple de code que vous pourriez utiliser :

html

Copy code

<!– src/routes/+page.svelte –>

<h1>Explorez l’Hébergement de Sites Statiques avec Kinsta StSH.</h1>

<p>Rapide, Sécurisé, Solution d’Hébergement Fiable.</p>

<div class=« btn »>En savoir plus</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>

Ce code crée une section accrocheuse avec des éléments tels qu’un titre dynamique, une description concise et un bouton incitant à en savoir plus.

Plongée dans l’univers « À Propos »

L’ajout d’une page « À Propos » à votre site, accessible à l’adresse localhost:5173/about, nécessite quelques manipulations. Créez un dossier dans le répertoire routes avec le nom correspondant à l’URL, puis ajoutez un fichier +page.svelte à rendre pour cette route. Voici à quoi cela pourrait ressembler :

html

Copy code

<h2>À Propos</h2>

<p>

Kinsta vous permet de{‘ ‘}

héberger jusqu’à 100 sites statiques

</a>{‘ ‘}

gratuitement. Cette opération s’effectue en poussant votre code vers votre fournisseur Git préféré

(Bitbucket, GitHub ou GitLab) puis en le déployant sur Kinsta.

</p>

<p>

En tant qu’alternative à l’hébergement de sites statiques, vous pouvez opter pour le déploiement de votre

site statique avec le{‘ ‘}

Service d’Hébergement d’Applications de Kinsta

</a>

. Celui-ci offre une flexibilité d’hébergement accrue, une gamme plus étendue d’avantages,

et l’accès à des fonctionnalités plus robustes. Par exemple, la scalabilité, le déploiement personnalisé

à l’aide d’un Dockerfile, et des analyses approfondies couvrant les données en temps réel

et l’historique.

</p>

</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>

Cette portion de code crée une page « À Propos » comprenant des détails sur l’hébergement statique avec Kinsta, ainsi qu’une vidéo YouTube intégrée pour une expérience enrichissante.

Utilisation astucieuse des composants

SvelteKit facilite l’utilisation de composants pour rendre votre code plus modulaire. Par exemple, vous pouvez créer un composant Navbar.svelte pour la barre de navigation, puis l’importer dans chaque page. Voici à quoi cela pourrait ressembler :

html

Copy code

<!– src/routes/Navbar.svelte –>

<nav>

</a>

<a href=« / »>Accueil</a>

<a href=« /about »>À Propos</a>

<a href=« /posts »>Articles</a>

</div>

</nav>

Ensuite, vous pouvez l’importer dans votre page d’accueil +page.svelte comme ceci :

html

Copy code

<!– src/routes/+page.svelte –>

import Navbar from ‘./Navbar.svelte’

</script>

<h1>Découvrez l’Hébergement de Sites Statiques avec Kinsta.</h1>

<p>Rapide, Sécurisé, Solution d’Hébergement Fiable.</p>

<div class=« btn »>En savoir plus</div>

</a>

</div>

<style>

/* Styles CSS */

</style>

En suivant cette approche, les composants tels que Navbar et Footer peuvent être créés dans le dossier src/lib pour éviter des chemins d’importation excessivement longs. Par exemple, pour importer le composant Navbar depuis le dossier lib, utilisez l’alias d’importation $lib comme suit :

html

Copy code

import Navbar from ‘$lib/Navbar.svelte’

</script>

Maîtriser la mise en page avec SvelteKit

Pour une gestion plus efficace des composants sur différentes pages, SvelteKit propose une fonctionnalité de mise en page à l’aide de fichiers +layout.svelte. Créez un fichier nommé src/routes/+layout.svelte et personnalisez-le selon vos besoins en incluant des éléments tels que Navbar et Footer. L’élément <slot> permet d’insérer le contenu de chaque page dans la mise en page :

html

Copy code

import Navbar from ‘$lib/Navbar.svelte’;

import Footer from ‘$lib/Footer.svelte’;

</script>

</div>

Cette structure permet d’appliquer une mise en page cohérente à toutes les pages de votre site SvelteKit.

Maximiser le potentiel de SvelteKit : mises en page avancées et routage dynamique

Mises en page imbriquées pour une navigation intuitive

Lorsque la structure de votre site devient plus complexe, avec des pages imbriquées telles que le tableau de bord comportant des pages telles que le profil et les paramètres, SvelteKit propose une approche organisée. Voici un exemple de structure de dossier :

plaintext

Copy code

|– /dashboard

|– /profile

|– +page.svelte

|– /settings

|– +page.svelte

|– +layout.svelte

Cette organisation facilite la gestion des pages spécifiques à votre tableau de bord.

Navigation sans Encombre avec SvelteKit

SvelteKit offre une méthode programmatique de navigation grâce à la fonction goto. Par exemple, pour rediriger l’utilisateur vers la page /dashboard après une connexion réussie, voici comment utiliser cette fonction :

javascript

Copy code

import { goto } from ‘$app/navigation’;

async function login() {

// Action de connexion

goto(‘/dashboard’);

}

</script>

Cela simplifie la gestion des redirections après des actions utilisateur cruciales.

Affiner le Style avec SvelteKit

SvelteKit prend en charge les approches traditionnelles de stylisation, que ce soit en utilisant la balise <style> directement dans vos composants ou en liant des feuilles de style externes. Pour garantir une apparence homogène, même pour des composants tels que Navbar et Footer, il est recommandé d’appliquer un style global.

Créez un fichier CSS global, par exemple, global.css dans le dossier styles, avec des styles de base pour harmoniser votre site. Assurez-vous de l’importer dans votre fichier de mise en page principale pour une portée globale :

javascript

Copy code

import Navbar from ‘$lib/Navbar.svelte’;

import Footer from ‘$lib/Footer.svelte’;

import ‘../styles/global.css’;

</script>

Cela garantit une présentation uniforme sur toutes les pages de votre application.

Chargement de données avec élégance

Lors du travail avec SvelteKit, le chargement de données est souvent incontournable, que ce soit depuis des API externes, des bases de données ou votre serveur local. SvelteKit simplifie cette tâche avec les fichiers +page.js pour les pages et +layout.js pour les mises en page.

Imaginons que vous souhaitiez afficher une liste d’articles provenant de l‘API JSON Placeholder. Créez un fichier +page.js dans le dossier des articles et exportez une fonction de chargement, comme illustré ci-dessous :

javascript

Copy code

export const load = async () => {

const title = « Hello World »;

return {

title,

};

Dans le fichier +page.svelte associé, vous pouvez accéder à la valeur title via la propriété data :

javascript

Copy code

export let data;

const title = data.title;

</script>

<h2>{title}</h2>

</div>

Interaction avec des API externes

Pour un exemple concret d’interaction avec une API externe, prenons l’API JSON Placeholder pour afficher une liste d’articles. Le fichier +page.js ressemblerait à ceci :

javascript

Copy code

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,

};

Et dans le fichier +page.svelte associé, vous pouvez boucler à travers les articles et les afficher de manière structurée :

javascript

Copy code

export let data;

const posts = data.posts;

</script>

<h2>Articles</h2>

{#each posts as post}

<h3>{post.title}</h3>

</a>

{/each}

</div>

Routage dynamique pour une personnalisation inégalée

Supposons que vous ayez 10 articles affichés sur votre page d’articles, mais vous souhaitez créer une page individuelle pour chaque article. SvelteKit simplifie cela avec le routage dynamique.

Créez un dossier [postid] dans le dossier des articles, où [postid] représente le paramètre dynamique (tel qu’un identifiant d’article). Dans ce dossier, ajoutez deux fichiers : +page.svelte pour la mise en page et +page.js pour gérer la récupération des données spécifiques à chaque article.

Le fichier +page.js peut ressembler à ceci :

javascript

Copy code

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,

};

Et dans le fichier +page.svelte, vous pouvez accéder aux données spécifiques de l’article :

javascript

Copy code

export let data;

const post = data.post;

</script>

<div>

<h3>{post.title}</h3>

</div>

Vers l’excellence avec Kinsta

Kinsta offre une solution d’hébergement exceptionnelle, permettant d’accueillir gratuitement jusqu’à 100 sites web statiques directement depuis vos dépôts Git préférés (Bitbucket, GitHub ou GitLab).

Avant de déployer votre site SvelteKit sur Kinsta, assurez-vous de l’adapter à votre plateforme de déploiement. Dans ce contexte, nous explorons l’utilisation de l’hébergement de sites statiques de Kinsta, ce qui nécessite la configuration de SvelteKit en tant que générateur de sites statiques (SSG). Pour un déploiement réussi, suivez attentivement les étapes de configuration spécifiques à Kinsta.

Déploiement de votre site statique : SvelteKit et Kinsta en action

Pré-requis et configuration

Pour obtenir votre site pré-rendu en tant que collection de fichiers statiques, commencez par installer @sveltejs/adapter-static avec la commande suivante :

bash

Copy code

npm i -D @sveltejs/adapter-static

Ensuite, ajustez votre fichier svelte.config.js en remplaçant adapter-auto par fallback à 404.html :

javascript

Copy code

import adapter from ‘@sveltejs/adapter-static’;

const config = {

kit: {

adapter: adapter({ fallback: ‘404.html’ }),

};

export default config;

Déployer sur Kinsta : étapes simples

Une fois votre configuration prête, suivez ces étapes pour déployer votre site statique sur Kinsta :

Connexion à MyKinsta : Connectez-vous à MyKinsta ou créez un compte pour accéder à votre tableau de bord.
Autorisation avec Git : Autorisez Kinsta avec votre fournisseur Git pour faciliter la synchronisation.
Ajouter un Site Statique : Dans la colonne latérale, sélectionnez « Sites statiques » puis cliquez sur « Ajouter un site. »
Configurer le Site : Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer. Attribuez un nom unique à votre site.

Paramètres de Construction : Ajoutez les paramètres de construction nécessaires :

Commande de construction : npm run build
Version du nœud : 18.16.0
Répertoire de publication : build

Créer le Site : Enfin, cliquez sur « Créer un site. »

En quelques secondes, votre site est déployé, et un lien est fourni pour accéder à la version déployée. Vous pouvez ensuite personnaliser davantage avec l’ajout de votre domaine et de votre certificat SSL.

Choix entre statique et application

Si l’hébergement de site statique ne suffit pas, Kinsta propose également l’option d’hébergement d’application. Cette alternative offre une flexibilité accrue, une gamme d’avantages étendue et l’accès à des fonctionnalités plus avancées, telles que l’évolutivité, le déploiement personnalisé via Docker, et des analyses approfondies.

Vers des performances exceptionnelles

Ce guide a détaillé le processus de création et de déploiement d’un site statique avec SvelteKit, mettant l’accent sur la performance et la simplicité. Avec les étapes claires depuis la configuration jusqu’au déploiement, vous êtes désormais prêt à concevoir des sites statiques exceptionnels.