WordPress est un excellent système de gestion de contenu (Content Management System ou CMS). Il permet de réaliser presque tout ce que l’on veut. En raison de sa nature dynamique, nous pouvons modifier n’importe quel contenu en cliquant sur un bouton. Bien que cela soit extraordinaire, cela comporte aussi quelques dangers, et il peut devenir difficile à maintenir en cas de trafic important.

Convertir votre site web WordPress en site statique pourrait résoudre ces problèmes.

Qu’est-ce qu’un site statique ?

Pour expliquer le fonctionnement des sites tatiques, il faut d’abord comprendre comment fonctionne un site web dynamique.

Chaque fois que nous visitons un site web, le serveur doit analyser les fichiers PHP, interroger la base de données pour récupérer les données et, enfin, renvoyer le code HTML rendu au navigateur.

Les sites web statiques se chargent d’abord de tout le travail : avant de visiter le site web, nous enregistrons chaque page en tant que HTML statique. Lorsque nous visitons la page souhaitée, le serveur la sert telle quelle.

Les avantages d’un site statique

Vitesse et performances

Les sites web statiques sont rapides et performants. Pourquoi ? Parce qu’il s’agit simplement de HTML statique. Cela signifie que le serveur ne doit faire qu’une seule chose : servir le site web. Il n’a pas à analyser quoi que ce soit ni à attendre les données de la base de données.

En outre, les sites web statiques sont plus faciles à héberger sur des CDN (bien que le cache edge fonctionne de la même manière), qui placent tous les fichiers aussi près de vous que possible.

Dans l’ensemble, les sites web statiques sont très performants en cas de trafic important.

Sécurité

Le cœur de WordPress est sécurisé – il l’est vraiment. Mais les extensions et les thèmes ne le sont pas toujours. De plus, tout le monde peut essayer de deviner notre nom d’utilisateur et notre mot de passe.

D’une manière générale, j’aime comparer WordPress à une maison avec de nombreuses portes et fenêtres. C’est à nous de choisir les plus sûres, mais si une porte n’est pas assez sûre, un hacker peut pirater notre site web.

La conversion de votre site web en site statique élimine la plupart des vecteurs d’attaque. Comme il ne s’agit que de HTML, un pirate ne pourra pas utiliser d’extensions vulnérables ou profiter d’un mot de passe faible.

Tranquillité d’esprit

Une installation WordPress typique se compose de nombreuses pièces mobiles – serveurs PHP et de base de données, thèmes ou extensions – et chaque pièce peut se briser. Avec un site statique, nous en supprimons la plupart. Notre serveur devient plus simple car il ne sert que du HTML et notre contenu est diffusé dans le monde entier grâce au CDN, ce qui le protège contre les attaques DDoS.

Par conséquent, la probabilité que quelque chose se brise est beaucoup plus faible que d’habitude.

Les inconvénients de la conversion au format statique

Solutions de rechange

Nous sommes habitués à ce que des choses comme la recherche sur le site web, l’ajout de commentaires ou l’envoi de formulaires fonctionnent sans problème avec WordPress. Avec le site statique, ce n’est plus aussi simple. Parce que nous avons tout converti en HTML, nous avons perdu ces possibilités.

Nous devons utiliser des outils tiers pour rétablir ces fonctionnalités.

Processus de construction

Nous sommes habitués à ce que le nouveau contenu soit disponible sur notre site web après avoir appuyé sur le bouton de publication. Avec l’approche statique, nous devons convertir notre site web chaque fois que nous voulons le mettre à jour. Il peut donc s’écouler quelques minutes entre le moment où nous appuyons sur le bouton et celui où le contenu est disponible pour tout le monde.

Étapes préliminaires

Avant de commencer, nous devons nous occuper de certaines choses.

1. Créez un dépôt Git

Nous utilisons GitHub dans cet exemple, mais vous pouvez utiliser n’importe quelle autre solution Git (comme GitLab ou BitBucket). Pour l’instant, créez un compte (si vous n’en avez pas déjà un) et créez un dépôt vide.

Ensuite, nous devons créer un fichier dans le dépôt ; sinon, nous ne pourrons pas le connecter à Kinsta.

Ajoutez un fichier à votre dépôt.
Ajoutez un fichier à votre dépôt.

2. Connectez ce dépôt avec l’hébergement de site statique

Allez sur MyKinsta, sélectionnez Sites statiques dans la barre latérale, et sélectionnez Ajouter un site.

Sélectionnez le dépôt que vous avez créé, et n’oubliez pas de sélectionner « Déploiements automatiques au commit. »

Configuration de l'hébergement de sites statiques Kinsta.
Configuration de l’hébergement de sites statiques Kinsta.

Convertir votre site WordPress en site statique

Nous pouvons utiliser plusieurs méthodes pour convertir notre site WordPress en site statique. Dans cet article, nous en verrons deux :

  1. Utiliser une extension WP et Git
  2. Utiliser WP-CLI, CI/CD et Git

Utiliser un plugin et Git

Exigences :

Étapes

  1. Ouvrez votre site dans le navigateur et installez l’extension Simply Static.
  2. Allez dans Simply Static > Réglages > Déploiement pour définir la méthode de déploiement dans le répertoire Local et définir le dossier local – vous pouvez suivre l’astuce que l’espace réservé vous donne, par exemple, /www/kinstaapi_533/public/public_static. Rappelez-vous que l’extension ne crée pas ce dossier pour vous – vous devez le faire manuellement.
  1. Cliquez sur le bouton Générer les fichiers statiques .

Après quelques minutes, tous vos fichiers statiques se trouveront dans le dossier spécifié à l’étape précédente.

Pousser votre code vers un dépôt Git

  1. Créez un dépôt dans GitHub.
  2. Ouvrez un Terminal ou Powershell, allez dans le dossier contenant les fichiers statiques, et exécutez :
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

Ces commandes connectent le dépôt et poussent tous les fichiers statiques vers GitHub. Pousser les changements déclenche un déploiement automatique parce que nous avons déjà connecté ce dépôt avec l’hébergement de site statique de Kinsta.

La prochaine fois que vous modifiez quelque chose dans votre WordPress, reconstruisez tout le site web, et lancez :

git add .
git commit -m "static content"
git push --force -u origin main

La version Pro de Simply Static offre un module GitHub qui automatise le processus de construction. Cependant, il s’agit d’une extension payante, et dans certains cas, le faire manuellement peut être une bonne solution.

Utiliser WP-CLI, CI/CD et Git

Cette méthode utilise la même extension WP que la méthode ci-dessus, mais dans sa version Premium (payante), et utilise un pipeline CI/CD de Buddy CI pour pousser votre code vers un dépôt GitHub.

Cette approche est plus compliquée à mettre en place mais nécessite moins de travail manuel lors de chaque déploiement. Elle est également plus extensible car vous avez le contrôle sur chaque étape. Vous pouvez ajouter d’autres actions au pipeline si vous le souhaitez.

Exigences :

  • Simply Static Pro (seule la version Pro dispose de l’intégration WP-CLI).
  • Votre site web doit être accessible au public (il ne peut donc pas être sur un hôte local), et le serveur doit avoir un accès SSH et WP-CLI installé. L’hébergement WordPress de Kinsta convient parfaitement.
  • La base de code de votre site est hébergée dans un dépôt GitHub
  • Un outil CI/CD pour tout orchestrer. Nous utilisons Buddy dans cet exemple en raison de sa convivialité et de sa simplicité. Mais vous pouvez utiliser n’importe quel autre outil, comme GitHub Actions ou GitLab CI/CD.

Étapes :

  1. Ouvrez votre site WP dans votre navigateur et installez l’extension Simply Static Pro.
  2. Allez dans Simply Static > Réglages > Déploiement pour définir la méthode de déploiement dans le répertoire Local et définissez le chemin correct – vous pouvez suivre l’astuce que l’espace réservé vous donne, par exemple, /www/kinstaapi_533/public/public_static.
  3. Rappelez-vous que l’extension ne crée pas ce dossier pour vous – vous devez le faire manuellement.
  4. Rendez-vous sur votre dépôt GitHub et créez un jeton d’accès en écriture pour accéder à vos dépôts. Nous en aurons besoin bientôt.
  5. Connectez-vous à votre compte sur Buddy, ajoutez un nouveau projet et connectez-le à votre dépôt.

Créons un pipeline sur Buddy qui fait ce qui suit :

  1. Exécute la commande WP-CLI Simply Static via SSH sur votre serveur.
  2. Compresse tout.
  3. Téléchargement sur le système de fichiers de Buddy.
  4. Décompresse tout.
  5. Pousse le tout dans votre dépôt Git.

Une vue d'ensemble du flux de travail proposé par Buddy.
Une vue d’ensemble du flux de travail proposé par Buddy.
  1. Tout d’abord, nous devons ajouter une action appelée commande SSH.
  2. Dans l’onglet Run CMD, exécutez :
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Ce script convertit notre site web en fichier statique et le compresse.

  1. Dans l’onglet Cible, saisissez toutes vos informations d’identification (vous les trouverez sur MyKinsta) et définissez le répertoire de travail comme étant public.

Configuration de la cible Buddy.
Configuration de la cible Buddy.
  1. Ensuite, ajoutez une action Local Shell. A l’intérieur de celle-ci, exécutez :
rm -rf *

Cette commande permet de s’assurer qu’il n’y a pas de fichiers dont nous n’avons pas besoin.

  1. Pour télécharger le fichier zip depuis le serveur, ajoutez une nouvelle action (vous pouvez le faire en appuyant sur le + dans la liste des actions) et sélectionnez Téléchargement SFTP dans la liste. Outre les informations d’identification, nous devons indiquer le chemin d’accès au fichier zip et cocher l’option d’écrasement.

Configuration de l'action de téléchargement de Buddy.
Configuration de l’action de téléchargement de Buddy.
  1. Ajoutez une autre action Local Shell pour décompresser tous les fichiers et supprimez le fichier zip (nous n’en aurons plus besoin). Exécutez :
unzip -o static.zip
rm static.zip
  1. Allez dans l’onglet Ubuntu et sélectionnez Paquets & Outils installer unzip. Pour cela, exécutez :
apt-get update && apt-get install -y unzip
  1. La dernière étape nécessite l’utilisation de l’action Git Push. Vous devez utiliser le jeton d’accès GitHub que vous avez configuré dans la première étape et son mot de passe. N’oubliez pas non plus de cocher Force Push et Push revision to the specific branch.
Configuration de l'action Push de Buddy.
Configuration de l’action Push de Buddy.

Lorsque vous souhaitez redéployer votre site web, appuyez sur le bouton Run dans Buddy, et la magie opérera. Si vous souhaitez automatiser ce processus, il existe une extension pour WordPress que vous pouvez utiliser.

Vue d'ensemble du flux de travail proposé par Buddy.
Vue d’ensemble du flux de travail proposé par Buddy.

Grâce à la documentation de Buddy, vous pouvez vérifier comment automatiser davantage votre flux de travail.

Autres moyens de convertir un site WP en site statique

Générateurs de sites statiques

De nombreux générateurs de sites statiques peuvent vous permettre de connecter n’importe quel CMS avec une API (WordPress a une API REST intégrée et GraphQL disponible via une extension). Vous pouvez utiliser Astro, Eleventy, ou tout autre.

Bien que cette approche vous donne beaucoup plus de flexibilité, elle nécessite plus de travail que les solutions ci-dessus.

Résumé

Est-ce une bonne idée de convertir un site WordPress en un site statique ? Cela dépend. Il y a de nombreux facteurs à prendre en compte avant de le faire. Il est certain que c’est une bonne idée d’y réfléchir. Comme nous l’avons déjà mentionné, les sites statiques présentent de nombreux avantages, et ne pas en profiter peut être un énorme gâchis.

Maciek Palmowski

Maciek est un développeur web qui travaille chez Kinsta en tant qu'analyste chargé du développement. En dehors des heures de travail, il passe le plus clair de son temps à coder, à essayer de trouver des nouvelles intéressantes pour ses bulletins d'information ou à boire du café.