Faire une copie statique de son site

De FphAdmin.

Tous les sites actuels sont dynamiques ou ont une partie dynamique (notamment le moteur de recherche), c'est à dire que les pages sont générées par un logiciel au moment de l'appel de la page par l'internaute. À l'opposé, un site statique est composé uniquement de fichiers qui sont délivrés tel quel par le serveur, sans traitement particulier.


L'intérêt de tester la transformation d'un site dynamique en site statique est double :

  • 1) Pour de l'archivage : un site n'est pas éternel, il peut être l'objet d'une refonte complète ou d'un arrêt de l'activité ; pour autant, on peut vouloir garder la trace de l'ancienne version d'un site ou maintenir accessible un site inactif. La transformation en site statique facilite l'archivage : en effet, un tel site n'étant plus maintenu, il risque au bout de quelques temps de tourner avec des versions obsolètes de logiciels ce qui peut introduire des problèmes de sécurité (si, par exemple, entre temps une faille a été découverte dans le logiciel) et pose des problèmes lors de migrations (par exemple, un site fait sous PHP4 peut ne pas fonctionner sous PHP5). Un site statique étant constitué seulement de fichiers ne rencontrent pas a priori ce type de problème.
  • 2) Pour l'accès dans n'importe quelle condition : un serveur européen n'est pas toujours facilement accessible de partout. En outre, tout le monde ne dispose pas de connexion à internet de qualité. Proposer une version « statique » de son site, même avec quelques fonctionnalités en moins, permet de le rendre accessible hors ligne (sur cédéroms ou clé USB) ou à disposition sur un autre serveur.


Le but de cet article n'est pas de présenter des logiciels capables de faire la copie statique d'un site : nous nous contenterons d'utiliser la commande wget en ligne de commande. Le but de cet article est de présenter la problématique et de suggérer quelques recommandations si vous désirez faire facilement des copies statiques de votre site.

Le test de cette copie vous permettra également de constater comment votre site est vu par un robot de moteur de recherche puisque son comportement sera assez proche du résultat donné par la commande wget.


[modifier] Première partie : faire le test

Si votre site s'appelle http://www.monsite.net la seule chose à faire est de lancer en ligne de commande la commande suivante : 

wget -r -k --restrict-file-names=windows -E -l20 http://www.monsite.net

wget crée alors dans le répertoire courant un nouveau répertoire appelé www.monsite.net dans lequel il va placer tous les fichiers qu'il récupère, ceux-ci sont d'ailleurs listés dans la console au fur et à mesure de leur chargement.

Le choix de wget n'est pas l'expression d'un purisme informatique : il présente deux avantages :

  • 1) c'est une commande de base présente sur toutes les versions Linux et Unix (à vérifier pour Mac OS X)
  • 2) elle s'intègre facilement dans un script, en particulier si on veut automatiser la récupération du site (pour faire un archivage toutes les semaines, par exemple).

Les paramètres utilisés dans notre cas sont les suivants :

  • -r, pour récursif, indique à wget qu'il doit suivre les liens de la page de départ (en l'absence de ce paramètre, wget ne téléchargerait que votre page d'accueil) ; par défaut, wget ne prend que les pages avec le même nom de domaine
  • -E indique que les pages servies au format HTML (type text/html) doivent être dotés de l'extensions .html si elles ne l'ont pas (par exemple, spip?article28 devient spip?article28.html)
  • --restrict-file-names=windows indique que les caractères spéciaux doivent être adaptés pour fonctionner sous Windows (ils fonctionneront sous Unix également)
  • -l20 indique qu'il faut aller jusqu'à une profondeur de 20 liens ; bien sûr, si votre site est bien fait et que toute page est accessible en trois clics à partir de la page d'accueil, la valeur par défaut de wget(cinq liens de profondeur) est suffisante.

wget possède bien sûr de nombreuses autres options décrites dans son manuel.


Une fois que wget a terminé son traitement, il ne vous reste plus qu'à constater les dégats en allant regarder ce qui a été enregistré dans le répertoire www.monsite.net créé par wget.

Le constat qui s'impose immédiatement, c'est la perte de nombreux éléments de mise en forme, en particulier les images de fond d'écran. L'explication est simple : wget suit les liens dans les attributs src et href (et aussi action d'un élément <form>)mais il n'interprète pas l'instruction url() du CSS. Autrement dit, les fichiers que votre navigateur télécharge via @import url() ou list-image: url() ou background: url() sont ignorés. L'occasion vous est alors donnée de regarder ce que vaut votre site sans CSS (ou avec un CSS minimal).

Le phénomène est identique pour les images ou tout autre information insérées par du javascript (au passage d'une souris, par exemple). Un site en pur Ajax risque de ne pas donner grand chose.

Plus gênant, les instructions de redirection d'Apache ne sont pas reproduites. Par exemple, l'instruction suivante renvoie l'accueil à la page d'accueil en français : 

Redirect permanent /index.html http://www.irenees.net/fr/index.html

wget va bien suivre la redirection au moment du téléchargement mais il ne va pas pour autant créer un fichier index.html à la racine qui renverrait vers fr/index.html.

[modifier] Seconde partie : recommandations

Si vous désirez faire une copie statique de votre site la plus complète, il est possible de la réaliser sans trop de casse en se donnant simplement quelques règles au moment de la conception.


Première recommandation : ne pas disperser les éléments de mise en forme statiques et d'essayer de les regrouper dans un seul endroit. Ainsi, un répertoire nommé « _rsc » (ou tout autre nom de votre convenance) pourra être placé à la racine de votre site et contenir des sous-répertoires « css », « js «, « photos », bref, tout ce que vous voulez à condition qu'il n'y ait rien de dynamique.

Il suffira alors de compléter l'appel à wget par la copie via FTP de ce répertoire pour rétablir toute la charte de script. Dans le cas d'un script automatisé, si un accès ssh est possible, une seule instruction scp suffira.

Cette recommandation ne peut pas toujours être suivie complètement, certains logiciels de gestion de contenus disposant leurs fichiers dans des répertoires différents. Le principal est de bien identifier les répertoires concernés.


Deuxième recommandation : être vigilant sur le code javascript utilisé, en particulier en repérant bien les endroits où le code javascript modifie les attributs @src ou @href d'éléments HTML : si ces attributs sont modifiés en insérant des chemins relatifs, il ne devrait pas y avoir de souci ; s'il s'agit de liens absolus, le site hors-ligne renverra tout d'un coup au site en ligne.


Troisième recommandation : mettre en place via Apache des réécritures de liens (par exemple, article23.html pour spip.php?article23) : cela évitera à wget de rajouter .html et surtout le nom du fichier enregistré correspondra exactement au nom de l'URL. Les extensions de type .php devront être conservée pour les pages vraiment dynamiques car dépendante d'une saisie de l'utilisateur (par exemple, l'appel au moteur de recherche, un formulaire de contact, etc.). La facilité de mise en œuvre de cette recommandation va dépendre fortement du logiciel utilisé pour la gestion du contenu.

Attention : sous Windows les points d'interrogation ne passent pas dans les noms de fichiers !


Quatrième recommandation: repérer et isoler dans le modèle de mise en forme les éléments qui font appel aux pages vraiment dynamiques (moteur de recherche, formulaire). Grâce à ce repérage et en fonction du logiciel utilisé, on peut imaginer trois solutions :

  • Créer un modèle alternatif qui supprime ces éléments
  • Maintenir l'appel au site initial en configurant wget pour ignorer la récupération de ces fichiers (on aura donc intérêt à les regrouper dans un même répertoire, on peut même les placer dans un sous-domaine particulier (par exemple, http://recherche.monsite.net),
  • Rajouter une classe particulière (par exemple, « enligne ») à ces éléments (ou à un bloc conteneur de ces éléments), introduire un fichier CSS spécifique ne comprenant qu'une instruction portant sur cette classe et remplacer par ce fichier CSS par un autre spécial hors ligne.

Par exemple, le fichier « connexion.css » contiendrait 

.enligne {

}

et serait remplacé par un fichier de même nom contenant : 

.enligne {
display:none;
}

On peut compléter le dispositif en introduisant des éléments n'apparaissant qu'hors ligne avec une classe particulière « horsligne ».

Récupérée de « http://fphadmin.fph.ch/wiki/Faire_une_copie_statique_de_son_site »