Retour aux études de casWORDPRESS → ASTRO + MEDUSA · E-COMMERCE

Tatiana Miath : de WordPress + WooCommerce à un storefront Astro + Medusa

Comment nous avons migré le site d'une artiste indépendante vers un storefront statique bilingue (Astro) adossé à une boutique Medusa auto-hébergée : visuels allégés de 88 %, 10,3 ko de JavaScript sur tout le site, MP3 livrés par lien signé et catalogue géré par l'artiste elle-même.

Tatiana Miath — storefront Astro et boutique Medusa en ligne sur tatianamiath.com

Client

Tatiana Miath — Artiste indépendante, Floride (USA)

-88%
Poids des visuels (AVIF)
9,6 ko
Accueil compressé (HTML)
10,3 ko
JavaScript sur tout le site
Autonome
Catalogue géré par l'artiste

01. Le Client

ClientTatiana Miath, artiste (pop, afro-pop, drill — album Never Die)
SecteurMusique — vente directe : streaming, MP3, merchandising
LocalisationFloride (États-Unis), audience francophone et anglophone
Situation de départSite WordPress + WooCommerce hébergé sur un Oracle Free Tier devenu inaccessible
PérimètreStorefront bilingue, boutique en ligne, livraison numérique, back-office produits
Sitestatianamiath.com (site et boutique) · shop.tatianamiath.com (API + admin)
Date du projetSeptembre 2026
BudgetSur devis

02. Le Défi

Un site qu'elle ne contrôlait plus

❌ Avant

  • • WordPress + WooCommerce sur un hébergement gratuit (Oracle Free Tier)
  • • Hébergement de production inaccessible depuis le 18/09/2026 : plus aucune main sur le site en ligne
  • • La base encore disponible s'arrête aux contenus 2020-2021 : les pages récentes (discographie, album Never Die) n'y sont pas
  • • WordPress, thème et extensions à maintenir à jour, chacun avec ses correctifs de sécurité

✅ Après

  • • Storefront statique et boutique auto-hébergés sur un serveur dédié : elle valide, nous exécutons
  • • Aucune extension à mettre à jour côté site public, aucune base de données exposée pour afficher une page
  • • Site versionné dans un dépôt Git privé, redéployable en une commande
  • • Retour arrière possible sur l'ancien site en une commande, tant que les fichiers d'origine sont en place

Récupérer le contenu avant qu'il ne disparaisse

Le WordPress de production n'étant plus joignable, la migration ne pouvait pas se contenter d'un export. Nous avons repris ce qui existait encore — la base de l'ancien serveur (page d'accueil en blocs Kadence, environ 23 000 caractères de balisage, 3 billets publiés, médiathèque, réglages de réseaux sociaux, catalogue WooCommerce) — puis reconstitué le reste depuis les archives publiques : la page discographie (55 entrées, de 1987 à 2025), la tracklist officielle de l'EP Never Die (7 titres, dans l'ordre) et l'article de l'album. Ce que les archives ne contenaient pas a été signalé à l'artiste plutôt que deviné.

Vendre un MP3 sans se le faire offrir

L'écoute devait rester gratuite et légère, la vente devait livrer un vrai fichier. Un bouton d'achat seul encaisse sans rien livrer, et un fichier unique servant à la fois l'écoute et l'achat revient à donner le master. Nous avons donc séparé les deux : un flux OGG/Opus 112 kbps pour l'écoute dans le site, un master MP3 320 kbps pour l'achat, et une livraison par lien signé qui n'ouvre que les titres de la commande — un jeton vaut preuve de paiement et expire au bout de 30 jours.

03. Notre Approche

1

Phase 1 : Inventaire et récupération du contenu

Lecture de ce qui existe, reconstruction du reste

  • Inventaire de l'ancienne base par wp-cli (pages, billets, médiathèque, réglages du thème)
  • Récupération des visuels en pleine taille depuis les wp-content/uploads d'origine
  • Reconstitution de la discographie, de la tracklist Never Die et de l'article d'album depuis les archives web
  • Reprise des réseaux officiels depuis les réglages WordPress, vérifiés un par un dans le navigateur
  • Export du catalogue WooCommerce comme base de départ, sans réutilisation de WordPress
2

Phase 2 : Storefront Astro bilingue

Le site public, statique

  • Astro 5.18 en rendu statique : 42 pages générées (21 routes × anglais/français)
  • Anglais par défaut, français sous /fr, un seul dictionnaire de traduction
  • Sections d'accueil : héros vidéo, bio, derniers titres, vidéo, boutique, galerie, actualités
  • Pages dédiées : /music (lecteur des 7 titres), /bio, /news + 4 articles, /shop, /cart, fiche produit
  • Visuels passés dans le pipeline AVIF au build, galerie en dialogue natif, menu hamburger sans JavaScript
  • Formulaire unique contact + booking, avec anti-robot et limite de 5 envois par heure et par adresse IP
3

Phase 3 : Boutique Medusa auto-hébergée

Le catalogue et les commandes

  • Medusa v2 auto-hébergée (service systemd, port applicatif non exposé), administration sur /app
  • 11 produits en ligne : les 7 titres de Never Die à 2 $ (produits numériques) et 4 produits dérivés de 15 à 35 $
  • Prix posés en USD et en EUR, région de vente États-Unis, livraison par profil (numérique / marchandise)
  • Panier avec adresse et choix du transporteur, total recalculé à chaque changement
  • Stripe en clés de production avec webhook de paiement branché (sans lui, un 3DS laisse la commande en attente alors que le débit est passé)
4

Phase 4 : Livraison numérique par lien signé

Payer doit donner un fichier

  • Déclenchement à la commande : le reçu part avec un bouton de téléchargement par titre acheté
  • Route publique /download?token=… placée hors du préfixe /store (une route sous /store exige une clé que le navigateur de l'acheteur ne peut pas envoyer)
  • Jeton HMAC-SHA256 sur commande + date d'expiration, comparaison à temps constant, refus si le secret est absent
  • Autorisation limitée aux fichiers dont la référence figure parmi les articles de la commande
  • Contrôles réels : sans jeton valide la route répond 403 (vérifié en production) ; le contrôle unitaire couvre 6 cas, dont la réutilisation d'une signature valide sur une autre commande
5

Phase 5 : Bascule, SEO et redirections

Ne rien casser de ce que Google connaît

  • Bascule du domaine principal et de www vers le site statique, retour arrière en une commande
  • Redirections des anciennes URL posées côté serveur web, puis vérifiées une par une en production
  • Déploiement du même build sur les deux domaines (site public et boutique), sans redémarrage de service
  • Parcours d'achat rejoué en conditions réelles : ajout au panier, panier, page de paiement

04. Stack Technique

CoucheTechnologie
FrontendAstro 5 (statique)
Internationalisationi18n Astro (EN par défaut, /fr)
BoutiqueMedusa v2 auto-hébergée
PaiementStripe (clés de production + webhook)
Livraison numériqueLien signé HMAC-SHA256, 30 jours
AudioOGG/Opus 112 kbps (écoute) + MP3 320 kbps (achat)
ImagesPipeline AVIF d'Astro
EmailsResend
HébergementServeur dédié : nginx, fichiers statiques, Medusa
VersionnementGit (dépôt privé)

05. Les Résultats Mesurés

Le poids des visuels servis

Avant

10,82 Mo d'originaux

18 visuels, une variante AVIF comptée par visuel. Cas le plus net : un PNG de 3,39 Mo servi en 194 ko (soit -94 %).

Ce que le visiteur télécharge réellement

9,6 ko

Accueil — HTML compressé

30,1 ko non compressés

5,9 ko

Fiche produit — HTML compressé

13,8 ko non compressés

10,3 ko

JavaScript sur tout le site

un seul fichier

10,7 ko

CSS sur tout le site

une seule feuille

Relevé le 19/09/2026 sur le site en ligne, compression gzip activée. Aucune bibliothèque de framework n'est servie : le seul script est celui du panier.

Ce que la boutique fait aujourd'hui

Catalogue géré par l'artiste

Autonome

11 produits en ligne (7 titres à 2 $, 4 produits dérivés de 15 à 35 $), prix en USD et en EUR. L'ajout d'un produit se fait dans l'administration Medusa, sans passer par nous.

Musique vendue et livrée automatiquement

Lien signé

Le reçu part seul après paiement, avec un lien signé valable 30 jours qui n'ouvre que les titres achetés ; le MP3 est un master distinct du flux d'écoute.

Le visiteur reste sur le site

Rétention

Les 7 titres se lisent dans le lecteur interne, les cartes de titres mènent à la fiche produit locale. Aucun lien sortant vers les plateformes d'écoute, hors icônes de réseaux en pied de page : c'est une décision de l'artiste.

Marchandise traitée séparément

Tunnel

Adresse et transporteur sur le panier pour la marchandise ; un panier entièrement numérique n'affiche que la livraison à 0 $. La distinction se fait sur un attribut du produit, jamais sur un seuil de prix.

SEO : les anciennes URL toujours vivantes

Anciens billets (/<slug>/)

Ancienne URL WordPress301 → /news/<slug>301

/blog/

Ancienne URL WordPress301 → /news301

/checkout/

Ancienne URL WooCommerce301 → /cart301

/my-account/

Ancienne URL WooCommerce301 → /301

/wp-admin, /wp-login.php

Page d'administration WordPress301 → /Fermé

/xmlrpc.php

Point d'entrée WordPress410 Gone410

/wp-content/uploads/2020/09/<fichier>

Fichier WordPress301 → /media/<fichier>301

Reste de /wp-content/

Fichier WordPress410 Gone410

Codes et destinations vérifiés en production, un par un, après la bascule du domaine.

Captures d'écran

Accueil du site tatianamiath.com après la migration (desktop)

Desktop

Accueil du site tatianamiath.com sur mobile

Mobile

Votre site WordPress tourne sur un hébergement que vous ne contrôlez plus ?

Comme pour Tatiana Miath, nous migrons un site existant vers un storefront statique adossé à une boutique que vous gérez vous-même : pages allégées, catalogue autonome, paiement et livraison numérique automatiques.

Réponse sous 24h • Devis gratuit • Premier appel 30 min sans engagement