Reprendre un site existant

Ce que ça n'est pas#

Ce n'est pas une conversion automatique. L'outil sait extraire des valeurs d'une page annotée ; il ne sait pas décider ce que le client a le droit de changer. Cette décision est le vrai travail, et elle ne s'automatise pas :

• un titre de section, oui ; le nom de l'entreprise en pied de page, sans doute pas ;
• un témoignage, oui ; la structure de la grille qui les affiche, non ;
• une photo d'illustration, oui ; le logo, à discuter.

Compter une heure par page pour ce tri, et quelques minutes pour le reste. L'opération se fait page par page : une page reprise et une page non reprise cohabitent sans se gêner.

1. Annoter la page#

Sur le HTML existant, poser des attributs. Rien d'autre ne change : pas une balise déplacée, pas une classe retirée.

<h1 data-cms="blocks.hero.title">Le pain au levain, tous les matins</h1>

<p data-cms="blocks.about.body" data-cms-type="richtext">
  Nous <strong>pétrissons</strong> chaque nuit.
</p>

<img data-cms="blocks.about.photo" data-cms-type="media"
     src="/img/fournil.jpg" alt="Le fournil au petit matin"
     width="1600" height="900" />

<figure data-cms="blocks.about.film" data-cms-type="media">
  <iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="Une nuit au fournil"></iframe>
</figure>

<ul data-cms-list="collections.avis">
  <li data-cms-item="a-001">
    <blockquote data-cms="collections.avis.a-001.quote">Le meilleur pain de la ville.</blockquote>
    <cite data-cms="collections.avis.a-001.author">Claire D.</cite>
  </li>
</ul>

Trois règles, et elles suffisent :

1. un champ simple vit sous blocks. ; un champ de liste sous collections.{liste}.{id}. ;
2. chaque item porte un identifiant stable et jamais réattribué (a-001, a-002) — c'est le lien entre la page et le contenu ;
3. une image a besoin d'un alt, d'un width et d'un height. Sans eux, l'amorçage refuse d'écrire.

2. Extraire le contenu#

# Essai : n'écrit rien, montre ce qui serait produit
npm run bootstrap -- --html ancien-site/accueil.html --page accueil --langue fr --essai

# Écrit src/content/pages/fr/accueil.json
npm run bootstrap -- --html ancien-site/accueil.html --page accueil --langue fr

Ce qui est repris automatiquement

• les textes et leurs variantes de style ;
• le richtext, avec son balisage autorisé — le reste est retiré ;
• les images, avec leur description et leurs dimensions ;
• les vidéos, converties en fournisseur + identifiant ;
• les listes, avec leurs identifiants ;
• le titre et la meta description de la page.

Un fichier existant n'est jamais écrasé. Un amorçage relancé par erreur ne doit pas effacer ce que le client a déjà modifié.

3. Rendre la page avec Astro#

Le HTML annoté sert de modèle. Chaque data-cms devient un composant qui lit le contenu :

<Editable data={data} path="blocks.hero.title" as="h1" />
<Media data={data} path="blocks.about.photo" />
<Collection data={data} name="avis" item={Avis} blank={{ … }} />

Deux points à ne pas manquer :

• aucune directive client:* sur un composant qui affiche du contenu. Le texte doit être dans le HTML brut, sinon il sort de l'index des moteurs et des assistants ;
• chaque liste a besoin de son <template> dans la page, sinon l'ajout d'un item obligerait à réimplémenter un moteur de rendu côté navigateur. Le composant Collection s'en charge.

npm run check vérifie les deux.

4. Les images#

Copier les fichiers dans src/media/, en minuscules, sans accent ni espace — l'amorçage a déjà normalisé les noms dans le JSON, il faut que les fichiers suivent.

Ne pas les mettre dans public/ : <Image /> ne les traiterait pas, et le site perdrait AVIF, WebP et le jeu de largeurs qu'il avait peut-être déjà.

5. Vérifier#

npm run build && npm run check

Puis, sur le site déployé :

curl -s https://le-site.fr/fr/ | grep -c "un titre de la page"   # doit renvoyer 1

Si cela renvoie 0, le contenu n'est pas dans le HTML brut : chercher une directive client:*.

Ce qui ne se reprend pas#

Si le site repose largement sur ces trois points, la reprise n'est pas le bon outil : c'est le signe qu'il faut d'abord le rendre statique.

Un ordre de reprise qui marche#

1. La page d'accueil, seule

   C'est celle qui change le plus souvent, et celle qui prouve la chaîne complète.

2. La faire valider par le client

   Avant de reprendre dix pages sur la même convention. C'est le moment où l'on découvre qu'il voulait aussi modifier les horaires du pied de page.

3. Les pages à contenu changeant

   Services, tarifs, actualités. Celles qui motivaient la reprise.

4. Les pages figées, en dernier — ou jamais

   Mentions légales, page 404 : les rendre éditables n'apporte rien et ajoute des zones à surveiller.