Comment créer un blog sous React et Gatsby en 10 minutes environ

Copains / Photo de Genevieve Perron-Migneron sur Unsplash
Avertissement: Ceci a été écrit pour Gatsby Version 1, la version 2 vient de paraître et comporte des modifications. Je vais travailler sur un autre tutoriel pour ça.

Gatsby est un générateur de site statique rapide et révolutionnaire basé sur ReactJS.

Un générateur de site statique (SSG) est un compromis entre un site statique HTML codé en dur et un CMS (système de gestion de contenu) complet, tel que Wordpress.

Un SSG peut être utilisé pour générer des pages HTML pour des sites Web axés sur le contenu (tels que des blogs). Il suffit de disposer de données pour le contenu de la page et du modèle à remplir avec le contenu.

Ce poste sera divisé en cinq sections:

  1. Commencer.
  2. Création de composants de mise en page.
  3. Créer des articles de blog.
  4. Générer de nouvelles pages à partir de données d'articles de blog.
  5. Créez une liste des fichiers de démarques de notre site dans la page de destination.

Nous allons plonger de plus près dans Gatsby et certaines de ses fonctionnalités en créant un blog statique imaginaire appelé CodeStack. La maquette est montrée ci-dessous. Allons-y! ️

Une page de liste de blogs / Un seul article de blog

1. Commencer

Conditions préalables

Tout d’abord, assurez-vous que Node.js est installé sur votre système. Sinon, allez sur nodejs.org et installez une version récente pour votre système d'exploitation.

En outre, cet article suppose que vous comprenez ReactJS.

Installer le CLI

Gatsby a un outil en ligne de commande qui fournit des commandes utiles telles que:

  • gatsby new: pour l’échafaudage d’un nouveau projet Gatsby.
  • gatsby develop: pour lancer un serveur de développement Web activé par le rechargement à chaud.
  • gatsby build: pour construire une version prête à la production du projet.

Pour installer, tapez ce qui suit sur votre terminal et appuyez sur Entrée:

npm installer --global gatsby-cli

Permet de créer un dossier de projet codestack-blog et de naviguer dans le terminal.

gatsby new codestack-blog && cd $ _

Si vous exécutez gatsby develop sur le dossier du projet, le site échafaudé devrait ressembler à ceci:

Ajout de plugins

Gatsby a un nombre important et croissant de plugins. Il s’agit essentiellement de packages Node.js qui s’interfacent avec les API de Gatsby.

Ils peuvent être installés via le NPM (Node Package Manager) sur le terminal et se divisent généralement en trois catégories: plugins fonctionnel, source et transformateur.

Plugins fonctionnels

Ces plugins fournissent des fonctionnalités supplémentaires sur un site Gatsby ou dans son environnement de développement. Pour notre application, nous aurons besoin de:

  • gatsby-plugin-react-helmet: permet de modifier les étiquettes de tête. Notez que son déjà installé dans notre projet d'échafaudage.
  • gatsby-plugin-catch-links: intercepte les liens locaux provenant de pages de balisage et autres pages non réactives, et effectue un pushState côté client pour éviter que le navigateur n'ait à actualiser la page.

Installez les plugins, ou seulement le second plugin seulement.

npm installer le casque gatsby-plugin-react-gatsby gatsby-plugin-catch-links

Chaque fois que nous ajoutons un nouveau plugin, nous devons mettre à jour le fichier gatsby-config.js avec le nouveau plugin afin que Gatsby le reconnaisse et l'utilise. Nous utilisons des anti-tiques.

module.exports = {
  siteMetadata: {
    titre: `Gatsby Default Starter`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-catch-links`,
  ],
}

Plugins source

Ces plugins «sources» des données depuis des emplacements distants ou locaux dans ce que Gatsby appelle des nœuds. Pour écrire nos articles dans Markdown sur notre disque local, nous avons besoin de:

  • gatsby-source-system: sources les données sur les fichiers du système de fichiers de votre ordinateur.
npm installer le système de fichiers gatsby-source

Mettez à jour le fichier gatsby-config.js:

module.exports = {
  siteMetadata: {
    titre: `Gatsby Default Starter`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-catch-links`,
    {
      résoudre: `gatsby-source-filesystem`,
      options: {
        chemin: `$ {__ dirname} / src / pages`,
        nom: 'pages',
      },
    }
  ],
}

Que se passe t-il ici? Un objet options peut être passé à un plugin pour plus de configuration. Nous passons le chemin du système de fichiers (c'est-à-dire où nos fichiers Markdown seront situés), puis un nom pour les fichiers source, afin que Gatsby connaisse nos fichiers source et où appliquer les plugins de transformation.

Plugins Transformer

Ces plugins transforment les données brutes des nœuds en formats de données utilisables. Par exemple, nous aurons besoin de:

  • gatsby-transformer-remarque: cela transforme les articles de blog écrits dans des fichiers .md de markdown sur le disque local en HTML pour le rendu.
npm installe gatsby-transformer-remarque

Mettez à jour le fichier gatsby-config.js à nouveau.

module.exports = {
  siteMetadata: {
    titre: `Gatsby Default Starter`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-catch-links`,
    {
      résoudre: `gatsby-source-filesystem`,
      options: {
        chemin: `$ {__ dirname} / src / pages`,
        nom: 'pages',
      },
    },
    `gatsby-transformer-remarque`,
  ],
}
Bien joué! / Crédit: Nigel Payne

2. Création de composants de mise en page

Gatsby vous permet de créer facilement des «composants de mise en page». Les composants de mise en page sont des sections de votre site que vous souhaitez partager sur plusieurs pages. Pour le blog que nous construisons, il s'agit de l'en-tête et des barres latérales.

Dans le dossier racine, jetez un coup d’œil à src / layouts. Vous découvrirez un fichier index.js dans lequel nous définissons les composants de présentation. index.css est déjà venu avec des styles.

Après avoir exploré le fichier index.js, vous constaterez que deux composants ont déjà été créés: Header et TemplateWrapper. Dans TemplateWrapper, nous encapsulons le contenu de notre site avec des composants de mise en page que nous souhaitons présenter sur plusieurs pages.

Ceci est rendu possible par les enfants () accessoires. Il rendra tous les composants non-layout de notre site où il est placé. Notez que contrairement aux accessoires enfants React, les accessoires enfants transmis aux composants de présentation sont une fonction et doivent être exécutés.

Tout d’abord, créez un nouveau dossier et un fichier CSS dans src / styles / layout-overide.css. Ajoutez à la liste des importations dans le fichier index.js. Nous devons l'importer après index.css pour remplacer certaines règles de style existantes.

importer Réagir de 'réagir'
importer des PropTypes à partir de 'types-prop'
importer un lien à partir de 'gatsby-link'
importer un casque de 'react-helmet'
importer './index.css'
importer "../styles/layout-overide.css";

Ouvrez layout-overide.css et collez les règles de styles suivantes. Pas besoin de comprendre cela.

* {
    arrière-plan: # f5f5f5;
    la couleur noire;
}
html {
    hauteur: 100%;
}
corps {
    hauteur: 100%;
    bordure: 5px solide # ffdb3a;
}
h1 {
    taille de la police: 1.5rem;
    hauteur de ligne: 0.5rem;
}
p, div {
    taille de police: 16px;
}

Mettez à jour le composant d'en-tête.

const Header = () => (
  
    
     

                   CodeStack                         )

Créez également un composant Sidebar.

Const Sidebar = (props) => (
     {props.title}. {props.description}
)

Nous souhaitons que les composants de la barre latérale et rendus {enfants ()} se comportent de manière réactive, comme ceci:

Comme il n’était pas facile de définir des requêtes multimédia dans React, j’ai trouvé une bibliothèque appelée react-media, un composant de requête de média CSS pour React. Installez-le.

npm install --save react-media

Il fournit un composant qui écoute les correspondances avec une requête de média CSS et rend les éléments en fonction de la correspondance ou non de la requête.

Ajoutez-le à la liste des importations dans notre fichier.

importer le média de 'react-media'

Permet de tout mettre en page dans les composants (en-tête, barre latérale et enfants) comme nous le souhaitons dans TemplateWrapper. Apportez les modifications suivantes (excusez la fiche éhontée de mon nom):

const TemplateWrapper = ({enfants}) => (
  
              
               {correspondances =>           allumettes ? (             
              
{enfants ()}                        ): (