Un guide des générateurs de sites statiques utilisant Hexo et WordPress

Les générateurs de sites statiques sont des systèmes qui compilent des modèles dans des pages HTML statiques. Si cela semble efficace, oui, ça l'est. Il n'y a pas de traitement ou de rendu de serveur, donc les sites Web statiques ont tendance à être très rapides et légers, ce qui vous permet, à vous et à vos utilisateurs, d'économiser un temps et une bande passante précieux. Cette efficacité accrue se traduit par des coûts moindres et, potentiellement, par des revenus plus élevés.

De l'optimisation de WordPress au passage au statique

En parlant de générateurs de revenus efficaces, WordPress vient à l'esprit. Il alimente 28% d'Internet et est une plate-forme puissante avec de nombreuses fonctionnalités intéressantes, y compris une gestion étendue des utilisateurs et du contenu soutenue par un éventail de plugins, de thèmes, d'API, etc.

Même les grands acteurs de notre industrie utilisent WordPress. Des sites Web comme Smashing Magazine et CSS-Tricks utilisent WordPress, bien que des instances considérablement personnalisées dans les deux cas. Cependant, travailler avec WordPress peut être une tâche fastidieuse, en particulier lors de la personnalisation et de l'optimisation des performances.

J'ai commencé un petit blog en 2015. Mon premier réflexe a été d'utiliser WordPress. Cela m'a donné un coup de pouce, car je travaillais déjà avec WordPress. J'ai créé un nouveau droplet sur DigitalOcean en tant que serveur, établi Vesta en tant que panneau de contrôle d'hébergement et installé WordPress en tant que plateforme de blog. En fin de compte, j'ai conçu et développé un tout nouveau thème WordPress. La seule chose qui manquait était le contenu.

Je savais que je voulais partager quelques conseils sur Atom, car j'utilisais cet excellent éditeur à l'époque. J'ai publié quelques articles à ce sujet et les ai partagés avec la communauté.

Au début, je n'accordais pas beaucoup d'attention à la performance car j'étais trop concentré sur le contenu. Au bout d'un moment, j'ai remarqué quelques problèmes de performances. Le score sur Google PageSpeed ​​Insights était nul, j'ai donc travaillé dur pour réparer et optimiser mon site Web, atteignant un score presque parfait de 99/100 :

• Je suis passé de Nginx+Apache à Nginx+PHP-FPM.

• J'ai utilisé CloudFlare pour la vitesse et la protection.

• J'ai utilisé Cloudinary pour héberger des images.

• J'ai peaufiné mon thème et utilisé Critical CSS.

Le seul avertissement concernait un problème de mise en cache de Google Analytics que je ne savais pas comment résoudre à l'époque.

Mais que se passe-t-il si 99/100 ou 100/100 ne vous procurent toujours pas les performances souhaitées ? C'est là que les générateurs de pages statiques entrent en jeu.

Entrez les générateurs de pages statiques et Hexo

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

Comme son nom l'indique, un générateur de site Web statique est un système qui génère des fichiers HTML statiques. Servir des fichiers HTML statiques est beaucoup plus rapide que de créer des pages à la volée. Il n'y a pas de rendu ou de compilation du serveur, ce qui entraîne souvent un retard dans le chargement des pages.

Quand on parle de performances, il faut penser à la mise en cache. Bien qu'il existe plusieurs techniques pour mettre en cache WordPress, ce n'est généralement pas une tâche simple, contrairement à la mise en cache des fichiers statiques. La diffusion de fichiers en cache est plus performante que la diffusion de fichiers réels à partir du serveur et peut faire gagner du temps lors du chargement de sites Web.

En juin de cette année, Vitaly Friedman de Smashing Magazine a présenté JAMstack dans un atelier de ma ville. Je n'en avais jamais entendu parler et j'étais très intrigué. Une fois le séminaire terminé, j'ai étudié un peu ce nouveau concept et j'ai réalisé à quel point il était génial. J'ai réalisé que mon site Web n'avait pas besoin d'un WordPress.

La première étape consistait à décider quel générateur de page statique utiliser. Je ne savais pas combien il y en avait. J'ai décidé d'essayer le framework de blog Hexo. Il est déployable sur Netlify, dispose d'un plugin pour migrer depuis WordPress et utilise Node.js, que je connais, contrairement à Jekyll et Hugo, qui sont basés respectivement sur Ruby et Go. Et, comme je l'ai découvert plus tard, c'est extrêmement rapide.

Migrer WordPress vers Hexo

L'installation d'Hexo est aussi simple que possible. Installez hexo-cli globalement à l'aide de npm, exécutez la commande hexo init , installez les dépendances npm et le tour est joué :

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Pour effectuer la migration, installez le plugin hexo-migrator-wordpress. Ce plugin attend des fichiers XML comme source. Les fichiers XML peuvent être exportés via l'outil d'exportation WordPress, qui se trouve dans le panneau d'administration sous Outils -> Exporter -> Wordpress . Enfin, tapez la commande hexo migrate pour terminer l'importation.

 hexo migrate wordpress <source>

Il ne reste plus qu'à vérifier le résultat. Exécutez la commande hexo server pour démarrer le serveur et ouvrir le navigateur à l'adresse donnée.

 hexo server

Markdown et ses limites

Hexo prend en charge Markdown prêt à l'emploi. Markdown est un langage de balisage que beaucoup utilisent pour formater les fichiers README, les commentaires et les publications. Mais il pourrait également être utilisé pour écrire votre article. Sa syntaxe est intuitive et facile à apprendre.

Un autre avantage de Markdown est qu'il génère du HTML propre et valide. Cela permet aux développeurs de créer des règles CSS propres et maintenables pour styliser les articles et les pages de blog.

La vie d'un développeur n'est jamais facile. Nous rencontrons souvent des problèmes qui pourraient nous amener à passer du temps sur des choses inattendues. Si nous apprenons quelque chose en cours de route, nous n'avons pas perdu ce temps, et c'est une bonne chose. La même chose m'est arrivée. Je pensais que tout s'était bien passé car il n'y avait pas d'erreur de compilation, mais j'ai ensuite remarqué que certaines choses ne fonctionnaient pas comme prévu.

Par exemple, les démos Codepen ne se chargeaient pas. J'ai cherché un plugin Hexo et j'en ai trouvé un. Malheureusement, ce plugin n'était pas officiel et il générait des erreurs HTML inacceptables. Je voulais contribuer et résoudre les problèmes, mais la dernière pull request n'a pas été résolue pendant plus d'un an et demi. J'ai décidé qu'il serait plus facile de forker le référentiel, de résoudre les problèmes et de publier le plugin sur la page Hexo afin que tout le monde puisse l'utiliser. Le plugin a été accepté, j'ai mis à jour le contenu et les démos Codepen ont fonctionné comme un charme.

Des problèmes similaires se sont produits avec les intégrations CanIUse. Maintenant que je savais comment créer un plugin Hexo, il n'y avait plus d'excuse pour ne pas le faire. Mon plugin hexo-caniuse a également été publié, tout comme mon plugin hexo-cloudinary pour les images responsive chargées depuis Cloudinary CDN.

Refonte et optimisation

La conception du site Web est plutôt fondamentale. Hexo propose une poignée de thèmes gratuitement sur le site officiel, mais je voulais un thème unique pour mon site Hexo. Après avoir lu la documentation et appris à personnaliser Hexo, j'ai commencé à développer un thème original à partir de zéro.

Pour créer de nouveaux modèles, j'ai décidé d'utiliser EJS pour la création de modèles. N'ayant jamais travaillé avec EJS, j'y ai vu une chance d'apprendre la nouvelle syntaxe du modèle. Si vous n'aimez pas EJS, Hexo vous fournit un support Swig, Haml ou pug via des plugins.

Pendant le processus de refonte, je portais une attention particulière à la performance. En suivant les meilleures pratiques, nous pouvons accélérer encore plus notre site Web statique. Placer les fichiers JavaScript au bas du document et utiliser la technique CSS critique crée la meilleure expérience pour votre public.

L'optimisation SEO est cruciale pour la visibilité du blog sur les moteurs de recherche comme Google. Hexo a un assistant intégré pour insérer des données Open Graph. Hexo utilise des fichiers YAML pour stocker la configuration du site et du thème. J'ai utilisé le fichier de configuration du thème pour configurer le nom du site, la description et divers identifiants sociaux.

L'ajout de Gulp ou Webpack à votre processus de construction est toujours utile et recommandé. J'ai utilisé Gulp pour minifier et compresser les fichiers CSS et JavaScript, et tout était prêt. Je pourrais le déployer.

Netlifier

Netlify est une plate-forme qui fournit l'hébergement de sites Web et d'applications avec des performances ultra rapides. Il se présente comme une plate-forme unifiée qui automatise le code pour créer des sites Web performants et faciles à entretenir.

Poussez simplement votre code et laissez-nous nous occuper du reste.

Comme vous vous en doutez, la configuration du site Web est simple :

1. Configurez le domaine.

2. Modifiez les enregistrements DNS.

3. Configurer la compilation et le déploiement.

4. Activez SSL.

Lorsque tout a été configuré, j'ai effectué une poignée de tests de base pour voir les scores, y compris le test de vitesse du site Web Pingdom, le test de la page Web et Testmysite.io. Les résultats ont été excellents, car le site a obtenu les scores les plus élevés pour chaque outil.

Cloud Flare

Malgré les excellents scores, je voulais essayer CloudFlare, juste pour voir à quel point cela accélérerait le site Web en plus. CloudFlare peut être écrasant au début, mais apprendre à l'utiliser est fondamental. Après avoir configuré CloudFlare, j'ai relancé les tests et les résultats étaient encore meilleurs.

Le test final était Google PageSpeed ​​Insights. Le score était de près de 100 % pour les versions mobiles et de bureau. Le problème était la mise en cache du navigateur Google Analytics. J'ai réussi à résoudre le problème en utilisant l'application CloudFlare pour Google Analytics.

Combien ça coûte?

Utiliser Hexo sur Netlify avec CloudFlare ne coûte rien.

Hexo est une plate-forme open source, elle est donc gratuite, quelle que soit la façon dont vous décidez de l'utiliser. Il a une grande communauté et est le troisième générateur de pages statiques open source le plus populaire selon StaticGen.

Netlify a un plan ouvert qui nous offre d'excellentes options pour notre hébergement. Les images sont également hébergées sur le plan ouvert de Cloudinary. Le plan gratuit de CloudFlare nous permet de configurer un grand nombre de règles qui peuvent accélérer votre site Web déjà rapide. Cela nous permet également de résoudre le problème de mise en cache du navigateur Google Analytics. Je n'ai pas non plus payé pour le domaine, puisque j'ai utilisé un domaine personnel gratuit fourni par le gouvernement.

Cette configuration de projet a réduit mon budget au minimum. Si vous avez besoin de fonctionnalités plus avancées pour votre projet, un générateur de pages statiques peut encore vous faire économiser quelques dollars.

Servir des fichiers en cache signifie que l'utilisation du processeur et de la bande passante est réduite, ce qui signifie que vous pouvez utiliser des plans d'hébergement moins chers avec un matériel moins puissant. De plus, votre site Web sera beaucoup plus rapide, ce qui signifie que vos utilisateurs apprécieront la navigation sur les appareils mobiles et de bureau. Et, comme la vitesse de chargement des pages peut avoir un impact sur le classement de la recherche Google, votre site Web sera mieux classé, attirant encore plus de visiteurs.

Tout cela signifie que vous pourriez dépenser une partie de votre budget ailleurs, par exemple pour promouvoir votre site Web ou créer du contenu supplémentaire, ce qui vous aidera à gagner un peu plus de revenus.

Le cas des générateurs de sites statiques

Migrer de WordPress vers un générateur de pages statiques n'est pas une tâche simple, et ce n'est certainement pas quelque chose que tout utilisateur de WordPress devrait faire. Cependant, Hexo a rendu cette transition relativement indolore, grâce à ses plugins, une excellente documentation et une API simple.

Avant de décider si vous souhaitez ou non migrer votre produit vers une solution statique, vous devez connaître les limitations associées aux générateurs de pages statiques, telles que les restrictions de contenu, la courbe d'apprentissage Markdown et le contrôle de version.

Vous devez également savoir que Hexo est un framework de blog. Il est parfait pour les développeurs et les techniciens qui savent utiliser un éditeur de texte et un terminal. Si vous aimez utiliser une interface Web pour gérer votre contenu, il existe un plugin qui fournit également cette fonctionnalité. C'est ce qu'on appelle hexo-admin et c'est assez populaire.

Si vous utilisez déjà WordPress, vous devriez vous arrêter et réfléchir aux fonctionnalités de WordPress que vous utilisez actuellement et à celles qui sont indispensables. Avez-vous une structure de contenu compliquée ? Utilisez-vous la gestion des utilisateurs ? Utilisez-vous beaucoup de plugins sur votre instance de WordPress et sont-ils tous nécessaires ? Êtes-vous satisfait des performances de votre site ?

Si la réponse à la plupart ou à toutes ces questions est non, alors vous êtes prêt à dynamiser votre site Web avec un générateur de pages statiques. Selon le cas d'utilisation et vos besoins, les pages statiques peuvent aider à maximiser l'efficacité tout en minimisant les coûts. Si, d'un autre côté, vous exigez la flexibilité de WordPress, vous n'envisagez probablement même pas une telle décision.