dev-resources.site
for different kinds of informations.
Un blog statique sur mesure avec Notion headless
Quand je surfe internet, jâai la manie dâaller voir sous le capot des sites web que je visite. La plupart du temps la motorisation est assurĂ©e par WordPress ou Webflow. Et la surprise, je dĂ©couvre Super, un outil nocode qui permet de transformer des pages Notion en site web.
Jâai trouvĂ© lâidĂ©e trĂšs intĂ©ressante. Le principe que Notion, mon espace personnel, devienne le back office de mon site web ou de mon blog câest vraiment cool.
AprĂšs je ne vous cache pas que je me sens Ă lâĂ©troit avec Super. Le nocode ce nâest pas ma came et en plus jâai pas envie de claquer 150 balles par an.
Jâai dĂ©cidĂ© de reprendre le concept de Super mais en version jamstack : utiliser Notion en headless pour gĂ©nĂ©rer un site statique avec Eleventy et de dĂ©ployer tout ça avec Vercel.
Voici les Ă©tapes du projet en version courte :
- Installation de Notion et configuration des tables nécessaires (posts, pages, settings)
- Design et développement du blog avec Eleventy
- Intégration de l'API Notion via Node.js et le client Notion
- Implémentation de l'optimisation d'images avec Sharp et conversion en WebP
- Déploiement automatisé sur Vercel via Git
Pour complĂ©ter le tout, jâai ajoutĂ© un bouton pour lancer un dĂ©ploiement Ă partir de Notion.
En résumé : Notion + Eleventy + Github + Vercel = un blog gratuit, sur mesure et trÚs performant.
Le résultat est ici : https://paulfleury.vercel.app/
Ce test mâa confirmĂ© le gros potentiel de Notion comme solution headless et particuliĂšrement avec les espaces de travail.
Featured ones: