Fermer

août 6, 2020

Comment migrer de WordPress vers un générateur de site statique


Dans cet article, vous apprendrez à transformer votre site WordPress en un site statique avec juste une poignée d'outils puissants. Nous nous concentrerons sur la migration de WordPress vers un générateur de site statique et couvrirons certaines des alternatives, notamment l'utilisation d'un CMS sans tête.

Pourquoi feriez-vous cela? Parce que vous pouvez obtenir des gains de vitesse énormes et donc améliorer les performances de votre site dans les moteurs de recherche, et également réduire (ou éliminer) votre facture d'hébergement et améliorer considérablement votre sécurité.

Les avantages de devenir statique

Les accélérations fantastiques ne sont certainement pas petites exploit, mais ce n'est pas tout ce que vous pouvez obtenir en transformant votre installation dynamique de site WordPress (WP) en une installation statique.

Résumons:

  • Vitesse de chargement des pages réduite . Les pages ne sont pas prétraitées au moment de l'exécution (demande de l'utilisateur) et le contenu n'est pas extrait de la base de données. En conséquence, le serveur Web répondra beaucoup plus rapidement (10x et même plus).
  • Latence réduite via les CDN . Vous pouvez simplement déposer ces pages désormais statiques sur un réseau de distribution de contenu distribué (CDN), ce qui améliore considérablement les temps de réponse partout dans le monde.
  • Gestion simplifiée . Une fois que vous avez défini votre flux de travail – et c'est ce que nous allons faire ici – vous verrez que vous n'aurez en fait plus besoin de consacrer plus d'efforts à la maintenance, aux mises à niveau WP ou aux mises à jour du serveur.
  • Sécurité considérablement améliorée . HTTPS prêt à l'emploi avec uniquement des pages statiques qui ne sont pas exécutées par une fausse version de PHP ou un WordPress obsolète, et très probablement même pas par Apache.
  • Amélioration du référencement . Google apprécie non seulement votre contenu, mais aussi la facilité et la sécurité de son accès. C'est, en fait, l'une des rares optimisations pour les moteurs de recherche encore valables de nos jours: un site plus rapide et plus sécurisé fonctionnera mieux sur la page de résultats du moteur de recherche .
  • Tranquillité d'esprit . Pas besoin de mettre à jour PHP, pas de problèmes WP non corrigés, même pas de serveurs Linux gérés. Détendez-vous et prenez votre café / bière / thé / ginseng après votre déploiement.

«WordPress est-il sécurisé?» Eh bien, c’est compliqué…

Les développeurs WordPress suivent les bonnes normes et pratiques de sécurité bien qu’un support à long terme (LTS) manque encore beaucoup. Cependant, en raison de son architecture même, certaines choses sont hors des mains de l'équipe de sécurité WP et transférées directement dans la vôtre:

  • mise à jour de votre serveur
  • installation des mises à jour WP
  • installation des mises à jour PHP
  • installation des mises à jour pour plugins et thèmes (si disponibles, pas du tout)
  • gestion de WP et PHP (aucun des deux n'a LTS) les mises à jour de maire de temps en temps

Tout cela est un processus constant et des plugins ne constituent pas une menace mineure, en particulier les menaces non entretenues. Ceux-ci ont souvent des failles de sécurité par lesquelles les attaquants prennent le contrôle des installations WordPress. C'est précisément pourquoi il a fallu Automattic ans pour prendre en charge certains plugins sur WordPress.com, la version commerciale et gérée de WordPress.

WordPress pourrait être sécurisé avec beaucoup d'efforts conscients. Et bien que vous puissiez affirmer que ce sont des efforts que tout développeur décent devrait déployer, il est également vrai que vous pouvez potentiellement soulever ce poids de vos épaules en transformant votre site WP en un site statique et, ce faisant, redéfinir son architecture et supprimer pour de bon presque tous les spots disponibles qui pourraient devenir une menace pour la sécurité. Après tout, il n'y a pas grand-chose qu'un attaquant puisse faire avec du HTML simple, des fichiers CSS et des images plates.

Cependant, vous devrez toujours vous occuper des scripts intersites et falsification de demandes intersites . ?‍♂️

Préliminaires: Entrez les générateurs de sites statiques

Fourni: Netlify

Nous avons brièvement passé en revue le site statique générateurs (SSG) sur notre liste de 100 outils, API et services Jamstack pour alimenter vos sites article, et il y a tonnes de plus que ce que nous allons couvrir ici, alors assurez-vous de vérifier StaticGen pour en savoir plus.

Certains SSG sont spécifiquement destinés à WordPress, comme WP2Static mais nous allons nous concentrer sur un plus généraliste, Gatsby. js – le «framework gratuit et open source basé sur React qui aide les développeurs à créer des sites Web et des applications ultra-rapides» .

Migration de WordPress

Je dois l'admettre, tout autant comme je voulais que ce processus soit très simple, il y a un certain nombre de choses qui pourraient le rendre un peu plus encombrant et prendre du temps, comme le pl les ugins que vous avez peut-être installés (moins il y en a, plus c'est facile) et la façon dont vous avez formaté vos messages (plus c'est simple, mieux c'est). Considérez ceci comme une directive que vous devrez peut-être ajuster à votre cas spécifique.

Essentiellement, voici ce que nous allons faire:

  1. configurer Gatsby.js
  2. exporter les articles / pages WP vers Markdown
  3. ] générer les actifs statiques

Étape 1: fourchez les démarreurs Gatsby

Nous commencerons par bifurquer soit le Gatsby Advanced Starter ou le Gatsby Material Starter tous deux sont des amorces à usage général modifiées pour un projet Gatsby.js, le second avec un modèle «opiniâtre» Material Design ( demo ).

Dès le départ, ces démarreurs vous donneront une application Web progressive entièrement alimentée par React (PWA) avec toutes les piles incluses:

L'affirmation est qu'après une migration et un déploiement réussis vers un CDN, votre site devrait l'être performant qu'un audit avec Google Lighthouse devrait rapporter les meilleurs résultats possibles:

Installation et configuration

Vous devrez d'abord installer Gatsby.js et Node.js pour pouvoir utiliser la CLI gatsby et le gestionnaire de paquets Node.js npm . Pour Node.js, téléchargez et installez pour Gatsby.js, consultez le Démarrage rapide ou Configurez votre environnement de développement .

Une fois que vous avez réglé le problème , voici comment démarrer un projet (rappelez-vous que vous pouvez également cloner gatsby-material-starter ):

 gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # ou gatsby develop

La configuration des démarreurs Avancé ( exemple ) et Matériel ( exemple ) est sensiblement la même.

Comme mentionné, il existe un support Netlify CMS prêt à l'emploi que vous pouvez synchroniser avec l'activation de votre référentiel Git en éditant static / admin / config.yml comme suit:

 backend:
  nom: github
  branche: maître
  repo: votre-utilisateur / votre-repo

Vous pouvez également intégrer Netlify CMS avec GitLab ou Bitbucket (voir Configuration du backend ).

Étape 2: Exporter les messages WordPress

Dans certains cas, vous pourrez peut-être convertir un Fichier exporté XML avec tous les articles et pages dans des fichiers Markdown en utilisant simplement ExitWP .

Cependant, en fonction de votre configuration WP et des ajustements, ce processus peut demander un peu de savoir-faire; mais toujours gérable et vaut la peine d'être fait.

Tania Rascia a écrit un bon aperçu de la façon dont elle a traité cette partie du processus dans son article The End of an Era: Migrating from WordPress to Gatsby .

Étape 3: Créer les pages

Étant donné que Gatsby.js est une application React, être un développeur React ou à tout le moins un programmeur JavaScript expérimenté vous aidera beaucoup afin de personnaliser Gatsby étroitement . Connaître certains GraphQL deviendra également très pratique pour faire des requêtes et fouiller dans vos données, surtout maintenant que ces pages ne sont pas servies par une base de données MySQL.

Heureusement, Gatsby.js est très bien documenté. Voici quelques ressources utiles:

Maintenant que vous avez terminé la génération de pages, vous pouvez déposer en toute sécurité les éléments (pages statiques et images) à peu près n'importe où! Consultez la section Hébergement de notre liste de 100 outils, API et services Jamstack pour alimenter vos sites pour quelques idées, et jetez un œil à notre article sur l'hébergement de sites statiques pour gratuit avec un pipeline automatisé .

La sécurité, pour une fois!

Même si votre administrateur WordPress est sur Internet (et qu'un fichier .htpasswd pourrait faire beaucoup pour vous), et même s'il n'est pas corrigé, et même si votre WP sauvegardé est dégradé, rien de tout cela n'affectera vos pages statiques déjà déployées car le frontal en est "détaché".

me tromper, même si vous exécutez WordPress sur un réseau local (LAN) derrière un pare-feu, vous devriez toujours le mettre à jour régulièrement.

Losing My Head: Headless CMS

Si vous avez jusqu'à ce point, vous peut ne plus avoir besoin d'utiliser WordPress. Bien que vous puissiez garder l'administrateur pour générer de nouveaux articles et pages, un autre flux de travail consisterait à utiliser un autre CMS sans tête pour générer les fichiers statiques pour vous et les synchroniser avec votre référentiel, le tout automatisé et en une seule étape.

Entrez le " headless CMS »- un système de gestion de contenu qui fonctionne toujours comme une instance back-end quelque part, mais qui est complètement détaché du site Web réel.

WordPress est un choix courant de CMS headless pour les sites statiques, et peut en fait être le plus courant pour les déploiements SSG à grande échelle. Bien qu'une approche de migration puisse couvrir de nombreuses situations, vous pouvez avoir trop de contenu hérité ou trop de votre processus de contenu intégré à WordPress pour qu'une migration en gros soit immédiatement réalisable. Cela est particulièrement vrai pour les grandes opérations de contenu et les entreprises de médias numériques. Cependant, si vous avez moins d’historique à gérer, il vous sera utile d’examiner des approches plus modernes de la gestion de contenu – la migration hors d’un site desservi de manière dynamique est le moment idéal pour effectuer ce type de changement. [19659005] La migration que nous avons implémentée prend déjà en charge Netlify CMS, même si nous ne verrons pas comment utiliser un CMS headless ici. C'est un sujet sur lequel nous reviendrons avec son propre article dans un proche avenir.

Creuser davantage

Il n'y a que tellement de choses que nous pouvons couvrir dans un article comme celui-ci, alors voici quelques ressources supplémentaires sur le sujet de migration de WP avec un SSG.

Gatsby.js

Le hub de documentation officiel et le blog sont très complets et très

Voici quelques articles relatifs à WP:

Hugo

Basé sur le langage de programmation Go Hugo est un autre grand nom pour les SSG avec de nombreux modèles disponibles, et une option solide que vous pourriez envisager pour Gatsby.js.

Il existe outils pour migrer WordPress vers Hugo . Si vous consultez ces guides, vous verrez que même si vous aurez moins de flexibilité, le processus devrait être un peu plus simple qu'avec Gatsby.js:

Jekyll

Si vous parvenez à mettre en place l'environnement Ruby, Jekyll le SSG qui peut transformer votre texte brut en sites et blogs statiques est encore plus simple à utiliser, même s'il ne générera que des pages statiques, pas des applications Web comme Gatsby.js.

Tout comme avec Gatsby, vous pouvez utiliser ExitWP basé sur Python pour générer Markdown à partir de WP. Et vous avez également l'exécutable Windows wpXml2Jekyll vers des fichiers Markdown généraux prêts pour Jekyll à partir d'une exportation WP XML.

Quelques articles utiles:

Solutions Software-as-a-Service (SaaS) [19659033] Gatsby Cloud prend en charge la création et la maintenance des sites Gatsby.js gratuitement ou moyennant des frais où vous pouvez automatiser vos versions rapides, accéder aux aperçus, générer des modifications quotidiennes et lancez facilement les déploiements vers Netlify, Cloudflare, AWS CloudFront ou Akamai.

HardyPress génère également des sites WordPress statiques et moyennant des frais vous aurez un panneau d'administration à partir duquel vous pouvez entrer les informations d'identification pour accéder à vos installations WP en ligne pour tout gérer sur place: arrêtez les installations WP en direct qui ont déjà été importées, déployez de manière transparente sur un CDN global, HTTPS, formulaires et recherche.

Autre Les SSG liés à WP avec un support commercial sont Shifter [19659105] Strattic et Sitesauce .

Conclusions et réflexion: le roi est-il mort?

La tranquillité d'esprit est énorme pour moi, et c'est l'une des principales raisons pour lesquelles j'ai arrêté développer des sites WordPress il y a des années. Je détestais qu'un bug puisse survenir ( zero day ou autre) à un moment donné et que, s'il n'était pas corrigé à temps, il mettrait en péril mon travail. Et croyez-moi, le nombre de fois où j'ai vu mes sites Web dégradés ou simplement cesser de fonctionner à cause d'une mise à jour majeure – et soudaine – de PHP ou WP, est plus que je ne veux l'admettre. Mais ces problèmes de sécurité ont disparu si votre site est statique !

À mon avis, WordPress a déjà atteint sa situation de « pic pétrolier » en 2012 (voir Google Trends: WordPress 2004-présent ). Et s'il ne s'adapte pas très rapidement, il ne fera que perdre des parts de marché au profit de technologies qui peuvent faire un travail plus rapide et plus sûr avec des flux de travail mieux intégrés.

Matt Mullenweg, créateur de WP et PDG d'Automattic, l'a également reconnu quand il a commencé à encourager les développeurs à « apprendre JavaScript profondément », et dans un geste audacieux s'est débarrassé du back-end PHP de WP en faveur de JavaScript avec l'introduction de Calypso (lire sa propre réflexion sur le processus ). Cela a envoyé des ondes de choc (et même la panique ) à travers la communauté, avec des rumeurs selon lesquelles WordPress abandonnerait complètement PHP . Et Gutenberg n'était qu'un pas de plus dans cette direction.

Le roi pourrait garder sa couronne après tout s'il parvient à se réinventer. Et sinon, eh bien, avoir alimenté près d'un tiers d'Internet n'était pas une mince affaire – vive le roi! ?

Découvrez comment SitePoint a déplacé son frontal vers Gatsby propulsé par un CMS WordPress headless en 2020.



Le meilleur outil 2023 pour ta croissance Instagram !



Source link