Comment migrer de WordPress vers le générateur de sites statiques Eleventy

À propos de l'auteur

Scott Dawson vit à Trumansburg, New York. Il est concepteur et développeur Web et aime écrire, jouer, créer de l'art et faire de la musique. Scott est un front-end…
En savoir plus sur
Scott
…

Eleventy est un générateur de site statique. Nous allons explorer pourquoi vous souhaitez utiliser un générateur de site statique, entrer dans le vif du sujet de la conversion d'un simple site WordPress en Eleventy et parler des avantages et des inconvénients de la gestion du contenu de cette façon.

Qu'est-ce qu'un générateur de site statique?

J'ai commencé ma carrière de développement Web il y a des dizaines d'années, au milieu des années 1990, lorsque HTML et CSS étaient les seules choses dont vous aviez besoin pour faire fonctionner un site Web. Ces sites Web simples et statiques étaient rapides et réactifs. Avance rapide jusqu'à nos jours, cependant, et un site Web simple peut être assez compliqué.

Dans le cas de WordPress, réfléchissons à ce qu'il faut pour rendre une page Web. PHP côté serveur WordPress, fonctionnant sur les serveurs d'un hôte, fait le gros du travail d'interrogation d'une base de données MySQL pour les métadonnées et le contenu, choisit les bonnes versions des images stockées sur un système de fichiers statique, et fusionne le tout dans un modèle basé sur un thème avant le renvoyer au navigateur. C'est un processus dynamique pour chaque demande de page, même si la plupart des pages Web que j'ai vues générées par WordPress ne sont pas vraiment dynamiques. La plupart des visiteurs, sinon tous, ont un contenu identique.

Les générateurs de sites statiques retournent le modèle à cette approche vieille de plusieurs décennies. Au lieu d'assembler des pages Web de manière dynamique, les générateurs de sites statiques prennent le contenu sous la forme de Markdown, le fusionnent avec des modèles et créent des pages Web statiques. Ce processus se produit en dehors de la boucle de demande lorsque les utilisateurs parcourent votre site. Tout le contenu a été pré-généré et est diffusé rapidement à chaque demande. Les serveurs Web font littéralement ce qu'ils annoncent: servir. Pas de base de données. Pas de plugins tiers. Juste du HTML pur, du CSS, du JavaScript et des images. Cette pile technologique simplifiée équivaut également à une surface d'attaque plus petite pour les pirates. Il y a une petite infrastructure côté serveur à exploiter, donc votre site est intrinsèquement plus sécurisé.

Les principaux générateurs de sites statiques sont également riches en fonctionnalités, ce qui peut constituer un argument convaincant pour dire adieu aux piles technologiques qui caractérisent systèmes de gestion de contenu modernes.

Si vous êtes dans ce secteur depuis un certain temps, vous vous souvenez peut-être du produit Dreamweaver de Macromedia (pré-Adobe). J'ai adoré le concept d'éléments et de modèles de bibliothèque, en particulier la façon dont ils me permettent de créer de la cohérence sur plusieurs pages Web. Dans le cas d'Eleventy, les concepts de modèles, de filtres, de codes courts et de plugins sont des analogues proches. J'ai commencé tout ce voyage après avoir lu la conversion de l'entreprise de Smashing au JamStack . J'ai également lu le livre gratuit de Mathias Biilmann et Phil Hawksworth intitulé Modern Web Development on the JAMstack et je savais que j'étais prêt à retrousser mes manches et à convertir quelque chose de moi-même.

Why Not Use A Static Site Generator ?

Les générateurs de sites statiques nécessitent un peu de courbe d'apprentissage. Vous ne pourrez pas facilement passer des fonctions éditoriales au contenu d'entrée, et des cas d'utilisation spécifiques peuvent vous empêcher d'en utiliser une. La plupart du travail que je vais montrer est effectué dans Markdown et via la ligne de commande. Cela dit, il existe de nombreuses options pour utiliser des générateurs de site statiques avec des systèmes de données dynamiques, de commerce électronique, de commentaires et de notation.

Vous n'avez pas non plus à convertir l'intégralité de votre site en une seule fois. Si vous avez une configuration compliquée, vous pouvez commencer petit et voir ce que vous pensez de la génération de sites statiques avant d'élaborer un plan pour résoudre quelque chose à l'échelle de l'entreprise. Vous pouvez également continuer à utiliser WordPress comme le meilleur système de gestion de contenu headless et utiliser un SSG pour servir le contenu WordPress .

Comment j'ai choisi Eleventy comme générateur de site statique

Faites un rapide recherchez les générateurs de sites statiques populaires et vous trouverez de nombreuses options intéressantes pour commencer: Eleventy, Gatsby, Hugo et Jekyll étaient les principaux candidats sur ma liste. Comment choisir? J'ai fait ce qui est venu naturellement et j'ai demandé à des amis. Eleventy était un leader incontesté dans mon sondage Twitter mais ce qui a abouti, c'était un commentaire qui disait: "@eleven_ty se sent très accessible si l'on ne sait pas ce que l'on fait." Hé, c'est moi! Je peux malheureusement être pris dans la paralysie de l'analyse. Pas aujourd'hui… ça faisait du bien de choisir Eleventy sur la base d'un sondage et d'un commentaire. Depuis lors, j'ai converti quatre sites WordPress en Eleventy, en utilisant GitHub pour stocker le code et Netlify pour servir les fichiers en toute sécurité. C'est exactement ce que nous allons faire aujourd'hui, alors retroussons nos manches et plongeons dedans!

Premiers pas: Bootstrapping The Initial Site

Eleventy a une grande collection de projets de démarrage . Nous utiliserons comme point de départ le onzeventy-netlify-passe-partout de Dan Urbanowicz, présenté comme un «modèle pour créer un site Web de blog simple avec Eleventy et le déployer sur Netlify. Inclut Netlify CMS et Netlify Forms. » Cliquez sur «Déployer sur Netlify» pour commencer. Vous serez invité à connecter Netlify à GitHub, à nommer votre référentiel (j'appelle le mien smashing-eleventy-dawson), puis à «Save & Deploy».

Une fois cela fait, plusieurs choses se sont produites:

1. Le projet standard a été ajouté à votre compte GitHub.
2. Netlify a attribué un nom dynamique au projet, l'a créé et l'a déployé.
3. Netlify a configuré le projet pour utiliser l'identité (si vous souhaitez utiliser les fonctionnalités du CMS) et les formulaires (un simple formulaire de contact)

Comme le suggère la capture d'écran, vous pouvez obtenir ou mapper un domaine au projet, et également sécuriser le site avec HTTPS. Cette dernière fonctionnalité était un argument de vente vraiment convaincant pour moi, car mon hôte facturait des frais exorbitants pour SSL. Sur Netlify, c'est gratuit.

J'ai cliqué sur Paramètres du site, puis sur Modifier le nom du site pour créer un nom plus approprié pour mon site. Autant j'ai aimé jovial-goldberg-e9f7e9, autant elizabeth-dawson-piano est plus approprié. Après tout, c'est le site que nous convertissons! Quand je visite elizabeth-dawson-piano.netlify.app je vois le contenu standard. Génial!

Téléchargeons le nouveau référentiel sur notre machine locale afin que nous puissions commencer à personnaliser le site. Mon référentiel GitHub pour ce projet me donne la commande git clone que je peux utiliser dans le terminal de Visual Studio Code pour copier les fichiers:

Ensuite, nous suivons les instructions restantes dans le fichier README de passe-partout pour installer les dépendances localement, modifiez le fichier _data / metadata.json pour qu'il corresponde au projet et exécutez le projet localement.

• npm install @ 11ty / eleventy
• npm install
• npx eleventy --serve --quiet

Avec cette dernière commande, Eleventy lance le site de développement local à localhost: 8080 et commence à surveiller les changements.

Préservation des publications, pages et images WordPress

Le site à partir duquel nous effectuons la conversion est un site WordPress existant à l'adresse elizabethrdawson.wordpress.com . Bien que le site soit simple, ce serait formidable d'exploiter autant que possible ce contenu existant. Personne n'aime vraiment copier et coller autant, non? WordPress facilite l'utilisation de sa fonction d'exportation.

Export Content me donne un fichier zip contenant un extrait XML du contenu du site. Exporter la médiathèque me donne un fichier zip des images du site. Le site que j’ai choisi d’utiliser comme modèle pour cet exercice est un site simple de 3 pages et il est hébergé sur WordPress.com. Si vous êtes auto-hébergé, vous pouvez aller dans Outils> Exporter pour obtenir l'extrait XML, mais en fonction de votre hôte, vous devrez peut-être utiliser FTP pour télécharger les images.

Si vous ouvrez le fichier XML dans votre éditeur , cela ne vous sera guère utile. Nous avons besoin d'un moyen d'intégrer des publications individuelles dans Markdown, qui est le langage que nous allons utiliser avec Eleventy. Heureusement pour nous, il existe un package permettant de convertir des articles et des pages WordPress en Markdown . Clonez ce référentiel sur votre machine et placez le fichier XML dans le même répertoire. Votre liste de répertoires devrait ressembler à ceci:

Si vous voulez extraire des messages du XML, cela fonctionnera immédiatement. Cependant, notre exemple de site comporte trois pages, nous devons donc effectuer un petit ajustement. À la ligne 39 de parser.js remplacez «post» par «page» avant de continuer.

Assurez-vous de faire une "installation npm" dans le répertoire wordpress-export-to-markdown puis entrez "node index.js" et suivez le

Ce processus a créé trois fichiers pour moi: welcome.md about.md et contact.md . Dans chacun, il y a une page d’introduction qui décrit le titre et la date de la page, ainsi que le Markdown du contenu extrait du XML. «Front Matters» peut être un nouveau terme pour vous, et si vous regardez la section en haut des exemples de fichiers .md dans le répertoire «pages», vous verrez une section de données sur le haut du fichier. Eleventy prend en charge une variété de sujets préliminaires pour vous aider à personnaliser votre site, et le titre et la date ne sont que le début. Dans les exemples de pages, vous verrez ceci dans la section de présentation:

 eleventyNavigation:
  clé: Accueil
  ordre: 0

En utilisant cette syntaxe, vous pouvez ajouter automatiquement des pages à la navigation du site. Je voulais conserver cela avec mes nouvelles pages, j'ai donc copié et collé le contenu des pages dans les fichiers .md standard existants pour la maison, le contact et à propos. Notre exemple de site n’a pas de blog pour le moment. Je supprime donc les fichiers .md du répertoire "posts". Maintenant, mon site d'aperçu local ressemble à ceci, alors nous y arrivons!

Cela semble être le bon moment pour valider et pousser les mises à jour vers GitHub . Certaines choses se produisent lorsque je valide des mises à jour. Lors de la notification de GitHub que des mises à jour ont été effectuées, Netlify exécute la compilation et met à jour le site en direct. C'est le même processus qui se produit localement lorsque vous mettez à jour et enregistrez des fichiers: Eleventy convertit les fichiers Markdown en pages HTML. En fait, si vous regardez dans votre répertoire _site localement, vous verrez la version HTML de votre site Web, prête pour la diffusion statique. Ainsi, lorsque je navigue vers elizabeth-dawson-piano.netlify.app peu de temps après la validation, je vois les mêmes mises à jour que j'ai vues localement.

Ajout d'images

Nous utiliserons des images de l'original site. Dans le fichier .eleventy.js vous verrez que les images statiques doivent être placées dans le dossier static / img. Chaque page aura une image de héros, et c'est ici que la présentation fonctionne très bien. Dans la section de présentation de chaque page, j'ajouterai une référence à l'image du héros:

 hero: `/ static / img / performance.jpg`

Eleventy conserve les mises en page dans le dossier _includes / layouts . base.njk est utilisé par tous les types de pages, nous allons donc ajouter ce code juste sous la navigation car c'est là que nous voulons notre image de héros.

 {% if (hero)%}

{% fin si %}

J'ai également inclus une balise d'image pour l'image d'Elizabeth sur la page À propos, en utilisant une classe CSS pour l'aligner et lui donner un remplissage approprié. C'est le bon moment pour s'engager et voir exactement ce qui a changé .

Intégration d'un lecteur YouTube avec un plug-in

Il y a quelques vidéos YouTube sur la page d'accueil. Utilisons un plugin pour créer automatiquement le code d'intégration de Youtube. eleventy-plugin-youtube-embed est une excellente option pour cela. Les instructions d'installation sont assez claires: installez le paquet avec npm puis incluez-le dans notre fichier .eleventy.js . Sans aucune autre modification, ces URL YouTube sont transformées en lecteurs intégrés. (voir commit )

Utilisation des collections et des filtres

Nous n'avons pas besoin d'un blog pour ce site, mais nous avons besoin d'un moyen d'informer les gens des événements à venir. Nos événements – à toutes fins utiles – seront comme des articles de blog. Chacun a un titre, une description et une date.

Il y a quelques étapes dont nous avons besoin pour créer cette nouvelle page basée sur une collection:

• Créez un nouveau fichier events.md dans nos pages annuaire.
• Ajoutez quelques événements à notre annuaire de messages. J'ai ajouté des fichiers .md pour un concert de vacances, un concert de printemps et un récital d'automne.
• Créez une définition de collection dans .eleventy.js afin que nous puissions les traiter événements en tant que collection. Voici comment la collection est définie: nous rassemblons tous les fichiers Markdown dans le répertoire des articles et filtrons tout ce qui n'a pas d'emplacement spécifié dans la partie préliminaire.

 eleventyConfig.addCollection ("events", (collection) =>
    collection.getFilteredByGlob ("posts / *. md"). filter (post => {
        return (item.data.location? post: false);
    })
);

• Ajoutez une référence à la collection dans notre fichier events.md en affichant chaque événement comme une entrée dans un tableau. Voici à quoi ressemble une itération sur une collection:

 
         {% - pour le message dans collections.events -%}
            
         {% - endfor -%}
    

    

        

            
 Date 
            
 Titre 
            
 Emplacement 
        
    
    
    

            
 {{post.date}} 
            
 {{post.data.title}} 
            
 {{post.data.location}} 
        

Cependant, notre formatage de date semble assez mauvais.

Heureusement, le fichier passe-partout .eleventy.js a déjà un filtre intitulé readableDate. Il est facile d’utiliser des filtres sur le contenu des fichiers et des modèles Markdown:

 {{post.date | readableDate}} 

Maintenant, nos dates sont correctement formatées! La documentation sur les filtres d'Eleventy explique plus en détail quels filtres sont disponibles dans le framework et comment vous pouvez ajouter les vôtres. (voir: commit )

Polissage de la conception du site avec CSS

Bon, maintenant nous avons créé un site assez solide. Nous avons des pages, des images de héros, une liste d'événements et un formulaire de contact. Nous ne sommes pas contraints par le choix d’un thème, nous pouvons donc faire ce que nous voulons avec la conception du site… le ciel est la limite! C'est à vous de rendre votre site performant, réactif et esthétique. J'ai fait quelques changements de style et de balisage pour obtenir des éléments dans notre commit final .

Nous pouvons maintenant parler au monde de tout notre travail acharné. Publions ce site.

Publication du site

Oh, mais attendez. Il est déjà publié! Nous travaillons depuis le début dans ce joli flux de travail, où nos mises à jour de GitHub se propagent automatiquement vers Netlify et sont reconstruites en HTML frais et rapide. Les mises à jour sont aussi simples qu'un push git. Netlify détecte les modifications de git, traite le démarquage en HTML et sert le site statique. Lorsque vous avez terminé et que vous êtes prêt pour un domaine personnalisé, Netlify vous permet d'utiliser votre domaine existant gratuitement. Visitez Paramètres du site> Gestion de domaine pour tous les détails, y compris comment vous pouvez tirer parti du certificat HTTPS gratuit de Netlify avec votre domaine personnalisé.

Avancé: images, formulaires de contact et gestion de contenu

C'était un site simple avec seulement quelques images. Vous pouvez cependant avoir un site plus compliqué. Le service Large Media de Netlify vous permet de télécharger des images en pleine résolution sur GitHub et stocke un pointeur vers l'image dans Large Media. De cette façon, votre référentiel GitHub n'est pas rempli de données d'image, et vous pouvez facilement ajouter du balisage à votre site pour demander des cultures et des tailles d'images optimisées au moment de la demande. J'ai essayé cela sur mes propres sites plus grands et j'étais vraiment satisfait de la réactivité et de la facilité d'installation.

Vous vous souvenez du formulaire de contact qui a été installé avec notre passe-partout? Cela fonctionne juste. Lorsque vous soumettez le formulaire de contact, vous verrez des soumissions dans la section d'administration de Netlify. Sélectionnez «Formulaires» pour votre site. Vous pouvez configurer Netlify pour qu'il vous envoie un e-mail lorsque vous recevez une nouvelle soumission de formulaire, et vous pouvez également ajouter une page de confirmation personnalisée dans le code de votre formulaire. Créez une page dans votre site à l'adresse / contact / success par exemple, puis dans votre balise form (dans form.njk ), ajoutez action = "/ contact / success" pour y rediriger les utilisateurs une fois le formulaire soumis.

Le passe-partout configure également le site à utiliser avec le gestionnaire de contenu de Netlify . Configurer cela pour qu'il fonctionne correctement pour une personne non technique dépasse le cadre de l'article, mais vous pouvez définir des modèles et faire en sorte que les mises à jour soient effectuées dans le gestionnaire de contenu de Netlify se synchronisent avec GitHub et déclenchent des redéploiements automatiques de votre site. Si vous êtes à l'aise avec le flux de travail consistant à effectuer des mises à jour dans Markdown et à les pousser vers GitHub, vous n'avez probablement pas besoin de cette fonctionnalité.

Lectures complémentaires

Voici quelques liens vers des ressources utilisées tout au long de ce didacticiel. , et quelques autres concepts plus avancés si vous voulez approfondir.

(ra, yk, il)