Gatsby : 13 plugins indispensables

Connaissez-vous GatsbyJS ? Ce framework JavaScriptLangage de scripting orienté objet basé sur ReactReact est un framework de développement JavaScript populaire. permet de créer des sites web rapides et performants, d'ailleurs le site sur lequel vous êtes l'utilise :) Pour exploiter au mieux GatbsyJS, nous vous avons préparé la liste des 13 plugins qui vous faciliteront la vie !

gatsby-plugin-react-helmet

Ce plugin est obligatoire pour pouvoir modifier le head html et mettre les bonnes informations pour le SEO.

gatsby-plugin-fontawesome-css

Il permet d’insérer fontawesome directement à la compilation et non pas en injection depuis le navigateur at runtime. Cela permet d’éviter des mouvements lors de l’affichage de la page.

gatsby-plugin-robots-txt

Il rend possible la création de fichier robots.txt, très important pour désactiver l’indexation sur les sites de recette :) et aussi de s’assurer de son fonctionnement sur la production. Simple et efficace, il permet de s’assurer que le sitemap soit bien accessible aussi !

gatsby-plugin-breadcrumb

Ce plugin permet de créer un breadcrump sur son site en mettant la balise .

gatsby-plugin-sass

Pour tout simplement pouvoir utiliser du SASS/SCSS pour le CSSFeuilles de style qui permettent de mettre en forme des pages web..

gatsby-transformer-remark

Ce plugin permet de parser du contenu markdown ! Par exemple chez AXOPEN, nous écrivons nos articles sur StrapiTrès utilisé dans les projets JamStack, Strapi est un headless CMS qui permet de gérer les contenus. avec le format markdown, il est donc primordial pour nous de pouvoir le parser simplement.

gatsby-remark-images

Il permet de récupérer les images des contenus markdown et de pouvoir les utiliser dans le build. Très facile à utiliser !

gatsby-remark-embed-video

Il s'agit du même outil que le précédent mais pour la gestion des vidéos dans le markdown, un peu plus complexe à utiliser mais très bien fait.

gatsby-remark-prismjs

Ce plugin permet de faire la coloration syntaxique pour les codes sources que nous mettons dans nos articles de blog. Certes, ce n'est pas utile pour tous les sites mais pour nous oui !

gatsby-plugin-purgecss

C’est LE plugin indispensable ! Il permet de supprimer toutes les classes CSS inutilisées dans le projet. Ceci permet de gagner plusieurs centaines de ko de CSS !

gatsby-plugin-sri

Cet outil permet d'ajouter SubResource Integrity (SRI) à vos balises de script générées.

gatsby-plugin-csp

Ce plugin créé par défaut une politique stricte, génère des hachages de script et de style, puis ajoute Content-Security-Policy une balise méta à la head de chaque page. Alors ce n'est pas évident à configurer, mais le concept est dur déjà ! En revanche, une fois bien configuré, ça marche parfaitement bien.

gatsby-plugin-meta-redirect

Il génère des fichiers html de méta-redirection pour faire des redirections sur n'importe quelle page.

Maintenant, vous avez toutes les cartes en main pour exploiter GatsbyJS. Nous pouvons également vous aider ! Pour en savoir plus sur notre accompagnement, n'hésitez pas à nous contacter !