DEV Community

Cover image for Un blog statique sur mesure avec Notion headless
Paul Fleury
Paul Fleury

Posted on

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay