Faire un site statique, pourquoi et comment ?

Statique : Manière la plus courante de faire un site web à la fin du xxe siècle, devenue « has been » à l'ère du Web 2.0.
Le terme statique pour décrire un site web est à la mode ces dernières années, sécurité maximale et simplicité de déploiement, les avantages et inconvénients sont bien connus.
Les outils modernes de création de sites statiques (Static Site Generator ou SSG) sont nombreux (Next.js, Gatsby, Jekyll, Hugo ...) et bien documentés.

L'idée ici est d'exporter un site dynamique, fait avec un CMS par exemple, en un site statique.

L'outil

HTTrack WebSite Copier

Très connu, il permet de faire une copie locale d'un site web. Open Source et gratuit, cet outil faisant de l'aspiration de site est simple et performant.

Utilisation

Afin de pouvoir automatiser la création de copies locales, l'outil sera utilisé en ligne de commande.
Par exemple, le site dynamique live.alivecode.com, accessible uniquement depuis mon réseau local, sera converti en site statique à l'adresse alivecode.com.

RMDIR /S/Q alivecode-static
httrack.exe http://live.alivecode.com --preserve -O alivecode-static

La suppression du répertoire alivecode-static permet d'initialiser l'outil afin d'avoir un comportement homogène à chaque lancement. Ce répertoire contiendra les fichiers du futur site statique.

Le --preserve empêche l'ajout de <meta> dans les fichiers.

Le -O permet de définir le répertoire de destination.

Le résultat, une fois la copie terminée, est une arborescence contenant des fichiers html, css, xml et svg.

./alivecode.svg
./favicon.svg
./index.html
./rss-posts.xml
./styles.css
./posts/hello-world.html
./posts/index.html
./posts/site-web-statique-pourquoi-comment.html
./projects/index.html

Il est déjà possible d'utiliser ces fichiers en l'état. Toutefois, certains peuvent avoir des références au domaine du site dynamique. Le fichier rss-post.xml, par exemple, contient des balises <link> mentionnant l'adresse du site dynamique.

Un traitement de remplacement de texte est nécessaire, en PowerShell par exemple :

Get-ChildItem -Path ./ -Recurse -File | Foreach-Object `
{ `
  (($_ | Get-Content) -Replace 'live.alivecode.com', 'alivecode.com') | Set-Content -Path $_ `
}

Les fichiers sont maintenant prêts.

Préparation de l'hébergement

A faire juste la première fois, pour des questions fonctionnels et SEO.

.htaccess (pour Apache2 seulement)

Créer à la racine un fichier .htaccess contenant :

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [NC,R=301,L]

RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [NC,L]

On commence par rediriger les utilisateurs de www.alivecode.com vers alivecode.com, puis de rediriger les url finissant par .html vers une url sans l'extention html et enfin, on affiche si elle existe, la page correspondante à l'url demandé par l'utilisateur.

Ce fichier va aussi nous servir d'historique de modifications des url, car chaque fois qu'une page changera de nom il faudra ajouter une nouvelle ligne du style :

Redirect 301 /ancienne-url http://alivecode.com/nouvelle-url

robots.txt

Créer à la racine un fichier robots.txt contenant :

User-agent: *
Disallow:

Sitemap: http://alivecode.com/sitemap.xml

On autorise les moteurs de recherche à indexer le site tant que "Disallow:" est sans valeur et on spécifie, optionnellement, le chemin d'accès au sitemap.xml contenant l'ensemble des pages du site, sitemap.xml que l'on peut construire en PowerShell par exemple :

echo "<urlset xmlns=""http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml=""http://www.w3.org/1999/xhtml"">`n<url>`n <loc>/</loc>`n</url>" > sitemap.xml
Get-ChildItem -Path ./ -Filter *.html -Recurse -File | Foreach-Object `
{ `
  Add-Content sitemap.xml "<url>`n <loc>$((Resolve-Path -LiteralPath $_.FullName -Relative).Substring(1).TrimEnd('.html'))</loc>`n</url>" `
}
echo "</urlset>" >> sitemap.xml

Il ne reste plus qu'à déposer les fichiers chez l'hébergeur.

Conclusion

Nous avons maintenant des scripts qui permettent d'exporter un site dynamique en un site statique. Il reste toutefois quelques fonctionnalités que nous ne pouvons pas faire sans passer par des outils et des commandes plus complexes.
Par exemple :

• minifier les fichiers html
• optimiser les médias (meilleur compression, redimensionnement)
• retirer les exif des médias
• compiler les scripts
• gérer l'envoi des fichers chez son hébergeur (par FTP, SSH ou git...)

Ce qui nous amène au premier projet, un petit logiciel qui permet de convertir un site web dynamique en site web statique.