SEO: Premiers pas avec Gatsby | www.HTMLGoodies.com

SEO: Premiers pas avec Gatsby | www.HTMLGoodies.com

Gatsby est un framework React qui vous permet de créer des applications statiques sans serveur. Les sites de Gatsby sont différents des sites traditionnels car ils sont souvent déployés sur un réseau de distribution de contenu (CDN) et sont indépendants du contenu.

L’avantage du déploiement à partir d’un CDN est qu’il y a moins de latence et que les sites sont généralement servis au client plus rapidement.

Gatsby est souvent décrit comme un maillage de contenu. Un maillage de contenu signifie qu’en tant qu’utilisateur, vous pouvez extraire des données de diverses sources, telles qu’un site WordPress, un fichier CSV et diverses API externes ; en conséquence, Gatsby est agnostique des données.

Ceci est différent d’un système de gestion de contenu (CMS) traditionnel tel que WordPress et Drupal, où les données proviennent généralement d’une source unique – une base de données. Lorsque vous créez une application dans Gatsby, vous n’avez pas à vous soucier de la maintenance et du provisionnement d’une base de données. De plus, en utilisant Gatsby, vous pouvez créer une structure connue pour sa rapidité et sa flexibilité.

Ces sites sans serveur sont également connus sous le nom de JAMStack. Dans une architecture JAMStack, il y a toujours un serveur impliqué, mais le développeur n’a pas besoin de provisionner ou de maintenir le serveur. Certains développeurs considèrent les serveurs sans serveur comme une fonctionnalité souhaitable car ils peuvent se concentrer davantage sur la logique métier de leur application.

Par exemple, s’ils créaient une boutique de commerce électronique, ils pourraient se concentrer sur le code directement lié à la création et à la vente de produits. JAMStack aide les développeurs à développer rapidement des sites Web plus sûrs, plus efficaces et moins coûteux à déployer que les frameworks CMS traditionnels.

A la fin de ce tutoriel, vous serez capable de créer et de modifier un site Gatsby. Vous allez lancer votre premier site de commerce électronique Gatsby, mais nous ne créerons ce site que sur votre ordinateur local et ne le déploierons pas.

Lire: Meilleures plateformes CMS pour les développeurs Web

Vous trouverez ci-dessous les conditions préalables pour travailler avec Gatsby dans React :

  • Version de Node.js > 10.
  • Une compréhension de JavaScript sera utile. Bien que Gatsby utilise React, vous n’avez pas besoin de connaître React pour commencer, mais il serait utile de se familiariser avec les bases.

Comment installer Gatsby et la configuration du projet

Dans cette étape, vous allez installer un nouveau site Gatsby à partir d’un modèle. Gatsby fournit aux utilisateurs des modèles de démarrage, vous n’avez donc pas à vous soucier de créer un site Web à partir de zéro.

Téléchargez le Gatsby CLI emballer. Cette interface en ligne de commande Gatsby vous permettra de créer et de personnaliser un nouveau site Web :

npm install -g gatsby-cli

Le drapeau -g signifie que vous installez l’interface de ligne de commande Gatsby globalement et qui vous permettra d’utiliser l’outil dans n’importe quel répertoire.

Si vous tapez la commande suivante, plusieurs commandes peuvent être utilisées lorsque vous travaillez avec Gatsby :

gatsby help

Cela produira la sortie suivante :

Tutoriel Gatsby React

Options de commande d’aide de Gatsby

Maintenant que les outils de ligne de commande Gatsby sont installés, vous avez toujours besoin d’un site Web. L’un des avantages de Gatsby est que vous n’avez pas à coder un site à partir de zéro.

Gatsby propose plusieurs modèles de démarrage que vous pouvez utiliser pour que votre site soit opérationnel. Il existe des centaines de modèles, et bon nombre de ces contributions proviennent de la communauté.

Pour ce didacticiel de développement Web et Gatsby, nous utiliserons l’un des premiers modèles du Gatsby officiel, le Gatsby Starter Default. La première chose à faire est d’installer un démarreur Gatsby via le terminal :

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

Cette commande crée un nouveau site Web en utilisant le modèle gatsby-starter-default et nomme le projet d’après le modèle.

Faites attention aux journaux jusqu’à ce que vous voyiez le projet créé avec succès.

Maintenant que nous avons créé un nouveau projet Gatsby et exploré la structure du fichier, entrons dans le projet et personnalisons les métadonnées du site Web.

Lire: Angular vs React : Comparaison des fonctionnalités

Comment modifier les configurations de Gatsby

Si vous souhaitez que votre site soit découvert par un moteur de recherche, il est important de formater correctement vos métadonnées. Dans cette section, vous allez configurer le titre, la description et les métadonnées de l’auteur dans votre application.

Ouvert gatsby-config.js dans un éditeur de texte pour voir la configuration de Gatsby. Ce qui suit est gatsby-config.js avec les paramètres fournis avec le Démarreur par défaut de Gatsby maquette:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Le fichier de configuration de Gatsby contient également ses plugins. Les plugins sont des packages que vous installez pour ajouter des fonctionnalités à votre application Gatsby.

Cette installation de Gatsby est fournie avec les plugins gatsby-plugin-react-helmet, gatsby-plugin-image, gatsby-transformer-sharp, gatsby-plugin-sharp et gatsby-plugin-manifest.

Chaque modèle Gatsby Default Starter contient les mêmes métadonnées génériques. Personnalisons ces données en remplaçant le texte par le titre, la description et l’auteur en mettant à jour l’objet de code suivant :

siteMetadata: {
    title: `HtmlGoodies - Getting Started with Gatsby`,
    description: `A quick overview of Gatsby features and setup.`,
    author: `@htmlgoodies`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},

Enregistrez et quittez le fichier.

Désormais, lorsque Google ou un autre moteur de recherche explore votre site Web, il récupère les données associées à votre application. Passons à autre chose et mettons à jour l’une des pages du site Web.

Modification d’une page d’index Gatsby

Il est temps de voir à quoi ressemble le site Web de Gatsby dans votre navigateur. Ouvrez une nouvelle fenêtre de terminal et tapez la commande suivante pour afficher la version locale du site :

gatsby develop

Cette commande déclenche le téléchargement de toutes les dépendances de nœud requises, configure le bundle de développement et démarre le serveur de développement accessible à l’adresse http://localhost:8000/.

Tutoriel de programmation Gatsby

Page d’accueil initiale par défaut de Gatsby

Modifions le balisage de la page pour qu’il ressemble davantage au contenu que vous trouveriez sur un site de commerce électronique. Modifiez son contenu comme suit :

import * as React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import  from "../components/"
import Product from "./product"

const products = [
  {
    id: 1,
    title: "Hand sanitizer",
    price: 12.39,
    photo: "hand_sanitizer.png",
  },
  {
    id: 2,
    title: "Thermometer",
    price: 23.99,
    photo: "thermometer.png",
  },
  {
    id: 3,
    title: "Disinfectant spray",
    price: 5.0,
    photo: "disinfectant_spray.png",
  },
  {
    id: 4,
    title: "Alcohol spray",
    price: 9.99,
    photo: "alcohol_spray.png",
  },
]

const IndexPage = () => (
  
    
    

Welcome to your web pharmacy

   

Choose among the best online products for your personal hygiene.

   
     style={{        display: "grid",        gridTemplateColumns: "1fr 1fr",      }}    >      {products.map((prod, i) => (              ))}    
  ) export default IndexPage

Notez que nous utilisons un peu plus de puissance React ici. Nous avons créé une gamme de des produits pour émuler les données provenant de votre serveur. Ensuite, nous itérons sur ses valeurs pour créer pour chacun un nouveau Produit composant.

Les Produit le composant a besoin de son fichier. Alors, allez-y et créez un nouveau fichier appelé produit.js et ajoutez-y ce contenu :

import { Link } from "gatsby"
import * as React from "react"

const Product = ({ product }) => (
  
   style={{      padding: "2rem",      margin: "2px",      border: "1px solid grey",      textAlign: "center",    }}  >          src={product.photo}      width={150}      quality={95}      alt={product.title}      style={{ marginBottom: `1.5rem` }}    />    

{product.title}

         Price: ${product.price}        Add to cart
 
) export default Product

Remarquez comment nous utilisons chaque élément du tableau de produits pour créer un nouvel article sur la liste de commerce électronique, comme illustré ci-dessous :

Tutoriel du développeur Gatsby React

Nouveaux articles de commerce électronique tirés de la gamme de produits codés en dur

Les images doivent être insérées dans le /statique dossier à la racine de votre projet Gatsby. Vous pouvez ajouter vos propres versions pour voir comment cela fonctionne.

Conclusion à Gatsby pour les débutants

Dans ce didacticiel, vous avez créé votre premier site Web Gatsby. Vous avez appris à configurer un site Gatsby de base sur votre ordinateur local. Maintenant que vous pouvez créer et personnaliser une application Gatsby, allez-y et jouez avec, ajoutez plus de composants et parcourez la documentation pour voir ce que Gatsby peut vous offrir d’autre.

Lire : Angular vs React : un conte de deux philosophies

All the CMS Templates You Could Ask For.

SEO: Premiers pas avec Gatsby | www.HTMLGoodies.com

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



#Premiers #pas #avec #Gatsby #wwwHTMLGoodiescom