Logo

dev-resources.site

for different kinds of informations.

Un blog statique sur mesure avec Notion headless

Published at
12/15/2024
Categories
notion
jamstack
11ty
vercel
Author
paulfleury
Categories
4 categories in total
notion
open
jamstack
open
11ty
open
vercel
open
Author
10 person written this
paulfleury
open
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.

jamstack Article's
30 articles in total
Favicon
Building a JAMStack App with Eleventy.js, CloudFlare Workers and AthenaHealth APIs - Part 2
Favicon
Building a JAMStack App with Eleventy.js, CloudFlare Workers and AthenaHealth APIs - Part 1
Favicon
JAMstack Architecture: The Future of Fast, Scalable, and Secure Web Development
Favicon
Un blog statique sur mesure avec Notion headless
Favicon
Efficient State Management in Next.js: Best Practices for Scalable Applications
Favicon
Jamstack Architecture: The Future of Fast, Secure Websites
Favicon
The Evolution of Frontend Development: Exploring Different Architectures
Favicon
Next.JS CMS — Top choices in 2024
Favicon
Engineer Explains: What is Jamstack by its creator Matt Biilman
Favicon
Microservices Architecture – A Comprehensive Guide for Modern Web Development
Favicon
Vercel vs Netlify: How to Pick the Right One
Favicon
Hello India.
Favicon
**¡JAMstack: Construyendo Sitios Web como un Mandaloriano!**🤖
Favicon
Using Astro Image Optimization Benefits with Tina CMS Cloud in Production build
Favicon
Save Time Building Jamstack / Headless CMS Backed Websites
Favicon
Using 11ty and DecapCMS for 'non-blog' static websites -pt 2 Pages
Favicon
Using 11ty and DecapCMS for 'non-blog' static websites -pt 1 Menus
Favicon
Navigating the Buzzwords of Frontend Development
Favicon
JAMSTACK
Favicon
How to Start a Free WordPress Blog with Custom Domain
Favicon
What is JAMstack?
Favicon
The future of Jamstack is anti-capitalist
Favicon
Fetch & Build your Navigation
Favicon
API Configuration & Data Fetching
Favicon
Introduction to Astro + WordPress
Favicon
What is Jamstack in 2024?
Favicon
Exploring the JAMstack: Revolutionizing Web Development
Favicon
FREE CONFERENCE WITH JAM.DEV
Favicon
TheJam.dev 2024 - A Free, 2-day Virtual WebDev Conference
Favicon
Benefits of using headless commerce

Featured ones: