La Jamstack révolutionne notre manière de travailler en proposant une expérience de développement plus simple, de meilleures performances, des coûts bien moins élevés et une grande scalabilité.
Vous vous demandez peut-être ; oui OK, mais comment ? pourquoi ? c'est quoi au juste ?
C'est la raison d'être de cette page https://jamstack.wtf.
Le but de ce guide est de présenter de manière claire le concept de la Jamstack et d'inciter d'autres développeurs à adopter cette approche.
Le contenu ci-dessous est tiré du site ci-dessus 👆
Asseyez-vous, mettez-vous à l'aise et appréciez ✌️
- Nous soutenir
- Contributeurs
- Charte graphique
- Administrateurs
- À propos de Jamstatic
- Actualités
- Références
- Exemples de code
- Qu'est-ce que vous faites quand vous ne travaillez pas sur Jekyll ?
- Peux-tu nous dire comment tu as été amené à t'impliquer dans Jekyll et ce qui s'est passé depuis pour aboutir à la mise en ligne de la version 3.0 de Jekyll ?
- Tu as débuté avec la 0.12.1 ?
- Quelle fut ta première expérience de programmation ?
- Quelle fut ta première rencontre avec les générateurs de site statique modernes ?
- C'était donc une question de masse critique ? Il y avait pas mal de gens, donc tu savais que c'était vivant et actif
- Que souhaites-tu aux générateurs de site statique ?
- Comment est-il possible de faire cela ?
- Le dynamique a l’air bien plus intéressant !
- Oui statique ça fait un peu péjoratif dans ce contexte
- En tant que mainteneur de Jekyll, qu'aimerais-tu dire, communiquer à ceux qui s'intéressent aux technologies autour du web statique moderne ? La tribune est à toi
- Prérequis
- Pages utilisateur et organisation
- Pages projet
- Les thèmes peuvent désormais fournir des assets statiques et dynamiques dans le dossier /assets
- Les filtres relative_url et absolute_url
- site.url est maintenant défini pour le serveur de développement
- Et bien plus encore
- Prérequis
- Préparer son thème
- Tester son thème
- Un guide complet pour coder et déployer un site, tout en ligne de commande
- C’est quoi Jekyll ?
- Développons un portfolio !
- Plongeons dans les fichiers
- Modifier les paramètres de votre site
- Ajoutons notre premier article !
- YAML front matter
- Liquid
- Écrire un article pour de vrai
- Un autre exemple d’article en .md
- Ajoutons un peu de CSS à tout ça
- Sass
- Versionnement avec Git
- Configurer Git
- Créer un dépôt sur GitHub
- GitHub Pages
- Mes conseils supplémentaires
- Système de grille
- Rythme vertical
- Fin
- Passer à la version 2 de Staticman
- Ajout du support des fils de commentaires
- Ajout du support des notifications par mail
- La transformation de Jekyll
- Le cœur de Jekyll
- Test exhaustif d’une génération
- Génération des fichiers sans l’option brouillons
- Génération des fichiers avec l’option brouillon
- Comment et pourquoi en êtes-vous arrivés à choisir un générateur de site statique comme clé de voûte de votre processus de publication aux éditions The Getty ? Pourquoi ne pas avoir opté pour un développement natif ?
- Comment votre équipe s'est appropriée ce nouveau workflow ? L'appropriation a-t-elle été facile ?
- Est-ce que tu penses qu'un process à base de technologies web peut remplacer le couple démoniaque Word et InDesign ? Particulièrement en ce qui concerne la facilité d’écriture et de structuration des contenus (WYSIWYG) ainsi que la mise en page (InDesign) ?
- Est-ce que ce nouveau process augmente la qualité des publications de The Getty ?
- Est-ce que ce nouveau workflow vous fait gagner du temps et de l’argent ? Y’a t-il une différence de prix de revient pour les livres, y compris pour les livres papier ?
- Quelles sont les contraintes auxquelles vous vous heurtez encore aujourd’hui ? Quel serait votre workflow idéal ?
- Est-ce que tu penses que d’autres maisons d’édition vont adopter à leur tour cette stratégie avec des générateurs de site statique (pas de WYSIWYG, un balisage léger, pas de base de données, des métadonnées YAML, versionnement avec Git, etc.) ? Est-ce qu'un courant pourrait se former autour de ce concept ?
- Les rudiments d’un générateur de site statique
- Allons au cœur du problème
- Les rudiments de Harp
- C’est pas si compliqué, non ?
- Mon rapport et mon livre
- Du YAML front matter, une boucle for et pas mal de modules
- Le workflow Git
- Utilisation de Netlify
- Configuration de Jekyll
- De quoi parle-t-on ?
- Prérequis
- Jamstack et développement statique
- 1. Référencement
- 2. Performance
- 3. Sécurité
- 4. Déploiement & Workflow
- 5. Une communauté en pleine expansion
- Est-ce que c'est fait pour moi ?
- Écouter l’épopée de Smashing Magazine
- Un travail titanesque
- Ainsi naquirent nos rêves d’open source
- Notre CMS open source
- Putain, on l’a fait !
- Configurer Netlify
- Authentification via GitHub
- Ajout des fichiers de l’admin
- Accéder à l’administration
- Et voilà !
- Choisir un générateur de site statique
- Configurer Hugo
- Se plonger dans Hugo : quelques détails techniques
- Héberger chez Netlify
- Résumé de ma configuration actuelle
- Objectifs futurs
- Quelques mots de conclusion ?
- Quels problèmes Gatsby essaie-t-il de résoudre ?
- Comment se positionne Gatsby par rapport aux autres générateurs de sites statiques, qu'ils soient basés sur React ou non ?
- Quelle longévité peut-on espérer pour Gatsby ?
- Que prévoyez-vous ensuite ?
- Hugo : un générateur de site statique super rapide
- Tutoriel Hugo : site, produits, modèles et déploiement
- Démo de site Hugo et dépôt GitHub
- Conclusion et ressources supplémentaires
- Introduction
- Fondamentaux des templates Hugo
- Prenons de la hauteur
- La fin et le début
- Comment fonctionnent les thèmes ?
- Comment utiliser un thème ?
- Quels thèmes puis-je utiliser ?
- Trucs et astuces pour créer un super thème
- Bien configurer son environnement
- C’est parti
- La structure de fichiers
- Développer votre thème
- Ajouter des contenus d’exemple
- Soumettre sa gem de thème
- Les thèmes distants sur GitHub Pages
- Tests et mises à jour
- Bonjour Bjørn Erik, comment t'es-tu retrouvé impliqué dans Hugo ?
- Les problèmes résolus par Hugo
- Comment fait Hugo pour aller si vite ?
- Quels sont les sites les plus visibles qui utilisent Hugo ?
- Comment se porte le projet actuellement ?
- Hugo est open source. Comment se passe la gestion du projet ?
- Qui vous soutient dans le développement ?
- Quelle est la prochaine étape pour Hugo ?
- Bonjour Bud, tu es un observateur et un défenseur de ce que beaucoup désignent encore comme de simples sites statiques. Comment les choses ont-elles évolué depuis quelques années ?
- En 2015 Tom Preston-Werner disait lors de la JekyllConf que 80% du Web pourrait être statique, est-ce le cas aujourd’hui ?
- Les administrations publiques aux États-Unis (avec 18F), au Royaume-Uni (avec Alphagov) ou en France (avec Etalab) semblent privilégier ce type de workflow. Pourquoi à ton avis est-ce si intéressant pour les administrations publiques et les organismes ouverts ?
- Nous voyons aussi de plus en plus d’agences, de start-ups adopter cette manière de travailler par défaut quand il s'agit de publier des contenus. Quels sont selon toi les projets les plus susceptibles de faire réfléchir à deux fois avant de dégaîner son bon vieux CMS ?
- Mais alors pourquoi les agences n'adoptent-elles pas ce processus de travail ?
- Si ce workflow est naturel pour les développeurs Web, les utilisateurs finaux préfèrent utiliser une interface graphique complète. Ces deux manières de travailler sont-elles compatibles ?
- Quel est ton workflow actuel ? Qu'est-ce qui te plaît tant dedans ?
- Comment vends-tu cette manière de travailler à tes clients ?
- Que souhaites-tu pour cette stack Web moderne à court terme ?
- Bonjour Michael, comment te présenter ?
- Comment en es-tu venu à adopter Jekyll comme outil de publication ?
- Sur quels types de sites travailles-tu ?
- Qu'est-ce qui te plait dans le fait de travailler avec des générateurs de site statique ?
- Quelle est ta fonctionnalité préférée dans Jekyll ?
- Quelle est la fonctionnalité qui te manque le plus ?
- Pourquoi y a-t-il aussi peu de thèmes de qualité pour Jekyll selon toi?
- Pourquoi n'y a-t-il pas plus de designers Web qui travaillent avec des générateurs de site statique ?
- Ton thème hpster a été porté pour Hugo, est-ce que tu as testé ?
- Avantages
- Prise de conscience
- Les fonctionnalités dynamiques
- Le panier d’achat
- En résumé
- Hugo
- Performance
- Les données
- Exemple d’architecture
- Déploiement
- Questions en suspend
- Pour aller plus loin
- Mais d’abord, comment démarrer simplement
- 1. Déploiements atomiques avec publication et retour en arrière immédiats
- 2. Notifications et permaliens
- 3. Branches de déploiement et sous-domaines
- 4. Tests A/B, Tests A/B avec plusieurs variantes ou tests séparés
- 5. Commandes de génération contextuelles
- 6. Gestion des certificats SSL et SSL gratuit avec Let’s Encrypt
- 7. Lancer des tests avec l’intégration continue de Netlify
- 8. Gestion des formulaires
- 9. Redirections, réécritures et proxy
- 10. Contrôle des entêtes personnalisés
- Ça en fait 10, mais ce n'est pas tout
- L'API WordPress
- Ajouter vos articles dans Metalsmith
- Étape suivante
- Le contexte et le point
- Le point de la page
- Les fichiers partiels
- Conclusion
- C'est quoi Scratch ?
- Manipuler des tableaux et des maps
- Attention au périmètre et au contexte…
- .Scratch après Go 1.11
- Flexibilité
- Pariez sur JavaScript
- Eleventy n'est pas un framework JavaScript
- Testez Eleventy !
- 1. Configurer Hugo
- 2. Configurer votre site
- 3. Personnaliser votre site
- 4. Personnaliser votre thème
- 5. Prochaine étape
- Un site de quatre pages avec un entête, une navigation et un pied de page consistants
- Utiliser un seul gabarit pour nos pages
- Rendre la navigation active
- Rédiger du contenu en Markdown
- Développer de vrais composants
- Créer autant de composants que vous voulez
- Un avis rapide sur les sites statiques
- Allez de l’avant et passer au statique
- Making platforms promote performance
- Ajouter une recherche sur un site statique
- Une chouette soirée
- Obtenir vos clefs d’API
- Connecter votre source de données
- Préparer les données pour Algolia
- Envoi des données à Algolia
- Configuration des paramètres
- Connecter le front-end
- Le Projet
- Statut des relations avant Related Content: c'est compliqué
- La fonctionnalité Related Content d’Hugo
- Conclusion
- Jekyll
- Hugo
- En résumé
- Introduction
- Installation de l’API
- Développement du site statique
- Conclusion
- Pourquoi maintenant ?
- L'histoire de la Jamstack
- Le paysage de la Jamstack
- Les bénéfices
- Et ensuite ?
- Conclusion
- Traitement des assets
- Et ensuite ?
- Conclusion
- Configurer les langues
- Traduire nos pages
- Créer des liens vers les traductions 🔗
- Les bundles de page
- Configurer nos URLs
- Localisation des chaînes de caractères
- Mettre les chaînes au pluriel
- Conclusion 🏁
- La configuration est clé
- CircleCI
- TravisCI
- Drone
- GitLab CI
- Jenkins
- Choisir l'outil qui vous convient le mieux
- Configuration de Jekyll
- POSSE avec Micro.blog
- Publication
- TL;DR
- Inclusions : à consommer avec modération
- Faites confiance aux gemmes compilées en C
- Si vous pouvez l'éviter, n'utilisez pas LSI
- Markdown : choisissez la bonne variante
- Faites confiance à la Team pour aller dans la bonne direction
- Qu'en est-il de mon chantier multilingue ?
- Protocole expérimental
- Présentation d'Eleventy
- Avant de commencer
- Installer Eleventy
- La configuration
- Les gabarits de mise en forme
- Les variables
- Les filtres
- Les includes
- Les collections
- Utiliser les données de répertoire pour définir les paramètres par défaut
- Les fichiers statiques
- Considérations finales
- Montez d'un cran
- Les collections à base de tags
- Les collections sur mesure
- Comment ça marche à l'usage ?
- Implémentation
- De WordPress à Hugo
- Tout est page
- Modèles et hiérarchie
- La boucle et les données
- Les shortcodes
- Paramètres
- Formats de sortie
- Traitement des assets
- Thèmes et Plugins VS Composants de Thème
- On en parle de l'interface du CMS ou pas ?
- Autres fonctionnalités notables
- Conclusion
- C'est quoi la Jamstack ?
- Bien démarrer
- À propos
C'est quoi la Jamstack ?
Signification
JavaScript
Les fonctionnalités dynamiques sont gérées par JavaScript. Vous êtes libres d'utiliser la bibliothèque ou le framework que vous voulez.
APIs
Les opérations côté serveur sont abstraites sous forme d'APIs réutilisables, accessibles en HTTPS à l'aide de JavaScript. Ces opérations peuvent être déléguées à des services tiers ou bien à vos propres fonctions.
Markup
Les sites web sont servis sous forme de fichiers HTML statiques. Ces fichiers peuvent être générés à partir de fichiers source, comme du Markdown, à l'aide d'un générateur de site statique.
Bénéfices
Les principaux bénéfices apportés par la Jamstack sont :
Une performance accrue
Servir du code généré et des assets à partir d'un CDN
Une meilleure sécurité
Plus besoin de se soucier des vulnérabilités du serveur ou de la base de données
Un coût bien moindre
L'hébergement de fichiers statiques est moins cher voire gratuit
Une meilleure expérience de développement
Les développeurs front end peuvent se focaliser sur la partie client, sans être dépendants d'une architecture monolithique. Cela se traduit en général par un développement plus rapide et plus ciblé.
Redimensionnement à la volée
Si votre site devient viral ou est soumis à un pic d'activité, le CDN compensera sans problèmes.
Bonnes pratiques
Les astuces suivantes vous aideront à tirer le meilleur parti de la stack.
Réseau de distribution de contenu (CDN)
Puisque tous les fichiers et les assets sont générés en amont, ils peuvent être servis sur un CDN. Cela procure une meilleure performance et un redimensionnement à la volée.
Déploiement atomique
Chaque déploiement est une photographie complète du site. Vous disposez ainsi d'une version consistante du site à l'échelle mondiale.
Invalidation du cache
Une fois votre site généré poussé en ligne, le CDN va invalider son cache. Cela signifie que la nouvelle version est instantanément disponible partout.
Tout est versionné
Votre code vit dans un système de gestion de versions tel que Git. Les principaux avantages sont : l'historique des changements de chaque fichier et de chaque collaborateur ainsi que la traçabilité.
Générations automatiques
Votre serveur est notifié lorsqu'une nouvelle génération est requise, typiquement à l'aide de webhooks. Le serveur génère le projet, met à jour les CDNs et le site est en ligne.
Chaîne de publication
Voici à quoi ressemblerait la chaîne de publication Jamstack idéale.
Historique
2015
Les générateurs statiques sont de plus en plus en vogue, grâce à des générateurs populaires comme Jekyll.
2016
Quelques développeurs pensent que les sites statiques n'ont pas à être forcément statiques, le terme "Jamstack" fait son apparition.
2017
La révolution du web moderne commence à prioriser la performance, le redimensionnement à la volée et l'expérience de développement. Le terme Jamstack est adopté par un groupe de développeurs plus important et les premières entreprises commencent à annoncer des projets basés sur la Jamstack.
2018
Des outils comme Netlify, Gatsby et Contentful contribuent à promouvoir le terme et la communauté grandit vite. C'est aussi l'année de la première conférence Jamstack.
Bien démarrer
C'est à vous de décider comment générer vos fichiers HTML. Les trois approches les plus communes sont :
Développement
À la main
Une méthode simple et efficace d'écrire du HTML, c'est idéal pour les pages super simples.
Générateurs de site statique
La plupart des sites Jamstack sont propulsés par un générateur de site statique.
Vous êtes libres de choisir votre GSS.
Framework frontend
La plupart des frameworks ne génèrent pas de fichiers HTML statiques par défaut, toutefois c'est possible si vous connaissez bien vos outils, cela demande plus d'expérience et de maintenance.
Déploiement
Vous devez héberger le résultat de la compilation de votre site. Il existe de fantastiques services qui font cela gratuitement et simplement.
Voir plus de services de déploiement
Parties dynamiques
Les sites Jamstack n'ont pas à être entièrement statiques. Il existe des services formidables pour vous aider à insérer des parties dynamiques dans votre projet.
Fonctions personnalisées
Vous pouvez également abstraire vos propres fonctions pour en faire des APIs réutilisables. Pour cela vous pouvez utiliser les fonctions AWS lambda ou les fonctions Netlify
Commentaires
Beaucoup de sites Jamstack intègrent des sections pour les commentaires, principalement sur des blogs.
Formulaires
Un excellent moyen d'interagir avec votre audience.
E-Commerce
Mettre en place une boutique en ligne sur un site Jamstack n'a jamais été aussi simple.
Recherche
Reposez-vous sur des services tiers pour intégrer des fonctionnalités de recherche.
Voir plus de services pour les sites statiques
CMS
Les sites Jamstack peuvent aussi être gérés via un système de gestion de contenu, plus précisément avec des CMS headless. Chaque changement effectué dans le CMS va entraîner une nouvelle génération du site, qui sera ensuite déployé sous forme de fichiers statiques.
Voir plus de services de gestion de contenu
Ressources
Voici une sélection de ressources sur la Jamstack qui comporte des matériaux d'apprentissage ainsi que des listes de services.
Services
- Une liste de services pour les sites web statiques
- Une liste de gestionnaires de contenu pour les sites Jamstack
- Une liste de générateurs de site statiques pour les sites Jamstack
- Un annuaire de sélection d'outils et de services
Articles
- Débuter avec la Jamstack? Tout ce que vous devez savoir pour bien démarrer
- Quel est le concept derrière la Jamstack
- Développement web moderne avec la Jamstack
- Smashing Magazine va dix fois plus vite
- Ghost avec la Jamstack
- Jamstack avec Gatsby, Netlify et Netlify CMS
Vidéos
- L'essor de la Jamstack, présentation de Mathias Biilmann
- La nouvelle stack Front-end, présentation de Mathias Biilmann
- Une sélection de vidéos par The New Dynamic
- Comment freeCodeCamp sert des millions d'apprenants en utilisant la Jamstack
Podcast
À propos
Cette page a été mise en place par @peduarte et présentée au meetup Jamstack de Londres — (voir les slides).