Résumé

Responsive

Visite en images

La page d’accueil

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:

Page d’accueil de Jamstack.club

Voir en ligne

Page de présentation en détails d’un 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:

Un live preview du thème

Pour finir, une invitation à s’inscrire à la newsletter et quelques liens vers les autres sections du site.

Le footer de Jamstack.club

Plusieurs manières d’éditer le site

Plusieurs interfaces sont disponibles :

Édition simple

Édition des fichiers Markdown avec Gitlab

Une prévisualisation est disponible :

Gitlab preview

Édition avancée

Il est également possible d’accéder à deux interfaces d’édition plus puissantes, pour des modifications avancées:

Édition des fichiers Markdown avec Gitlab IDE Édition avancées avec Gitlab IDE

Édition des fichiers Markdown avec Gitpod 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).

Un exemple de modification visualisée avec Git Git permet un suivi à la virgule près

Netlify CI

Netlify offre une excellente CI, intégrant notamment un rapport LightHouse automatique à chaque mise à jour du site:

LightHouse Plugin de chez Netlify

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éél

La 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

  • la prise en main demande un temps d’apprentissage. Nous vous préparons donc une formation sur le sujet, demandez le programme !
  • l’édition du site n’est pas aussi aisée qu’avec un bon vieux Wordpress
  • 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.

#TODO:CTA