Visite en images
La page d’accueil permet de sélectionner rapidement les thèmes selon plusieurs critères: le framework CSS utilisé, les CMS disponibles, la date de mise à jour ou encore la popularité du thème:
Chaque thème dispose d’une page dédiée comme celle-ci :
Une capture d’écran sur la gauche permet de se faire rapidement une idée, et les informations principales sont disponibles sur la droite.
Les catégories auxquelles appartient le thème permettent de naviguer vers les projets similaires.
Ensuite, un aperçu du thème est disponible, toujours sans quitter la page:
Pour finir, une invitation à s’inscrire à la newsletter et quelques liens vers les autres sections du site.
Plusieurs manières d’éditer le site
Plusieurs interfaces sont disponibles :
Édition simple
Une prévisualisation est disponible :
Édition avancée
Il est également possible d’accéder à deux interfaces d’édition plus puissantes, pour des modifications avancées:
Édition avancées avec Gitlab IDE
L’éditeur GitPod
Grâce à la souplesse de la Jamstack, ces outils d’édition sont toujours plus nombreux et modulables.
Mentions honorables
Le verdict de Google
Malgré le grand nombre de données offertes par cette page d’accueil (plus de 10.000 éléments!), Google décerne une excellente note au site, nous assurant une bonne place dans ses résultats de recherche.
Revue technique
Quelques ingrédients qui ont permis de mener la mission à son terme:
Hugo Hugo a la réputation d’être le plus rapide des générateurs de sites statiques et ce projet a été l’occasion de le vérifier une nouvelle fois: dans le cas de Jamstack.club, plus de 5000 fichiers sont générées lors d’un build complet, et Hugo s’acquitte de la tâche en seulement 11 secondes !
Github API Github héberge une grande majorité des thèmes Jamstack et fourni une bonne API.
Grâce à Hugo et Javascript, nous récupérons automatiquement certaines informations sur ces thèmes: la date d’actualisation, le nombre de Github Stars et de Forks, ce qui permet ensuite de proposer un classement par popularité ou par date de mise à jour.
Au passage, une capture d’écran de chaque thème est réalisée automatiquement et celle-ci est ajoutée à la page de présentation.
Git Git permet un contrôle très précis des évolutions du site et de son contenu. Si la prise en main demande un petit peu de temps, l’outil est très bien documenté. Il s’agit d’un logiciel libre et puissant utilisé par des millions de personnes.
Chaque validation dans Git génère un point de sauvegarde fiable et inaltérable, il est donc possible de revenir en arrière à tout instant.
Git permet également de visualiser précisement chaque modification, assurant ainsi un suivi et une traçabilité de chacun des changements (voir l’exemple ci-dessous).
Git permet un suivi à la virgule près
Netlify offre une excellente CI, intégrant notamment un rapport LightHouse automatique à chaque mise à jour du site:
De plus, un rapport détaillé (260 lignes!) est proposé sur la même page.
En voici un extrait:
19:47:36 LH:status Auditing: JavaScript execution time
19:47:36 LH:status Auditing: Preconnect to required origins
19:47:36 LH:status Auditing: Diagnostics
19:47:36 LH:status Auditing: Network Requests
19:47:36 LH:status Auditing: Server Backend Latencies
19:47:36 LH:status Auditing: Metrics
19:47:36 LH:status Auditing: Minimize third-party usage
19:47:36 LH:status Auditing: Lazy load third-party resources with facades
19:47:36 LH:status Auditing: Largest Contentful Paint element
19:47:36 LH:status Auditing: Image elements have explicit `width` and `height`
PM: Creating deploy upload records
19:47:36 LH:status Auditing: Page has valid source maps
Ce rapport de LightHouse peut être rendu public pour un contrôle rapide. Il est mis à jour automatiquement à chaque modification du site.
Il est même possible de bloquer tout changement du site qui pénaliserait trop fortement ces résultats (et donc le classement du site par Google).
Monitoring en temps réélLa disponibilité du site est automatiquement vérifié toutes les 5 minutes, et un mail est immédiatement reçu en cas de problème, permettant une intervention rapide.
En résumé
Jamstack.club est basé sur une stack très agréable et robuste: un choix précautionneux des outils utilisés permet de mettre un site en ligne sans s’ajouter de charge de travail:
Pas de maintenance obligatoire, ni de mise à jour urgente au coeur de l’été.
En cas de problème, la communauté autour de ces outils est vivace et une question ne reste pas longtemps sans réponse.
Bonus : un prix imbattable
Voici la facture après plus d’un an de fonctionnement:
- frais d’hébergement: 0€
- frais de maintenance: 0€
- coût total de l’outillage: 0€
- nom de domaine: 11 € / an
TOTAL: 91 cts / mois
Limitations
- l’édition du site n’est pas aussi aisée qu’avec un bon vieux Wordpress et la prise en main demande un temps d’apprentissage.
- l’écosystème autour de la Jamstack est toujours en phase de consolidation. Si certains acteurs ont trouvé un modèle économique viable, un CMS stable et peu coûteux manque toujours à l’heure actuelle
Malgré tout cela, les avantages sont bien rééls et cette stack est de loin supérieure à ce que nous avons pu expérimenter avec Wordpress.