J’ai enfin décidé de créer mon site web. Mon île numérique où je peux y partager mes notes, mes découvertes, mes passions.

Ce premier article partage mon expérience sur la création de ce site web, détaillant les choix techniques, le design et le déploiement. Bien qu’il existe une pléthore de solutions “clés en main” pour créer un site web en quelques clics, cela manque un peu de sel. J’ai préféré une approche plus personnalisée qui correspond mieux à mes besoins de développeur. Mon objectif était de créer quelque chose d’épuré, simple à mettre en œuvre et à déployer, tout en gardant un contrôle total sur le code.

Un détour sur mon environnement de développement

Je code exclusivement sur Neovim qui me sert aussi à prendre des notes - c’est d’ailleurs sur Neovim que j’écris ces lignes au format Markdown. Neovim everywhere 🥳. Je lance Neovim dans une session tmux, outil dont je ne pourrais plus me passer tant il facilite la gestion des fenêtres et des sessions. Je consacrerai un article détaillé à mon environnement de développement.

Choix techniques

Pour mon site, j’ai choisi une stack moderne orientée performance et développement rapide :

SvelteKit : Framework principal offrant une excellente expérience développeur
Vite : Bundler ultra-rapide qui améliore significativement le temps de développement
TypeScript : Pour une meilleure fiabilité du code
mdsvex : Pour gérer facilement le contenu en Markdown
shiki : Pour la coloration syntaxique du code dans les articles du site
Open Props : Pour un design cohérent et moderne

Installation initiale

Voici la suite de commandes pour mettre en place l’environnement de développement :

npx sv create mon-blog-personnel
npm install mdsvex
npm install --save-dev typedoc-plugin-markdow
npm install open-props
npm install lucide-svelte
npm install shiki@latest
npm install shiki-theme

Sveltekit : le coeur du projet

SvelteKit, fondé sur Svelte, est conçu pour construire des applications web complètes. Il offre des fonctionnalités essentielles comme :

Le routage intégré
Le rendu côté serveur (SSR)
La génération de sites statiques
Une excellente performance par défaut

La structure initiale du projet se présente ainsi (éléments principaux) :

.
├── src
│   ├── app.html
│   ├── lib
│   │   └── index.ts
│   └── routes
│       └── +page.svelte
├── static
│   └── favicon.png
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

MDsveX : Markdown enrichi pour Svelte

L’utilisation de MDsveX (mdsvex) permet d’intégrer Markdown directement dans les composants Svelte. Bien utile puisque les articles de mon site sont écrits en Makdown.

J’ai rencontré un soucis lors de l’utilisation de mdsvex: l’absence de lazy loading automatique pour les images. Le lazy loading est une technique qui retarde le chargement des images jusqu’à ce qu’elles soient sur le point d’être visibles, améliorant ainsi les performances de chargement initial de la page.

Afin de résoudre ce soucis et ajouter automatiquement l’attribut loading="lazy", il suffit de créer un composant perso sous la forme d’un layout mdsvex(à ne pas confondre avec un layout.svelte) :

Dans le fichier mdsvex.config.js j’indique un layout par défaut (mdsvex.svelte) :

layout: {
 _: './src/mdsvex.svelte'
},

Création d’un composant perso imgqui remplace le composant par défaut posant soucis, ce composant ajoute loading="lazy" pour les images :

Création du fichier ./src/lib/componenents/custom/img.svelte où l’on indique quels éléments sont à remplacer :

<script lang="ts">export let src = "";
export let alt = "";
</script>

<img {src} {alt} loading="lazy" decoding="async" />

Création d’un fichier ./src/lib/components/custom/index.tsqui permet d’exporter le nouveau composant (et éventuellement d’autres à venir si le besoin s’en fait sentir) :

import img from './img.svelte';
export { img };

Enfin, création du fichier ./src/mdsvex.svlete :

<script lang="ts" context="module">import { img } from "\$lib/components/custom";
export { img };
</script>

<slot />

Typescript

J’ai choisi TypeScript pour plusieurs raisons :

Détection précoce des erreurs pendant le développement
Meilleure maintenabilité du code grâce au typage
Autocomplétion et refactoring plus efficaces
Documentation implicite grâce aux types

Organisation du contenu

Le contenu de mon site est basé sur des fichiers Markdown (md). Mon site propose 3 types de contenus :

les articles “classiques”
Galerie photos
Collection de wallpapers.

Les fichiers Markdown sont organisés dans deux répertoires principaux :

./src/content/posts pour les articles et photos
./src/content/wallpapers pour les wallpapers Les images des articles (posts ou wallpapers) sont stockées selon la structure suivante : ./static/media/{posts||wallpapers}/nomFichierMD/.

J’utilise les metadatas des fichiers markdown pour récupérer certaines informations (le titre de l’article, son type, , la date de publication). Par exemple, pour les articles de type wallpaper :

---
title: WP Human Mutation V1
date: 2024-08-28
type: wallpaper
description: Un wallpaper inspiré par le processus de mutation des Navigateurs de la Guilde du roman Dune
categories:
  - wallpaper
tags:
  - dark
published: true
lang: fr
featureImage: /media/wallpapers/wp-human-mutation-v1/feature-wp-human-mutation-v1.jpg
wallpaperInfo:
  - name: Medium Quality JPEG
    resolution: 2880x1800
    fileSize: 3.3MB
    fileFormat: JPEG
    downloadUrl: /media/wallpapers/wp-human-mutation-v1/wp-2880x1800-human-mutation-v1.jpg
  - name: High Quality JPEG
    resolution: 4320x2312
    fileSize: 7.8MB
    fileFormat: JPEG
    downloadUrl: /media/wallpapers/wp-human-mutation-v1/wp-4320x2312-human-mutation-v1.jpg
---

Dans cet exemple, les images (jpg) sont stockées dans le chemin : ./static/media/wallpapers/wp-human-mutation-v1/.

Design

J’aime le minimalisme. Le design de mon site est réalisé en conséquence. J’utilise les polices d’Open Props pour leur excellent rendu et leur cohérence visuelle.

J’ai délibérément choisi de ne pas implémenter de mode sombre : je trouve que ce mode nuit à la lisibilité du texte.

Déploiement du site : Vercel

J’ai choisi Vercel comme plateforme de déploiement pour sa simplicité et son efficacité. La configuration initiale est straightforward :

Connexion du dépôt GitHub à Vercel
Configuration automatique de la détection du framework (SvelteKit)
Déploiement automatique à chaque push sur la branche principale

Conclusion

La création de ce site en une journée a été possible grâce à la stack choisie (SvelteKit, TypeScript, MDsveX) qui offre un excellent équilibre entre facilité de développement et performances.

N’hésitez pas à me contacter pour plus de détails sur certains aspects spécifiques de l’implémentation.

Comment j'ai créé mon site web (en une journée)