Vous songez à vous engager dans le train Jamstack ? Si votre réponse est oui, alors Gatsby l’un des générateurs de sites statiques Jamstack les plus populaires, pourrait être exactement ce que vous recherchez. Voici notre guide pour démarrer avec Gatsby.

JAM signifie JavaScript, API et Markup. En d'autres termes, alors que les parties dynamiques d'un site ou d'une application pendant le cycle de demande / réponse sont prises en charge par JavaScript dans le client, tous les processus côté serveur ont lieu à l'aide d'API accessibles via HTTPS par JavaScript, et le balisage basé sur un modèle est prédéfini à temps de déploiement, souvent à l'aide d'un générateur de site statique. C’est le Jamstack. Il est performant, peu coûteux à mettre à 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 convient pas à tous les types de projets, mais quand il le fait, il présente un certain nombre d'avantages . En voici quelques-uns:

Vitesse

Le temps nécessaire à un site Web pour se charger dans le navigateur lorsque la demande est faite pour la première fois est un facteur important pour l'expérience utilisateur. Les utilisateurs s'impatientent très rapidement et les choses ne peuvent qu'empirer avec des connexions lentes. Le manque d'appels à la base de données et le contenu pré-généré rendent les sites statiques très rapides à charger.

Un site statique est constitué de fichiers statiques qui peuvent être facilement servis partout dans le monde en utilisant des réseaux de diffusion de contenu (CDN). Cela permet d'exploiter le centre de données le plus proche de l'endroit où la demande est effectuée.

Hébergement simplifié

L'hébergement pour les sites statiques peut être configuré en un clin d'œil. Comme il n'y a pas de base de données ou de code côté serveur, de langages ou de frameworks spéciaux à 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 ou base de données, il n'y a pas tout ce que les pirates peuvent pirater. Il n'y a aucun souci à maintenir le serveur à jour avec des correctifs de sécurité et des correctifs. Tout cela signifie beaucoup plus de tranquillité d'esprit en ce qui concerne la sécurité de votre site Web.

Meilleure expérience pour les développeurs

La configuration de votre site Web statique avec une société d'hébergement comme Netlify ou Vercel est simple et, avec un déploiement continu, vous il suffit de pousser vos modifications dans le référentiel de code de votre choix et elles sont immédiatement reflétées dans la version live.

Qu'est-ce que Gatsby?

Gatsby est l'un des outils les plus populaires pour la création de sites Web aujourd'hui. C’est plus qu’un générateur de site statique. En fait, il s'agit d'un «cadre open source basé sur React pour la création de sites Web et d'applications». Comme Gatsby est construit sur React toute la bonté React est à portée de main, ce qui vous permet de profiter de cette puissante bibliothèque pour créer des composants interactifs directement dans votre site Web statique. Gatsby est également construit avec GraphQL vous pouvez donc interroger les données et les afficher sur votre site Web comme vous le souhaitez.

Installer Gatsby et créer votre projet

Gatsby est assemblé à l'aide de webpack mais vous n'avez pas à vous soucier des manœuvres de configuration compliquées; La CLI Gatsby s'occupe de tout pour vous.

Pour ce didacticiel, je suppose que Node.js est installé localement. Si ce n’est pas le cas, rendez-vous sur la page d’accueil de Node et téléchargez les binaires appropriés pour votre système . Vous pouvez également envisager d'utiliser un gestionnaire de versions pour installer Node. Nous avons ici un tutoriel sur l'utilisation d'un anager de version .

Node est livré avec npm, le gestionnaire de packages Node, que nous allons utiliser pour installer certaines des bibliothèques que nous utiliserons. Vous pouvez en savoir plus sur l'utilisation de npm ici .

Vous pouvez vérifier que les deux sont correctement installés en exécutant les commandes suivantes à partir de la ligne de commande:

 node -v
>   12,18  .4

 npm  -v
>   6,14  0,8

La première chose à faire est d'installer la CLI Gatsby. Il s'agit d'un package npm qui vous permet de créer un site Gatsby en quelques secondes. Dans votre terminal, écrivez:

  npm   install  -g gatsby-cli

Une fois la CLI Gasby installée sur votre machine, vous pouvez continuer et créer votre site Web. Je l’appellerai sitepoint-demo mais vous êtes libre de l’appeler comme vous le souhaitez. Dans votre terminal, saisissez:

 gatsby new sitepoint-demo

Une fois que l'interface de ligne de commande Gatsby a installé tous les fichiers nécessaires et les a correctement configurés, vous disposerez d'un site Web Gatsby entièrement fonctionnel, prêt à être personnalisé et développé. 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 site Gatsby brillant ressemblant à ceci:

[19659007] Pour mettre rapidement un site Web en marche, Gatsby profite de plusieurs passe-partout officiels de démarrage ainsi que des démarreurs offerts 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 de Gatsby .

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

 gatsby new  [ SITE_DIRECTORY_NAME ]   [ URL_OF_STARTER_GITHUB_REPO ] 

Par exemple, supposons que vous souhaitiez une présentation matérielle de votre site. Le moyen le plus rapide de le créer est d'utiliser Gatsby Material Starter en tapant la commande suivante dans votre terminal:

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

Génial! Examinons maintenant les fichiers contenus dans votre tout nouveau projet Gatsby.

Visite de votre site Gatsby

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

pages Annuaire

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

 import   React   from   "react" 
 import   {  Link  }   from   "gatsby" 
 import   Layout   from   "../ components / layout" 
 import   Image   de   "../ components / image" 
 import   SEO   from   "../ components / seo" 

 const   IndexPage   =   ()   =>   (
 < Layout  > 
   < SEO   title  ] =  " Domicile "    /> 
   < h1 >  Bonjour les gens  </  h1 [19659072]> 
   < p >  Bienvenue sur votre nouveau site Gatsby.  </  p > 
   < p > [19659086] Maintenant, construisez quelque chose de grand. [1 9659087] </  p > 
   < div   style  =  { { maxWidth :   `[19659105] 300px  «  marginBottom :  «  1.45rem  »  } }  [19659072]> 
     < Image    /> 
   </  div > 
   < Link   to  =  " / page-2 /  " >  Aller à la page 2  </  Lien  > 
   < Lien [19659080] à  =  " / using-typescript / "  >  Go to "Using TypeScript"  </  Link  ] > 
 </  Disposition  > 
) 

 exportation   par défaut   IndexPage 

C'est le code typique d'un composant React.

Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables et de penser à chaque élément de manière isolée. … Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées arbitraires (appelées «accessoires») et renvoient des éléments React décrivant ce qui devrait apparaître à l'écran. – React docs .

components Répertoire

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

Vous êtes maintenant prêt à commencer à apporter des modifications à votre nouveau site et à le personnaliser à votre goût.

Comment modifier 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 sous la balise

par ce paragraphe:

 < p >  Bienvenue sur mon SitePoint Site de démonstration!  </  p > 

Bien sûr, vous pouvez ajouter le texte de votre choix entre les balises

.

Dès que vous cliquez sur Save vos modifications sont affichées dans le navigateur grâce à Gatsby's hot rechargement de l'environnement de développement . Cela signifie que lorsque vous développez un site Gatsby, les pages sont surveillées en arrière-plan de sorte que lorsque vous enregistrez votre travail, les modifications seront immédiatement visibles sans avoir besoin d'une actualisation de page ou d'un redémarrage du navigateur.

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 saisissons ce contenu:

 import   React [19659048] de   "react" 

 const   AboutPage   =   ()   =>   < h1 > [19659086] À propos de moi  </  h1 >  

 export   default   AboutPage 

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

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

sur votre écran.

Vous pouvez rapidement créer un lien vers votre nouvelle page À propos 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 bout de code juste avant la balise de fermeture :

   < Lien   vers  =  " / page-2 / "  >  Aller à page 2  </  Lien  > 

Ensuite, remplacez la valeur de la propriété par par / about / et le texte Aller à la page 2 par About :

   < Lien   to  =  " / about / "  >  About  </  Lien  > 

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

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

Maintenant, expérimentons avec l'apparence de votre site Gatsby en changeant quelques styles.

Styling Your Site Gatsby

Gatsby propose un certain nombre d'options pour appliquer des règles de style à votre site Web.

Feuille de style globale

Un choix familier consiste à utiliser un fichier global .css qui contient des règles qui s'appliquent à le site Web entier. 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   {
   background-color :   yellow ; 
} 

Maintenant, enregistrez votre travail. Oups, rien ne s'est passé! Pas encore en tout cas. Pour que cela fonctionne, vous devez faire un pas 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" 

Revenez à votre navigateur et vous devriez voir que la couleur d'arrière-plan de votre site Web est devenue jaune vif. Pas idéal comme choix de couleur, mais ça marche!

Styles globaux avec un composant de mise en page partagé

Bien que l'ajout d'une feuille de style globale et son importation dans gatsby-browser.js fonctionne très bien, le recommandé La façon d'ajouter des styles globaux à votre site Web Gatsby consiste à utiliser un composant de mise en page partagé . Le Gatsby Default Starter est livré avec ce composant et sa feuille de style associée prêts à l'emploi.

Pour voir comment cela fonctionne, supprimons l'instruction d'importation ci-dessus de gatsby-browser.js et enregistrez le fichier. L'arrière-plan de votre site Web devrait devenir blanc. Ensuite, ouvrez layout.js et layout.css dans votre éditeur de code (vous trouverez les deux fichiers dans le répertoire components / ).

At en haut de layout.js notez l'instruction import, qui rend les règles CSS contenues dans layout.css disponibles pour le composant Layout partagé et donc pour l'ensemble du site:

 import   "./ layout.css" 

Dans layout.css recherchez la déclaration CSS pour l'élément body. Il devrait être autour de la ligne 8. Voici à quoi cela ressemble:

 body   {
   margin :   0 ; 
   -webkit-font-smoothing  :  anti-crénelé ; 
   -moz-osx-font-smoothing :  niveaux de gris ; 
   couleur :    hsla  ( 0   0 %   0 %   0.8 )  ; [19659217] font-family :  georgia  serif ; 
   font-weight :  normal ; 
   word-wrap  ]:  break-word ; 
   font-kerning :  normal ; 
   -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" ; 
} 

Ajoutez maintenant une règle pour la couleur de fond, quelque chose comme ceci:

 background-color :   yellow ; 

Enregistrez votre travail, et vous devriez voir la couleur d'arrière-plan de votre site Web devenir à nouveau jaune.

Styles à l'échelle des composants: modules CSS

Un module CSS est un fichier CSS dans lequel toutes les classes les noms et les noms d'animation sont définis localement par défaut.

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

Les modules CSS sont fournis avec avec Gatsby prêt à l'emploi et les documents recommandent 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 sophistiqué à votre page À propos.

Créez le composant Paragraphe de fantaisie [19659319] Dans le répertoire / components / de votre projet Gatsby Default Starter, créez un fichier et appelez-le fancy-paragraph.js .

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

 import   React   from   "react" 
 import  fancyParagraphStyles  from   "./ fancy-paragraph.module.css" [19659068] const   FancyParagraph   =   ( props )   =>   < p className  =  { fancyParagraphStyles  ].  fancy } >  { props .  paragraphText }  < /  p > 

 export   par défaut   FancyParagraph 

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

Le composant utilise les styles contenus dans le module fancy-paragraph comme une valeur à l'intérieur de la propriété className . Comme vous pouvez le voir, cette valeur ressemble beaucoup à un objet JavaScript normal qui utilise .fancy qui est le nom de la classe, comme la propriété de l'objet fancyParagraphStyles . Vous allez écrire les styles de cette classe dans votre module CSS.

Créez le module CSS Fancy Paragraph

Dans / components / créez un autre fichier et appelez-le fancy-paragraph. module.css . Ouvrez ce fichier et attribuez un style à la classe .fancy comme qui vous convient . C'est juste du CSS ordinaire. Voici à quoi ressemble le mien:

  .fancy    {
   font-size :   1.5  rem ; 
   text-align :  center ; 
   line-height :   1,2 ; 
   padding :   0,5  rem ; 
   couleur :   #fff ; 
   background-color :  rebeccapurple ; 
   font-weight :   800 [19659072]; 
   font-style :  italic ; 
   text-transform :  uppercase ; 
} 

Vous êtes maintenant prêt à utiliser votre composant FancyParagraph avec vos styles fantaisie n'importe où sur votre site Gatsby.

Ajoutons un paragraphe sophistiqué à votre page À propos.

Ajoutez le paragraphe sophistiqué Composant de la page À propos de

Commencez par ajouter ces deux instructions d'importation à votre page À propos, juste en dessous de l'import React déjà existant:

 import   Layout   from   "../ components / layout "
 import   FancyParagraph   from  " ../ components / fancy-paragraph "

L'extrait de code ci-dessus rend le composant Gatsby Layout, que vous allez utiliser dans votre page About, et le composant Fancy Paragraph que vous venez de créer disponibles sur votre page About.

Ensuite, modifiez votre AboutPage composant fonctionnel ressemblant à ceci:

 const   AboutPage   =   ()   =>   (
 < Layout  ] > 
  < h1 >  À propos de moi  </  h1 > 
  < FancyParagraph   paragraphText  =  " Styled with CSS Modules. "    /> 
 </  Mise en page  > 
) 

Votre nouveau composant fonctionne comme n'importe quel autre composant React. Il suffit de le claquer sur la page, à l'endroit exact où vous voulez qu'il apparaisse, et vous avez terminé. Ce composant particulier exploite les accessoires React pour rendre le texte du paragraphe plus dynamique.

Enregistrez votre travail et accédez à la page À propos, où vous devriez voir votre paragraphe sophistiqué dans toute sa splendeur. La mienne ressemble à ceci:

Mission accomplie!

Styles à l'échelle des composants: Styles en ligne

Les styles CSS en ligne sous la forme d'un objet JS sont une option de style supplémentaire que vous pouvez utiliser.

Votre projet basé sur Gatsby Default Starter montre cette technique en action. Par exemple, ouvrez index.js dans votre éditeur et recherchez ce code dans le composant IndexPage :

   < div   style  =  { { maxWidth :   ` 300px `   marginBottom :   " 1.45rem "   } }  > 
   <  Image    /> 
 </  div > 

Remarquez comment les styles CSS sont appliqués au

 module .  exports   =   {
  siteMetadata :   {
    titre :   ` SitePoint Demo Gatsby Site `  
     ... 
  } 
   ... 

 const   SecondPage   = [19659038] (  { données }  )   =>   (
   < Mise en page  > 
     < SEO   title  =  " Page two "    /> 
     < h1 >  Bienvenue dans  { data .  site .  siteMetadata .  title [19659072]}  </  h1 > 
     < p >  J'ai utilisé une requête GraphQL  </  p > 
     < Lien   vers  =  " / "  >  Revenir à la page d'accueil  </ [19659076] Lien  > 
   </  Layout  > 
) 

 export   const  query  =  graphql [19659526] `
   query  testQuery  {
    site  {
      siteMetadata  {
        Titre
      } 
    } 
  } 
 ` 
 exportation   par défaut   SecondPage 

 plugins :   [
     « gatsby-plugin-react-casque »  
     {
      résoudre :   « gatsby-source-filesystem »  
      options :   {
        nom :   « images »  
        chemin :   ` $ { __ dirname }   / src / images `  
      }  , 
    }   ... 

 gatsby build