Gatsby

Cet article est une débauche. Vous pouvez m’aider à l'améliorer.

Gatsby est un générateur de site statique basé sur React avec une prévisualisation en live .

Gatsby utilise React pour produire des pages statiques qui suivent le pattern PRPL pour une vitesse de chargement exceptionnelle. Les pages statiques peuvent être sourcées à partir d'une énorme variété de data, traduites en GraphQL, puis requêtées pour produire une collection de pages générées au moment de la construction.

Ceci veut dire qu'il y a du balisage HTML qui est complètement lisible par les machines - le rendant compatible SEO/indie/webmention/js;dr.

À cette heure il suppote beaucoup de sources de data :

• Filesystem (souvent des fichiers Markdown)
• Drupal
• Medium.com
• WordPress
• MongoDB
• RSS

Ces sources de data peuvent être ensuite transformées :

• Remark (transforme le Markdown en HTML)
• YAML
• TOML

(Notez qu'elles sont uniquement en lecture durant le temps de build - aussi vou devez re-construire pour récupérer le nouveau contenu)

Opportunités

Quand il s'agit de données "entrantes" à ce générateur de site, il faudrait pousser les données vers l'une des sources de données connectées puis déclencher une reconstruction. Pour l'instant, il ne prend pas en charge les reconstructions incrémentielles, mais dans l'ensemble, les performances sont plutôt bonnes pour les sites de petite taille pour une reconstruction complète.

Vous pouvez probablement gérer les webmentions entrantes en ayant une petite application sur un autre sous-domaine qui pousse les webmentions dans MongoDB, puis déclenche une reconstruction du site pour inclure de nouvelles mentions.

Voir aussi

• générateur de site statique

---

démarrage de l'étude 2018-124 xtof 4 mai 2018 à 18:10 (UTC)

tutoriels

tutoriel officiel https://www.gatsbyjs.org/tutorial/

1. https://www.gatsbyjs.org/tutorial/part-one/ publication avec [Surge](http://surge.sh/) sur https://confused-use.surge.sh 1. CSS dans Gatsby https://www.gatsbyjs.org/tutorial/part-two/ 1. Layouts dans Gatsby https://www.gatsbyjs.org/tutorial/part-three/ 1. [Requêter de la data dans un blog](https://www.gatsbyjs.org/tutorial/part-four/) : Créer un blog et utiliser une requête GraphQL pour tirer le titre du site dans l'en-tête du blog. 1 ... à suivre

---

2018-04-26 Pierre Burgy - Jamstatic : Construire un blog statique avec Gatsby et Strapi

---

2017-12-05 Josh Weaver - Frank Taillandier : Gatsby + Contentful + Netlify et Algolia

---

2018-01-20 [Hunter Chang](https://github.com/ChangoMan) : Gatsby with Contentful CMS

---

2018-04-04 Robert Svensson : Gatsby + Contentful Starter to Get a Website Up and Running in 5 Minutes

[Source](https://www.gatsbyjs.org/blog/2018-04-04-gatsby-contentful-starter-tutorial/ "Permalink to Gatsby + Contentful Starter to Get a Website Up and Running in 5 Minutes")

1. Kit de démarrage Gatsby + Contentful pour Avoir un Site Web Fonctionnel en 5 Minutes

[ ![Gatsby+Contentful][1] ][2]

_This blog post was originally posted on the [Contentful Docs][3]_

Fonctionnant avec React et avec l’accent sur des performances rapides, GatsbyJS est un générateur de site statique prometteur qui vous permet de connecter vos projets à une diversité d’APIs et de sources de données ; avec en bonus l’infrastructure de contenu de Contentful.

Cet article vous emmènera vers la création d’un site web Gatsby fonctionnel et tournant avec Contentful. Contentful vous facilite la concentration sur le développement de sites web magnifiques, performants tout en distribuant le contenu - ceci nous fait un compagnon génial pour l’expérience de création de contenus offerte par GatsbyJS.

Voici un aperçu de ce qui est inclus :

• Créer un compte gratuit Contentful
• Cloner un repo échantillon
• Créer un espace sur Contentful pour stocker le contenu
• Générer votre Gestion de Contenu et les jetons d’accès à l’API de distribution de contenu
• Importer les data dans votre espace
• Bricoler votre fichier de configuration
• Prévisualiser un build de production
• Publier et aller en live

1. 1. 1. Démarrage

Ce guide suppose que vous avez [installé GatsbyJS][4] et en option un [compte Github][5]. Vous aurez aussi besoin d’un compte gratuit chez Contentful - [en créer un][6] se fait en un instant.

Commençons par utiliser le Gatsby CLI :

   gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter

Alternativement, vous pouvez aussi cloner un repo échantillon à partir de Github :

   git clone git@github.com:contentful-userland/gatsby-contentful-starter.git

Allez ensuite dans le dossier et installez les dépendances requises

   npm install 

1. 1. 1. Créez un nouvel espace pour stocker le contenu

[Un Espace dans Contentful][7] sert d’aire de storage pour le contenu qui sera utilisé dans votre site web et pourra être configuré afin de servir des objectifs spécifiques. Le contenu est décrit et stocké en utilisant un modèle de data que nous appelons les `content types` ; ceux-ci sont complètement configurables.

Créez un nouvel espace vide en ouvrant la barre latérale du menu et en ajoutant un Espace `Create New Space. Donnez à l’espace un nom et cliquez sur "Create" pour vous lancer et le créer.

[![Créer un nouvel espace][8] ][9]

1. 1. 1. Générer les tokens d’accès

Avant de partir dans la partie plus excitante de régler votre site web, vous devez d’abord générer trois jetons d’accès pour faire que votre site motorisé-par-Contentful soit fonctionnel et le lancer en récupérant les data à partir de l’API.

• [Content Management API](https://www.contentful.com/developers/docs/references/content-management-api/)
• [Content Delivery API](https://www.contentful.com/developers/docs/references/content-delivery-api/)
• [Content Preview API](https://www.contentful.com/developers/docs/references/content-preview-api/)

Rendez-vous sur le menu déroulant Space Settings et naviguez vers la section API Keys. À partir de là , naviguez vers l’onglet pour l’API token que vous aimeriez générer.

L’API de Content Management est utilisée pour un accès en écriture à votre espace, aussi conservez le token généré dans un endroit et privé. Pressez le bouton vert  »Generate Personal Token", donnez-lui un nom et cliquez sur "Generate". Copiez la valeur du token et gardez-la dans un endroit sûr et privé - c’est le seul moment où vous pourrez le voir dans votre tableau de bord.

CFPAT-d201478fdc776c8fe2d50816e87898feb82c23632d31af631eeb59674eb78a3b

[ ![Générer un token d’accès personnel][10]][11]

L’API de Content Delivery fournit un accès en lecture seule à vos données et c’est l’un des moyens pour délivrer du contenu sur le site web. Le contenu est servi via notre Content Delivery Network (CDN). Cliquez sur "Add API key" dans l’onglet Content Delivery/Preview. Saisissez le jeton d'accès Space ID et Personal Content Delivery API - vous en aurez besoin dans un instant.

92b9469d34be2a627f3156596afaf903435bef45b0b438d9e0b466576ffebb80

L’API Content Preview fonctionne tout comme l’API deContent Delivery, si ce n’est qu’elle affiche le contenu pour vous en interne afin de prévisualiser et par conséquent elle n’utliise pas le CDN pour servir le contenu content ; du fait que la visualisation est uniquement limitée à vous, l’utilisateur prévisualiser. Créer une clé d’API est la même chose ici que ce que vous avez fait avec Content Delivery.

ec443c7fafdec52dcfaf098bb0f1314660c960052086e42f258816fcc2890d78

[ ![Créer une nouvelle clé API][12] ][13]

1. 1. 1. Modèle de Contenu et Configuration

Commencez à mettre les choses en place avec la commande `npm run setup`, qui vous demandera d’abord l’ID de l’Espace vide que vous venez de créer avec les jetons d’accès pour les APIs de Content Management, Content Delivery, et Content Preview.

Ensuite, il écrira les credentials que vous avez fournies dans un fichier appelé .contentful.json à l’intérieur de lignes de code qui ressemble à ce qui suit :

   {  
      "development":{  
         "host":"preview.contentful.com",
         "spaceId":"...",
         "accessToken":"..."
      },
      "production":{  
         "spaceId":"...",
         "accessToken":"..."
      }
   }

Utilisant les credentials dans le fichier .contentful.json, le [contenu peut être maintenant importé][14] à l’intérieur de votre espace pour être affiché sur votre site via notre API.

1. 1. 1. C’est prêt, Publions

Temps de vérifier notre nouveau site web - de prévisualiser les changements dans un environnement local en lançant notre projet à travers l’utilisation de la commande `npm run dev`. Ceci utilise l’[API Preview Contentful][15] pour montrer le contenu non publié comme s’il était déjà publié - c’est parfait pour un environnement de développement ou de staging.

Si vous aimez ce que vous voyez, utilisez la commande `npm run build` pour démarrer un nouveau build de production de votre site web presque prêt à l’usage et le placer sur un hébergeur statique de votre choix. Après cela, la commande `npm run deploy` vous permet de publier ce que vous avez sur le build de production vers GitHub pages.

1. 1. 1. Déploiement

Vos fichiers statiques peuvent être ensuite déployés sur une variété de plates-formes de votre choix, comme [BitBalloon][16] et [GitHub Pages][17]. Faites votre choix. Contentful vous donne l'infrastructure pour le contenu de votre pile, qui correspond à votre façon modulaire et agile de travailler avec l'indépendance de la plate-forme et en servant de layer dans votre pile.

Contentful garantit que votre site Web et ses utilisateurs pourront rapidement accéder à votre contenu et de manière fiable. Votre contenu est juste un appel API.

1. 1. 1. Résumé

Vous avez désormais un bref aperçu de la façon de lancer un site Web à partir de zéro en utilisant Contentful et GatsbyJS.

La plate-forme de Contentful offre rapidité, flexibilité et facilité d'intégration avec votre code, prenant en charge toute pile utilisée avec les SDK pour des langages communs tels que [Javascript][18], [Python][19] et [PHP][20]. Contrairement à un CMS, Contentful vous offre une séparation entre le contenu et la présentation, ce qui vous permet de vous concentrer sur le développement de votre site Web et de laisser la livraison de contenu à Contentful.

Si vous êtes curieux d'en savoir plus sur Contentful, vous pouvez consulter le Centre de développement [Content Developer][21] pour en savoir plus sur le fonctionnement de la technologie, ou rendez-vous dans la section [Guides et tutoriels][22].

[1]: https://www.gatsbyjs.org/static/gatsby_contentful-a49e18619f16b38d555c234501d30ffb-c4266.png "" [2]: https://www.gatsbyjs.org/static/gatsby_contentful-a49e18619f16b38d555c234501d30ffb-a807e.png [3]: https://www.contentful.com/r/knowledgebase/gatsbyjs-and-contentful-in-five-minutes/ [4]: https://www.gatsbyjs.org/docs/ [5]: https://github.com/join [6]: https://www.contentful.com/sign-up/ [7]: https://www.contentful.com/r/knowledgebase/spaces-and-organizations/ [8]: https://www.gatsbyjs.org/static/new_space-be671b3129a54fb56c9e0090b1aeeba4-c4266.png "" [9]: https://www.gatsbyjs.org/static/new_space-be671b3129a54fb56c9e0090b1aeeba4-db193.png [10]: https://www.gatsbyjs.org/static/access_token-33fabc1bbf6871f7473371ebfc6175f4-c4266.png "" [11]: https://www.gatsbyjs.org/static/access_token-33fabc1bbf6871f7473371ebfc6175f4-14ea0.png [12]: https://www.gatsbyjs.org/static/api_key-ded9c07a256428d1374a4e840a420bc9-c4266.png "" [13]: https://www.gatsbyjs.org/static/api_key-ded9c07a256428d1374a4e840a420bc9-2a0bc.png [14]: https://www.contentful.com/developers/docs/tutorials/general/import-and-export/ [15]: https://www.contentful.com/developers/docs/references/content-preview-api/ [16]: https://www.bitballoon.com/ [17]: https://pages.github.com/ [18]: https://www.contentful.com/developers/docs/javascript/sdks/ [19]: https://www.contentful.com/developers/docs/python/sdks/ [20]: https://www.contentful.com/developers/docs/php/sdks/ [21]: https://www.contentful.com/developers/docs/ [22]: https://www.contentful.com/guides/