GatsbyJS et la JAMStack

Jeudi 15 octobre 2020, Niort Tech

Jeudi 15 octobre 2020, Niort Tech

1. Le besoin

Créer un site web

• performant
• avec du contenu dynamique
• et une stack de dév moderne

Source

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / performance

Les CDN

Source

Démo !

maaf.fr, TagCo

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / performance

Démo ! ExpressVPN, {myIp, remoteIP} pour {maaf.fr, cat-fintech.netlify.app}

Netlify Edge

Source

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / contenu dynamique

> CMS

> CMS headless (pour afficher le contenu avec des outils modernes)

> Contentful

Except for Netlify, all CDN hosting services for static sites (that actually cache sites) make you wait anywhere from 10 minutes to several hours for your changes to be invalidated

> Netlify "instant cache invalidation"

Source

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / stack web moderne

Le contenu est saisi dans un CMS, le site est servi par un CDN...

Mais comment est-ce que le site est mis à jour ?

Démo :

1. Contribution CMS
2. Déploiement Continu

• Webhook fourni par Netlify
• appelé par Contentful

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / stack web moderne

Le site est re-généré par... un générateur de site (statique)

• à chaque nouvelle publication (webhook)
• et à chaque commit dans les sources (intégration Github)

Sources Github

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / stack web moderne

$ gatsby build

Gatsby is a React-based open source framework for creating websites and apps.

GatsbyJS et la JAMStack

"Journey to a content mesh"

https://jamstack.wtf/

Jeudi 15 octobre 2020, Niort Tech

2. Une solution / Vue d'ensemble

Jeudi 15 octobre 2020, Niort Tech

Développement

Démo de dév

Deploy contexts Netlify...

Jeudi 15 octobre 2020, Niort Tech

Questions...

Plus d'infos ici

a.vergnaud@cat-amania.com