Vous songez à monter dans le train de JAMStack ? Si votre réponse est Oui alors Gatsby l’un des générateurs de sites statiques les plus en vogue, pourrait être exactement ce que vous recherchez.

JAM est synonyme de JavaScript, d'API et de balisage. En d’autres termes, lorsque JavaScript, dans le client, prend en charge les parties dynamiques d’un site ou d’une application au cours du cycle requête / réponse, tous les processus côté serveur sont exécutés à l’aide d’API accessibles via JavaScript via HTTPS. le temps de déploiement souvent en utilisant un générateur de site statique, c'est le JAMStack. Il est performant, peu coûteux à l’échelle et offre une meilleure sécurité et une expérience de développement fluide.

Pourquoi utiliser un site statique

Le modèle de site statique ne s’adapte pas à tous les types de projets, mais il présente de nombreux avantages. En voici quelques-unes:

Vitesse

Le temps nécessaire au chargement d'un site Web dans le navigateur, lorsque la demande est faite pour la première fois, est un facteur important de l'expérience utilisateur. Les utilisateurs s'impatientent très vite et la situation ne peut que s'aggraver avec des connexions lentes. Un manque d'appels à la base de données et le contenu pré-généré rendent le chargement rapide des sites statiques.

Un site statique est constitué de fichiers statiques qui peuvent être facilement servis dans le monde entier à l'aide de Content Delivery Networks (CDN). Cela permet de tirer parti du centre de données le plus proche de l'emplacement d'où la demande est faite.

Hébergement simplifié

L'hébergement de sites statiques peut être configuré en un instant. En l'absence de code de base de données ou serveur, de langages spéciaux ou de frameworks à prendre en charge, tout ce que l'hébergement a à faire est de servir des fichiers statiques.

Meilleure sécurité

Sans code côté serveur ni base de données, les hackers n’auraient rien à faire. Il n’est pas compliqué de garder le serveur à jour avec les correctifs et les correctifs de sécurité. Tout cela signifie beaucoup plus de tranquillité d'esprit en ce qui concerne la sécurité de votre site Web statique.

Meilleure expérience de développeur

Configurer votre site Web statique avec une société d'hébergement comme Netlify ou Zeit est simple et, avec un déploiement continu, il vous suffit de pousser vos modifications dans votre dépôt de code de votre choix et elles sont immédiatement reflétées dans la version en direct.

Qu'est-ce que Gatsby?

Gatsby est l'un des générateurs de sites statiques les plus populaires. Il est construit avec React ce qui signifie que toute la qualité de React est à votre portée, vous permettant de tirer parti de sa puissance pour créer des composants interactifs directement dans votre site Web statique. Gatsby est également basé sur GraphQL ce qui vous permet d’interroger des données et de les afficher sur votre site Web statique comme vous le souhaitez.

Installation de Gatsby et création de votre projet

Gatsby est créé à l’aide de Webpack mais vous n'avez pas à vous soucier des manœuvres de configuration compliquées – Gatsby CLI s'occupe de tout.

Je suppose que Node.js est installé localement, ce qui signifie que vous disposez également de npm . Vous pouvez utiliser npm le gestionnaire de paquets Node, pour installer les paquets JS sur votre site Web. Pour en savoir plus sur l'utilisation de npm, cliquez ici .

La première chose à faire est d'installer l'interface de ligne de commande Gatsby. Ceci est un paquet npm qui vous permet de créer un site Gatsby en quelques secondes. Dans votre terminal, écrivez:

 npm install --g gatsby-cli

Avec la CLI Gasby installée sur votre machine, vous pouvez créer votre site Web. Je l'appellerai sitepoint-demo mais vous pourrez l'appeler comme bon vous semble. Dans votre terminal, tapez:

 gatsby new sitepoint-demo

Une fois que Gatsby CLI a installé tous les fichiers nécessaires et les a configurés de manière appropriée, vous disposez d’un site Web entièrement opérationnel, prêt à être personnalisé et optimisé. Pour y accéder, accédez au dossier sitepoint-demo :

 cd sitepoint-demo

et démarrez le serveur local:

 gatsby develop

Enfin, ouvrez une fenêtre sur http: // localhost: 8000 où vous trouverez votre brillant site Gatsby ressemblant à quelque chose comme ceci:

[19659002] Pour mettre rapidement un site Web en service, Gatsby tire parti de plusieurs cartes de départ classiques ainsi que des démarreurs proposés par la forte communauté qui l’entoure. Le site que vous venez de créer utilise le démarreur par défaut de Gatsby mais vous pouvez en trouver beaucoup plus sur le site Web Gatsby .

Si vous souhaitez utiliser un démarreur différent de celui par défaut, vous devez spécifier son URL dans la ligne de commande, en suivant le modèle suivant:

 gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

Par exemple, supposons que vous préfériez l’apparence de Material Design pour votre site statique. Le moyen le plus rapide de le créer consiste à utiliser Gatsby Material Starter en tapant la commande suivante sur votre terminal:

 gatsby new sitepoint-demo https://github.com/Vagr9K/gatsby-material-starter

Génial! Voyons maintenant les fichiers de votre tout nouveau projet Gatsby.

Visite guidée de votre site statique Gatsby

Le répertoire / src / est un bon point de départ. Voici ce que vous trouverez.

Annuaire de pages

L’annuaire / src / pages / contient les pages de votre site. Chaque page est un composant de React. Par exemple, le code de la page d'accueil de votre site se trouve dans /pages/index.js et ressemble à ceci:

     import Réagissez à partir de "réagir"
    importer {Link} de "gatsby"
    importer une disposition de "../components/layout"
    importer Image de "../components/image"
    importer le référencement de "../components/seo"

    const IndexPage = () => (
    
      
      
 Bonjour à tous 
      
 Bienvenue sur votre nouveau site Gatsby. 
      
 Maintenant, construisez quelque chose de grand. 
      

        
      
       Allez à la page 2 
    
    )

    export par défaut IndexPage

C’est le code typique d’un composant React, c’est-à-dire:

un morceau de code autonome (généralement écrit avec JSX) pouvant accepter une entrée et renvoyer des éléments React décrivant une section de l’UI. – Gatsby docs .

Annuaire des composants

Le répertoire / src / components / est l'endroit où vous trouvez les composants généraux de votre site Web. Le démarreur par défaut comprend les composants suivants: En-tête ( header.js ), Image ( image.js ), Mise en page ( layout.js ), et SEO ( seo.js ). Vous êtes libre de personnaliser ces composants et d'ajouter les vôtres dans le même répertoire.

Vous êtes maintenant prêt à modifier votre nouveau site et à le personnaliser à votre goût.

Comment apporter des modifications à votre Gatsby Site

Essayons de modifier le message affiché sur la page d'accueil. Ouvrez pages / index.js dans votre éditeur de code et remplacez les deux paragraphes situés en dessous de la balise

par ce paragraphe:

    
 Bienvenue sur mon site de démonstration SitePoint! 

Bien entendu, vous pouvez ajouter le texte de votre choix entre les balises

.

Dès que vous appuyez sur Save vos modifications sont affichées dans le navigateur grâce à la fonction de rechargement à chaud de Gatsby’s.

Gatsby facilite l'ajout de nouvelles pages. Par exemple, ajoutons une page À propos en créant un nouveau fichier, about.js dans le répertoire / pages / et entrez le contenu suivant:

     import Réagissez à partir de "réagir"

    const AboutPage = () => 
 À propos de moi 

    export par défaut

Le code ci-dessus est un composant fonctionnel React sans état qui affiche du texte.

Enregistrez votre travail et accédez à https: // localhost: 8000 / about et vous devriez voir le titre À propos de moi

sur votre écran

Vous pouvez rapidement accéder à votre nouvelle page À propos de à partir de la page d'accueil à l'aide du composant Gatsby Link . Pour voir comment cela fonctionne, ouvrez index.js dans votre éditeur de code et localisez ce morceau de code juste avant la balise de fermeture :

    . Allez à la page 2 

Ensuite, remplacez la valeur des propriétés par par / about / et par le Allez à la page 2 par À propos de :

     À propos de 

Enregistrez votre travail et vous devriez voir votre nouveau lien à l'écran. Cliquez sur le lien À propos pour accéder instantanément à la page À propos de.

Gatsby utilise le composant Link pour les liens internes . Pour les liens externes, vous devriez utiliser la bonne vieille balise comme vous le feriez sur un site Web HTML en vanille normal.

Maintenant, testons l'apparence de votre site Gatsby en modifiant quelques styles.

Site Gatsby

Gatsby offre un certain nombre d’options pour l’application de règles de style à votre site Web statique.

Global Stylesheet

Il est courant d'utiliser un fichier global .css contenant les règles applicables à l'ensemble du site Web. Pour commencer, ajoutez un répertoire / styles / dans le répertoire / src / et ajoutez-y un fichier global.css : / src / styles / global.css . Vous êtes libre de choisir le nom de votre choix pour le répertoire et le fichier de feuille de style. Dans global.css ajoutez la déclaration CSS suivante, qui sera appliquée à l'ensemble du site:

     body {
      couleur de fond: jaune;
    }

Maintenant, enregistrez votre travail. Oups, rien ne se passe! Pas encore en tout cas. Pour que cela fonctionne, vous devez prendre une mesure supplémentaire. Ouvrez gatsby-browser.js dans votre éditeur de code et importez la feuille de style que vous venez de créer:

     import "./src/styles/global.css"

Enfin, démarrez votre serveur de développement en tapant gatsby develop sur votre terminal et le tour est joué: la couleur d'arrière-plan de votre site Web est devenue jaune vif.

Styles globaux avec un composant de disposition partagée

Bien que l’ajout d’une feuille de style globale et son importation dans gatsby-browser.js fonctionne très bien, le recommandé L’ajout d’un style global à votre site Web statique Gasby consiste à utiliser un composant de disposition partagé . Le démarreur par défaut de Gatsby est livré avec ce composant et sa feuille de style associée.

Pour voir comment cela fonctionne, ouvrez layout.js et layout.css dans votre éditeur de code (vous trouverez les deux fichiers dans les composants /

Au sommet de layout.js notez la déclaration d'importation qui met à disposition les règles CSS contenues dans layout.css pour le composant Layout partagé et donc pour le site entier:

     import "./layout.css"

Dans layout.css localisez la déclaration CSS de l'élément body, elle devrait être autour de la ligne 199. Voici à quoi cela ressemble:

     body {
      couleur: hsla (0, 0%, 0%, 0,8);
      famille de polices: georgia, serif;
      poids de la police: normal;
      word-wrap: mot de rupture;
      police de caractères: normale;
      -moz-font-feature-settings: "kern", "liga", "clig", "calt";
      -ms-font-feature-settings: "kern", "liga", "clig", "calt";
      -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
      font-feature-settings: "kern", "liga", "clig", "calt";
    }

Maintenant, ajoutez une règle pour la couleur de fond, comme suit:

     background-color: yellow;

Enregistrez votre travail. La couleur d'arrière-plan de votre site Web doit redevenir jaune.

Styles à la composante: Modules CSS

Le module CSS est un fichier CSS dans lequel Les noms de classe et d'animation sont définis localement par défaut localement.

Avec les modules CSS, vos styles ne sont appliqués qu'à un composant spécifique, ce qui permet de conserver des composants autonomes, donc faciles à gérer et à réutiliser.

Les modules CSS sont livrés avec Gatsby et la documentation recommande cette façon d’ajouter des styles aux composants Gatsby et aux composants React en général.

Suivez ces étapes pour ajouter un composant de paragraphe élégant à votre page À propos de.

Créez le composant de paragraphe élégant

Dans le répertoire / components / de votre projet Gatsby Default Starter, créez un fichier et appelez-le fancy-paragraph.js .

Ouvrez fancy-paragraph.js dans votre éditeur de code et entrez le code suivant:

     import Réagissez à partir de "réagir"
    importer fancyParagraphStyles de "./fancy- paragraphe.module.css"

    const FancyParagraph = (props) => 
 {props.articleText} 

    export par défaut FancyParagraph

Il s'agit d'un composant fonctionnel simple de React – rien de nouveau, à l'exception de l'instruction qui importe le module CSS fancy-paragraph, que vous n'avez pas encore créé.

Le composant utilise les styles contenus dans le module fancy-paragraph comme une valeur dans la propriété className . Comme vous pouvez le constater, cette valeur ressemble beaucoup à un objet JavaScript classique qui utilise .fancy qui est le nom de la classe, en tant que propriété de l’objet fancyParagraphStyles . Vous écrirez les styles de cette classe dans votre module CSS.

Créez le module CSS de paragraphes sophistiqués

Inside / components / créez un autre fichier et appelez-le fancy-paragraph.module.css . Ouvrez ce fichier et donnez un style à la classe .fancy de la manière que votre fantaisie vous propose, c’est juste du CSS normal. Voici à quoi ressemble le mien:

     .fancy {
      taille de la police: 1.5rem;
      text-align: center;
      hauteur de ligne: 1,2;
      rembourrage: 0.5rem;
      couleur: #fff;
      couleur de fond: rebeccapurple;
      poids de la police: 800;
      style de police: italique;
      text-transform: majuscule;
    }

Vous êtes maintenant prêt à utiliser votre composant Fancy Paragraph avec vos styles fantaisistes n’importe où sur votre site statique Gatsby.

Ajoutons un paragraphe élégant à votre page À propos.

Ajoutez le composant Paragraphe à la page À propos de

Commencez par ajouter ces deux instructions d'importation à votre page À propos, juste en dessous de l'importation React déjà existante: [19659039] importer la mise en page à partir de "../components/layout"
    importer FancyParagraph de "../components/fancy- paragraphe"

L’extrait ci-dessus met à disposition le composant Gatsby Layout, que vous allez utiliser dans votre page À propos, et le composant Paragraphe Élégant que vous venez de créer.

Ensuite, modifiez votre composant fonctionnel AboutPage pour qu'il ressemble à ceci:

     const AboutPage = () => (
    
      
 À propos de moi 
      
    
    )

Votre nouveau composant fonctionne comme n'importe quel autre composant React, il suffit de le glisser sur la page, à l'emplacement exact où vous souhaitez qu'il apparaisse et que vous ayez terminé. Ce composant utilise les accessoires de React pour rendre le texte du paragraphe plus dynamique.

Enregistrez votre travail et accédez à la page À propos de, où vous devriez voir votre paragraphe fantaisie dans toute sa splendeur. Le mien ressemble à ceci:

Mission accomplie!

Styles à la taille d'un composant: styles en ligne

Une option supplémentaire pour le style de composants est simplement à ajouter en ligne Styles CSS sous la forme d'un objet JS

Vous pouvez voir ce motif en action dans votre projet Gatsby Default Starter. Par exemple, ouvrez index.js dans votre éditeur et localisez ce code dans le composant IndexPage:

Remarquez comment les styles CSS sont appliqués au

qui contient le composant Image: les styles se présentent sous la forme d'un objet JS où les noms de propriété CSS sont les clés et les valeurs CSS, les valeurs correspondantes.

Remarquez également comment les noms de propriété CSS composés suppriment le symbole dash (-) et utilisent la convention camelCase à la place, par exemple, marginBottom et non pas CSS margin-bottom .

. ] Comment déployer votre site Gatsby

Il existe des sociétés qui rendent extrêmement rapide et pratique l’hébergement de sites Web statiques.

Utilisons Netlify pour lancer votre tout nouveau site Web Gatsby. Netlify fournit:

Un flux de travail tout-en-un qui associe un déploiement mondial, une intégration continue et un protocole HTTPS automatique.

Il convient parfaitement à l'hébergement de sites Web statiques.

Vous devez d'abord créer une version de production de votre Projet Gatsby. Pour ce faire, entrez la commande suivante dans votre terminal:

 gatsby build

Vous avez maintenant un dossier nommé public contenant tous les fichiers statiques que votre site Web doit exécuter dans le navigateur.

La prochaine étape consiste à placer votre projet Gatsby dans un référentiel tel que GitHub. Netlify prend en charge GitHub, GitLab ou Bitbucket: chaque fois que vous appliquez des modifications à votre code, Netlify exécute une construction avec l'outil choisi et déploie les résultats sur son CDN à chargement rapide.

Pour commencer, connectez-vous à Netlify, sélectionnez Nouveau site à partir de Git choisissez votre référentiel, entrez votre commande de construction et le nom de votre dossier public, puis cliquez sur Deploy site .

Vous pouvez consulter le processus de déploiement en détail dans cette vidéo sur la documentation de Netlify .

Félicitations, votre site Web statique Gatsby est en ligne!

Prochaines étapes et ressources

Pour vraiment maîtriser Gatsby, rendez-vous sur son site web et consultez le tutoriel officiel et les documents .

Aussi, pour tirer le meilleur parti de Gatsby, je vous recommande de maîtriser la manipulation de données à l'aide de GraphQL. Voici quelques excellents didacticiels pour vous aider à démarrer:

Enfin, assurez-vous de parcourir Gatsby Tutorials une liste mise à jour par la communauté de fichiers vidéo, audio et écrits pour vous aider à apprendre Gatsby.

Maria Antonietta Perna est corédactrice du canal HTML / CSS de SitePoint et développeur web front-end. Elle aime bricoler avec les normes CSS rigoureuses et est curieuse d’apprendre des approches pédagogiques du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues marches et la bonne nourriture.