{"data":{"markdownRemark":{"html":"

Ok, je suis à la semaine 3 de mon stage et en commençant à apprendre GatsbyJS je me suis rendu compte que même si Strapi est super cool, Netlify CMS va plus correspondre à ce dont on a besoin.

\n

Netlify CMS au lieu de Strapi

\n

“Mais d’où vient donc cette révélation ?” ✨

\n

C’est au détour d’une conversation avec Maxime (@n4mzar) - un des développeurs de commit42 - que j’ai découvert l’existence de ce CMS.

\n

Suite à la lecture de mon article sur le choix de la stack, Maxime a voulu tester Strapi (qui fonctionne très bien) mais il a trouvé et testé en parallèle Netlify CMS et il s’est aperçu que ça correspondait mieux à nos besoins sur ce projet de refonte de site. C’est pourquoi il m’en a fait part au plus tôt, c’est à dire, lundi matin en arrivant au bureau.

\n

“ Et du coup est-ce que tu peux nous en dire un peu plus sur NetlifyCMS ?” 🤔

\n

Alors, Netlify CMS c’est aussi un headless CMS - comme Strapi - mais qui permet de générer des fichiers Markdown. En fait l’éditeur de contenu est un WYSIWYG (what you see is what you get) ce qui permet de faire directement la mise en page de l’article et c’est justement ce qui m’intéresse.

\n

Il se trouve que dans la release v3@alpha.12 de Strapi, un éditeur de contenu WYSIWYG a aussi été mis en place suite à une forte demande, mais ce qui m’a fait changer d’avis quant à Strapi c’est que Netlify CMS n’a pas besoin de base de données. Lorsque l’on crée un nouveau post avec Netlify CMS, ce dernier est automatiquement exporté en fichier markdown puis stocké dans un dossier dans le repository du projet. Ce qui a l’avantage de faciliter le déploiement avec Netlify (Netlify normal, pas Netlify CMS… vous m’suivez ?) car il il n’y a pas de base de données à héberger.

\n

Gatsby + Netlify CMS + Semantic UI

\n

“Quelles sont les autres nouvelles de la semaine Eva ?” 👀

\n

J’ai passé beaucoup de temps à lire et regarder des tutoriels pour comprendre comment fonctionne GatsbyJS (tous les liens seront dans les sources) et surtout à comprendre l’organisation du dossier et l’utilisation de chaque fichier. J’ai aussi mis en place Netlify CMS sur un projet test avec Gatsby avec Semantic UI que j’ai ensuite déployé pour essayer toute la stack en même temps. Pour voir le répo c’est par ici.

\n

De ce que j’ai compris, un projet avec Gatsby est composé de la façon suivante:

\n
|-- /.cache\n|-- /blog\n|-- /src\n\t|--/components\n\t\t|-- layout.js\n\t|-- /pages\n\t\t|-- index.js\n\t\t|-- 404.js\n\t|-- /templates\n|-- /static\n      |--/admin\n\t\t|-- config.yml\n|-- gatsby-config.js\n|-- gatsby-node.js\n|-- gatsby-ssr.js\n|-- gatsby-browser.js
\n

Je vais expliquer l’utilisation des fichiers et dossiers auxquels j’ai eu à faire, pour les autres je vous laisse la documentation de Gatsby.

\n

/blog

\n

Le nom de ce fichier est arbitraire, c’est là que seront stocké les fichiers .md rédigés via Netlify CMS. Si vous n’utilisez pas Netlify CMS vous n’aurez pas besoin de ce dossier.

\n

/src/components

\n

De la même façon que dans un projet React, le dossier /components contient tous les composants. Dans ce dossier on trouvera également un fichier layout.js car dans Gatsby le layout est un composant qui va contenir toutes les parties redondantes du site (menu, navigation, footer…). Le composant doit en principe entourer les autres composants:

\n
src/components/layout.js\n\nimport React from \"react\";\nimport Navigation from \"./global/navigation\";\nimport Footer from \"./global/footer\";\n\nexport default ({ children }) => (\n  <div>\n    <Navigation />\n      {children}\n    <Footer />\n  </div>\n)
\n
src/pages/index.js\n\nimport React from \"react\";\nimport Layout from \"../components/layout\";\n\nexport default IndexPage () => {\n  return (\n    <Layout>\n      <h1>Hello world !</h1>\n    </Layout>\n  )\n}
\n

/src/pages

\n

Ce dossier contient toutes les pages du site. A chaque fois qu’un fichier est ajouté dans ce dossier une route portant le même nom est créé.

\n

NB: pensez à ne pas mettre de majuscule au début du nom de vos pages sinon la route correspondante aura aussi une majuscule (sauf si c’est ce que vous voulez).

\n

Par exemple le fichier Articles.js donnera la route suivante http://commit42.com/Articles.

\n

/src/templates

\n

Les templates sont des fichiers qui donnent la structure pour un même type de données. Dans mon cas je vais avoir un template pour les articles de blog, qui pourrait par exemple donner ça:

\n
blogPostTemplate.js\n\nimport React from \"react\";\nimport Layout from \"../components/layout\";\n\nexport default const BlogPostTemplate ({ data }) => {\n\n  const { markdownRemark } = data\n  const { frontmatter, html } = markdownRemark\n\n  return (\n    <Layout>\n      <div className=\"blog-post\">\n        <div>\n          <h1>{frontmatter.title}</h1>\n          <h4>{frontmatter.date}</h4>\n          {\n            frontmatter.tags && frontmatter.tags.map((tag, index) => <button key={index}>{tag}</button>)\n          }\n        </div>\n        <img src={frontmatter.thumbnail} />\n        <div \n          className=\"blog-post-content\"\n          dangerouslySetInnerHTML={{__html: html}}\n        />\n      </div>\n    </Layout>\n  )\n}\n\nexport const pageQuery = graphql`\n  query($path: String!) {\n    markdownRemark(frontmatter: { path: { eq: $path } }) {\n      html\n      frontmatter {\n        date(formatString: \"MMMM DD, YYYY\")\n        path\n        title\n        tags\n        thumbnail\n      }\n    }\n  }\n`
\n

NB: Dans la div en dessous de la balise img j’injecte directement le markdown récupéré avec GraphQL, ainsi je n’ai aucune mise en page à faire !

\n

NB 2: La query tout à la fin après le composant est une requete qui grâce à GraphQL me permet de récupérer les données dont j’ai besoin, ici les articles. Le frontmatter est la partie tout en haut d’un fichier markdown (.md) dans laquelle on met toutes les informations qui ne sont pas le contenu de l’article (le titre, la date, le nom de l’auteur, les tags…)

\n

Exemple:

\n
---\ntitle: Article 1\nAuthor: Eva\nPath: /articles/article-1\nDate: 06/03/2019\n---\n\nIci le contenu !
\n

Ainsi tous mes articles auront cette structure:

\n

\n \n \n \n

\n

/static/admin

\n

Le dossier admin contient la configuration pour Netlify CMS. C’est dans un fichier config.yml que l’on défini les collections et les champs que l’on souhaite pouvoir remplir depuis l’interface. De même que le dossier /blog, si vous n’utilisez pas Netlify CMS vous n’aurez pas besoin de ce dossier.

\n

Si Netlify CMS vous intéresse voici le lien pour le configurer: https://www.netlifycms.org/docs/add-to-your-site/

\n

gatsby-config.js

\n

C’est le fichier dans lequel on configure les extensions que l’on installe pour Gatsby.\nDe mon côté j’ai utilisé:

\n\n

Les deux premiers servent à récupérer et formater le markdown pour qu’il soit lu par GatsbyJS, les autres vont s’occuper d’optimiser les images (donc pour réduire le temps de chargement etc).

\n

gatsby-node.js

\n

Ce fichier permet de gérer la création de pages à partir des données récupérées via GraphQL.\nPar exemple pour les articles, au lieu de créer une page par article dans le dossier /src.pages, j’ai créé un template dans lequel j’injecte les données pour chaque article. Seulement pour accéder à un article il faut une route unique, c’est donc dans gatsby-node.js que l’on va configurer ça. (ici la documentation officielle à ce sujet)

\n

Déploiement 🚀

\n

Concernant le déploiement sur Netlify j’ai eu un peu de mal comme c’était sur la première fois et dans la documentation de Gatsby je n’avais pas compris qu’il fallait à la fois gérer le déploiement sur Netlify et l’OAuth sur Github (mais grâce à Maxime qui avait testé pour moi ce week-end ça a été).

\n

Cependant faites bien attention à configurer dans le dossier config.yml le repo que vous allez utiliser avant de lancer le déploiement.

\n

Vous pouvez trouvez le répo et la démo juste ici.

\n

Conclusion 👏

\n

Conclusion\nCette semaine de formation et de tests a été des plus primordiale car j’ai pu revoir ma stack et l’ajuster. Outre ce petit changement de CMS, j’ai bien pu prendre en main GatsbyJS, Netlify CMS et le déploiement sur Netlify que je ne connaissais pas du tout.

\n

Avec Gatsby j’ai rapidement compris l'intérêt du layout et des templates qui vont me faire gagner énormément de temps dans la conception future du nouveau site. Netlify CMS quant à lui est très facilement configurable, super accessible et pratique ; le déploiement de l’ensemble a été incroyablement rapide, pour quelqu’un qui n’avait encore jamais déployé une application j’ai été bluffée.

\n

Dans le prochain article je vous parlerai du MVP du site de commit42 que je ferai avec la nouvelle stack évoquée dans cet article: GatsbyJS + Semantic UI React + Netlify CMS. Stay tuned !

\n

Sources

\n

Tutoriels GatsbyJS

\n\n

Afficher la liste des fichiers markdown

\n

https://www.gatsbyjs.org/docs/adding-a-list-of-markdown-blog-posts/

\n

Créer des pages avec GatsbyJS

\n

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/

\n

Structure type d’un projet avec Gatsby

\n\n

Gatsby et NetlifyCMS

\n

https://www.gatsbyjs.org/docs/sourcing-from-netlify-cms/#sourcing-from-netlify-cms

\n

Même si on a plus prévu de s’en servir, j’ai quand même trouvé un tutoriel pour Gatsby et Strapi:

\n

https://jamstatic.fr/2018/04/26/construire-un-blog-statique-avec-gatsby-et-strapi/

\n

Plugin pour Gatsby et Strapi

\n

https://www.gatsbyjs.org/packages/gatsby-source-strapi/?=strapi

\n

Exemple de site avec Gatsby et Sémantic UI

\n

https://www.gatsbyjs.org/starters/parmsang/gatsby-starter-ecommerce/

\n

Netlify vs Netlify CMS

\n

https://www.netlifycms.org/docs/intro/#netlify-cms-vs-netlify

","excerpt":"Ok, je suis à la semaine 3 de mon stage et en commençant à apprendre GatsbyJS je me suis rendu compte que même si Strapi est super cool…","timeToRead":9,"fields":{"slug":"/blog/netlify-cms-gatsbyjs-et-un-beau-repo/"},"frontmatter":{"date":"2019-03-07T00:00:00.000Z","tags":["NetlifyCMS","GatsbyJS","Netlify"],"title":"Netlify CMS, GatsbyJS et un repo tout beau","author":"Eva Spessotto","thumbnail":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsSAAALEgHS3X78AAABp0lEQVQoz42S62obMRCF9f6vVAoNFArBaUtCXOw45EJsvOvVZXQd7UraHtsQ0iY/MvshBklHmjkrwXlkzj4W7caExMdpKqDWOp+ilPqWWtvm/mmxuF7eLoXStu+Hrj8QuWks45GplGIM/bj8fXO7JvLauBP2nEACNHkRmQMHH0PKPNVpntv5wsRltdk9b6WxkzTJGHamkinAnjAmC9pHt8uhH/0+u332+9Hp5ORNkD8br0r8E/SvqO92crM+fHnSF4/626O+eNBft+Za9C+ktsH2TF2iDiMbGYZuaeXSm5U360CrSM/b4eGu+76zV1tagBe67GgtrPMxpza32uBFbXMNkcnxOLVxms/wWK3lnCraKuMRJJyq8CE571+9RcSUnfMGRsH6GBDMjCukkgc5JE4RX4oxsYC9ELTW3orJwmGLkayz1icc5yNqxAwOBAFSnoS1wbmItVcMBaWP/0MqQIMibVDI8SDIsNm64H0KMQssKP0PmPkPTEIQgudT5Jw5M16UeL/1IzFMiLgZoOAQjh2jl0+JAdmgFEllBmXQi9LkfPqs+EP+Ana14ZDTTuiVAAAAAElFTkSuQmCC","aspectRatio":1.5384615384615385,"src":"/static/d1b387b32d46407d2b0110a3bc80a456/c7e19/netlify-cms2.png","srcSet":"/static/d1b387b32d46407d2b0110a3bc80a456/475cb/netlify-cms2.png 245w,\n/static/d1b387b32d46407d2b0110a3bc80a456/0b65f/netlify-cms2.png 490w,\n/static/d1b387b32d46407d2b0110a3bc80a456/c7e19/netlify-cms2.png 980w,\n/static/d1b387b32d46407d2b0110a3bc80a456/ba299/netlify-cms2.png 1200w","sizes":"(max-width: 980px) 100vw, 980px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/blog/netlify-cms-gatsbyjs-et-un-beau-repo/"}}