Création d'un Blog Performant avec Qwik

Vous pouvez trouver le code source de ce blog sur GitHub.

Tour d'horizon

Le problème avec les blogs

Les blogs sont un support de communication efficace. Ils servent autant les entreprises que les particuliers.
Mais il existe plusieurs types de blogs et méthodes pour les construire. Certaines solutions sont complexes.

WordPress est l'option la plus courante. C'est simple à mettre en place pour des besoins basiques.
Pourtant, WordPress reste un CMS complexe. Il est lourd, peu performant et difficile à maintenir.

Je vous propose une alternative simple, performante et personnalisable.
Commençons par les bases d'un bon blog technique.

Les fondamentaux d'un blog technique réussi

Un blog technique efficace repose sur plusieurs piliers :

Performance optimale : Privilégiez du contenu statique avec peu de JavaScript pour un chargement rapide.
Design personnalisé : Une interface unique et simple.
Accessibilité : Un contenu lisible avec thème clair/sombre.
Simplicité de gestion : Évitez les CMS complexes.

Contrairement à WordPress, ma solution offre :

Un chargement plus rapide
Plus de personnalisation (thème, couleurs, qui ne depend pas de plugins externes)
Une meilleure flexibilité technique
Un référencement optimisé

Architecture technique recommandée

Choix des technologies

Pour cet exemple, j'ai choisi une stack moderne et performante :

Qwik : Framework innovant avec résumable hydration
MDX : Combinaison de Markdown et composants React
Tailwind CSS avec DaisyUI : Pour un design système cohérent
Cloudinary : Solution optimisée pour la gestion d'images

Cette configuration permet un développement rapide et simple.

Tailwind et DaisyUI sont mes choix personnels.
Cette combinaison est efficace sans avoir besoin de design préalable. Vous pouvez aussi utiliser du CSS classique.

Cloudinary héberge et distribue les images efficacement.
Mais tout CDN classique peut faire l'affaire.

J'utilise Qwik comme framework, mais d'autres options existent :
Next.js ou Remix par exemple.
L'important est de choisir un framework efficace que vous maîtrisez.

Les articles s'écrivent en Markdown (MDX).
Qwik propose un support MDX natif, très pratique.
Votre framework doit gérer le Markdown, nativement ou via plugin.

Installation et configuration

Initialisation du projet :
```
bun create qwik@latest
```
Configuration des outils :

bun run qwik add tailwind
bun add -D daisyui@latest

3.Thématisation (fichier CSS principal) :

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes:
    silk --default,
    night --prefers-dark;
}

Gestion du contenu

Structure des articles

Les articles sont écrits dans le dossier src/routes/articles.
Cette approche suit le système de routes classique de Qwik.

Cette méthode est simple et efficace pour :

Écrire de nouveaux articles
Gérer le contenu existant
Maintenir une structure claire

Elle convient particulièrement pour un nombre limité d'articles.

Format des articles

Les articles utilisent le format MDX avec frontmatter.
Le frontmatter gère les métadonnées essentielles :

Informations SEO
Classement des articles
Système de tri

Exemple typique :

---
slug: "mon-article"
title: "Titre de l'article"
description: "Description SEO"
date: "2023-11-15"
tags: ["Qwik", "Performance"]
---

Validation des métadonnées

J'utilise Zod pour valider le schéma des articles.
Cela garantit que le frontmatter respecte bien le format attendu.

Cette étape n'est pas obligatoire. Je profite simplement que Qwik intègre déjà Zod.

Exemple de schéma de validation :

import { z } from "zod";

export const FrontmatterSchema = z.object({
  title: z.string().min(1, "Le titre est requis"),
  date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Format YYYY-MM-DD requis"),
  slug: z
    .string()
    .min(1, "Le slug est requis")
    .regex(/^[a-zA-Z0-9-]+$/, "Le slug doit être alphanumérique avec tirets")
    .optional(),
  description: z.string().default(""),
  featured: z.boolean().default(false),
  author: z.string().default("anonymous"),
  tags: z.array(z.string()).default([]),
  published: z.boolean().default(true),
  image: z.string().optional(),
  readingTime: z.number().optional(),
});

export type ArticleFrontmatter = z.infer<typeof FrontmatterSchema>;

Récupération des articles

Maintenant que notre schéma de frontmatter est défini, nous pouvons implémenter les fonctions pour récupérer ces métadonnées. Cela nous permettra ensuite d'effectuer des tris, des classements et des recherches sur nos pages d'articles.

import { isDev } from "@builder.io/qwik/build";
import { type ArticleFrontmatter, FrontmatterSchema } from "./articleSchema";
import { z } from "zod";

export const getArticles = async (): Promise<ArticleFrontmatter[]> => {
  const articlesGlob = import.meta.glob("/src/routes/articles/**/index.mdx", {
    eager: !isDev,
    import: "frontmatter",
  });

  if (isDev) {
    const modules = await Promise.all(
      Object.values(articlesGlob).map((loader) => loader()),
    );
    return z.array(FrontmatterSchema).parse(modules);
  }

  return z.array(FrontmatterSchema).parse(Object.values(articlesGlob));
};

Vous pouvez maintenant utiliser le resultat de cette fonction pour implémenter vos fonctions de tri, de recherche, de classement, etc.

Par exemple, voici une fonction de tri par date :

/**
 * Trie les articles par date (du plus récent au plus ancien)
 * @param articles Liste d'articles
 * @returns Articles triés par date
 */
export const sortArticlesByDate = (
  articles: ArticleFrontmatter[],
): ArticleFrontmatter[] => {
  return [...articles].sort(
    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
  );
};

Conseils pour la structure

Organisation des composants

Les fonctions implémentées précédemment seront utilisées dans votre page d'accueil (src/routes/index.tsx). Vous pourrez ainsi :

Afficher les derniers articles
Créer un carrousel d'articles
Implémenter un système de recherche
Ajouter d'autres fonctionnalités

Bonnes pratiques

Découpage en composants réutilisables :
- ArticleCard pour l'affichage unitaire
- ArticleCarousel pour les présentations multiples
- Barre de navigation et footer dédiés

Utilisation des layouts :
- Évite la duplication de code
- Essentiel pour les pages d'articles
- Permet d'inclure des éléments communs (navigation, sidebar)
- Améliore le référencement en facilitant le crawling

Sécurité et performances

Pour un blog statique :

Évitez les appels à des APIs sécurisées
Ne pas exposer de clés API dans le code client

Cette approche garantit :

Une meilleure sécurité
Des performances optimales
Une maintenance simplifiée

Cependant, certaines fonctionnalités seront dans ce cas impossibles, comme avoir des utilisateurs, des commentaires ou reactions sur les articles. Ou encore integrer la plupart des services tiers requierant des clés API.

Déploiement et hébergement

Site statique

Github Pages
Cette solution gratuite est idéale pour les sites statiques. Elle bénéficie du CDN intégré à GitHub et s'installe facilement. Les GitHub Actions permettent de reconstruire et déployer automatiquement le site à chaque modification.

Pour configurer Qwik en mode statique :

Exécutez bun run qwik add static pour générer l'adaptateur
Modifiez origin dans adapters/static/vite.config.ts avec votre domaine (ex: https://blog.perso.com)
Lancez la construction avec bun run qwik build
Déployez le contenu du dossier /dist sur GitHub Pages

Solution Docker avancée
Cette approche universelle permet un déploiement sur divers environnements (serveur dédié, cluster Kubernetes, etc.). Le Dockerfile doit inclure :

Les étapes de build identiques à la solution GitHub Pages
Un serveur web léger comme Nginx pour servir les fichiers statiques

Cette méthode offre plus de flexibilité mais nécessite des connaissances en administration système. Elle convient particulièrement si vous souhaitez intégrer votre blog à une infrastructure existante.

Site avec SSR (Server Side Rendering)

La solution SSR nécessite un environnement Node.js et suit l'exemple officiel de Dockerfile fourni par Qwik. Les particularités :

Pas besoin d'adaptateur statique
Possibilité d'intégrer des fonctionnalités backend sécurisées
Protection des clés API côté serveur

Cette approche est recommandée pour :

Les fonctionnalités interactives (commentaires, réactions)
Les cas nécessitant des appels API sécurisés
Les projets nécessitant un rendu dynamique

Le déploiement peut s'effectuer sur toutes les plateformes supportant Node.js (Fly.io, Render, Google Cloud, etc.).

Optimisation SEO avancée

Pour maximiser votre référencement :

Balises méta complètes comme présenté dans l'en-tête
Schéma Structured Data pour les extraits enrichis
URL sémantiques avec des slugs clairs
Optimisation des images via la distribution avec un cdn
Contenu hiérarchisé avec des titres pertinents (H2, H3)
Liens canoniques pour éviter le contenu dupliqué

Conclusion

Ce guide vous a présenté une méthode complète pour créer un blog technique performant avec Qwik. Les avantages de cette solution sont nombreux :

Temps de chargement ultra-rapide
Meilleur référencement naturel
Expérience développeur optimale pour l'ajout de nouveaux articles
Maintenance simplifiée
Coûts d'hébergement réduits

Pour aller plus loin, je vous recommande d'explorer :

La documentation officielle de Qwik
Les bonnes pratiques SEO techniques:

N'hésitez pas à adapter cette solution à vos besoins spécifiques et à partager vos retours d'expérience !