Passer au contenu principal

​
Créer un blog propulsé par Notion avec Replit Agent

Notion est un outil puissant pour organiser l’information, et il excelle en tant que système de gestion de contenu (CMS). En intégrant Notion à Replit, vous pouvez gérer le contenu de votre site web — comme des articles de blog, des éléments de portfolio ou des listes de produits — directement depuis votre espace de travail Notion. Replit, propulsé par Replit Agent, gère le codage, l’hébergement et le déploiement, vous permettant de passer de l’idée à une application publiée rapidement. Un prompting efficace est essentiel pour guider Agent ; pour un guide complet, consultez Prompting efficace avec Replit AI et Comment vibe coder efficacement. Ce tutoriel vous guide dans la création d’un blog minimaliste qui récupère ses articles depuis un tableau Notion. Vous allez :
  • Utiliser Replit Agent pour générer l’application initiale
  • Connecter votre application Replit à une base de données Notion
  • Apprendre à guider l’IA et résoudre les problèmes courants grâce à des techniques de prompting efficaces
  • Publier votre blog pour le monde entier
Capture d'écran de l'application de blog propulsée par Notion avec un design minimaliste
Ce tutoriel suit largement la vidéo ci-dessus, avec quelques informations et étapes supplémentaires pour vous aider à comprendre le processus.

​
Prérequis

Pour suivre ce tutoriel, vous aurez besoin :
  • D’un compte Replit
  • D’un compte Notion
  • D’une familiarité avec les interactions de base avec Replit Agent. Si vous êtes nouveau avec Agent, consultez la documentation Replit Agent.

​
Étape 1 : Préparer votre base de données Notion

Avant de soumettre un prompt à Agent, configurez votre source de contenu dans Notion. Cela implique de réfléchir de manière procédurale à ce dont votre blog a besoin, comme lors de la planification d’un produit.
1

Créer une intégration Notion

  1. Dans Notion, accédez à Paramètres et membres (généralement dans la barre latérale en haut à gauche).
  2. Naviguez vers Connexions (anciennement « Intégrations »).
  3. Sélectionnez Développer ou gérer des intégrations.
  4. Sélectionnez + Nouvelle intégration.
Portail développeur Notion affichant le bouton Nouvelle intégration
  1. Nommez votre intégration (par ex., « Mon intégration blog Replit »).
  2. Associez-la à l’espace de travail souhaité.
Écran de configuration de l'intégration Notion avec sélection du nom et de l'espace de travail
  1. Pour « Type d’intégration », choisissez Intégration interne.
  2. Sélectionnez Soumettre.
  3. Copiez votre Secret d’intégration interne (token) et conservez-le en lieu sûr. C’est votre clé API Notion.
Page des secrets d'intégration Notion affichant le token d'intégration
  1. Sous Capacités, assurez-vous que « Lire le contenu » est activé. Pour ce tutoriel, la lecture est suffisante. Si vous souhaitez plus tard écrire des données dans Notion, activez « Insérer du contenu » et « Mettre à jour le contenu ».
Créez une nouvelle intégration pour chaque projet afin de gérer les autorisations de manière granulaire. C’est une bonne pratique de sécurité.
Pour des instructions plus détaillées, consultez la documentation officielle de Notion sur la création d’une intégration.Vous pouvez accéder directement au tableau de bord des intégrations Notion sur notion.so/my-integrations.
2

Créer une page Notion avec une base de données

  1. Créez une nouvelle page dans Notion pour le contenu de votre blog.
  2. Sur cette page, ajoutez une nouvelle base de données Tableau.
  3. Nommez votre tableau (par ex., « Articles de blog »).
  4. Définissez les colonnes de vos articles. Spécifiez-les clairement dans votre esprit, car vous en informerez bientôt Agent :
    • Title (Texte, propriété de titre par défaut)
    • Body (Texte, pour le contenu principal de l’article)
    • Slug (Texte, pour les identifiants adaptés aux URL)
    • PublishedDate (Date, ou utilisez « Date de création » / « Dernière modification »)
    • ReadingTime (Texte ou Nombre, par ex., « 5 min de lecture »)
    • Description (Texte, courte description pour les aperçus)
Base de données Notion configurée avec des colonnes pour les articles de blog
  1. Ajoutez quelques exemples d’articles. Vous pouvez utiliser les fonctionnalités d’IA de Notion pour générer du contenu !
3

Connecter votre intégration à la page

  1. Ouvrez la page Notion contenant votre base de données.
  2. Cliquez sur le menu ••• (trois points) dans le coin supérieur droit.
Menu des connexions Notion montrant comment ajouter votre intégration à la page
  1. Sélectionnez + Ajouter des connexions.
  2. Recherchez et sélectionnez l’intégration que vous avez créée (par ex., « Mon intégration blog Replit »).
Page Notion affichant le menu à trois points pour ajouter des intégrations
  1. Confirmez la connexion. Cela permet à Replit (via le token d’intégration) d’accéder à cette page et à sa base de données.

​
Étape 2 : Soumettre un prompt à Replit Agent

Avec Notion configuré, demandons à Replit Agent de construire les bases de notre blog. Planifiez avant de formuler un prompt : un aperçu clair des fonctionnalités mène à des prompts plus ciblés.
1

Ouvrir Replit Agent

Naviguez vers la page d’accueil de Replit et ouvrez Agent.
2

Rédiger votre prompt

Fournissez à Agent un prompt détaillé. Simplifiez votre langage, mais soyez précis concernant les exigences, les contraintes et les résultats souhaités. Voici un exemple :
Help me create a hyper-minimalistic blog using Notion as a CMS.
The blog should pull posts from a Notion page.
The table on the Notion page has the following columns: Title, Body, Slug, PublishedDate, ReadingTime, Description.
You should generate a slug for each post based on its title if the Slug column is empty.
Make the blog theme black with white text. Keep it extremely minimal.
The posts should be listed on the homepage, and clicking a post should navigate to a page displaying the full post content.
Pour plus de conseils sur la rédaction de prompts efficaces, consultez notre guide sur le Prompting efficace avec Replit AI. Vous pouvez également montrer à Agent ce que vous entendez en fournissant une URL à scraper pour des idées de style ou de contenu initiales (par ex., votre portfolio personnel) en ajoutant : Scrape the content of [URL] for initial design inspiration and placeholder text.
Agent va générer un plan. Vérifiez qu’il correspond à vos attentes, puis approuvez-le. C’est votre premier point de contrôle dans le processus de création assistée par IA.
3

Examiner l'aperçu initial

Agent va ensuite générer un aperçu visuel. Vérifiez si la mise en page de base et le style vont dans la bonne direction. Les améliorations viendront plus tard.

​
Étape 3 : Connecter Replit à Notion avec les Secrets

Agent aura probablement besoin de vos informations d’intégration Notion pour récupérer les données.
1

Ajouter des Secrets dans Replit

En général, vous aurez besoin de :
  1. NOTION_API_KEY : Votre secret d’intégration interne de l’étape 1.
  2. NOTION_DATABASE_ID : L’identifiant de votre base de données Notion.
Comment trouver votre identifiant de base de données Notion :
  • Ouvrez votre page Notion avec la base de données dans un navigateur.
  • L’URL peut être https://www.notion.so/your-workspace/PAGE_TITLE-PAGE_ID?v=DATABASE_VIEW_ID. Le PAGE_ID est souvent l’identifiant de la base de données si la base de données est l’élément principal de la page.
  • Plus fiable : Cliquez sur le menu ••• de votre vue de base de données, sélectionnez Copier le lien vers la vue, et collez-le. Le lien https://www.notion.so/your-workspace/DATABASE_ID?v=VIEW_ID contient le DATABASE_ID avant ?v=.
Accédez à l’outil Secrets (icône 🔒) dans votre Workspace Replit. Ajoutez-y :
  • Clé : NOTION_API_KEY, Valeur : [Votre_Secret_d_Intégration_Notion]
  • Clé : NOTION_DATABASE_ID, Valeur : [Votre_ID_de_Base_de_Données_Notion]
Outil Secrets de Replit avec la clé API Notion et l'ID de base de données ajoutés
Agent devrait automatiquement utiliser ces secrets et tenter de se connecter. L’application va probablement redémarrer.

​
Étape 4 : Débogage et amélioration avec Agent

Construire avec l’IA est un processus itératif. Des erreurs ou des imperfections sont à prévoir. C’est là que guider efficacement l’IA — souvent appelé « vibe coding » — est essentiel. Pour approfondir cette compétence, consultez notre tutoriel sur Comment vibe coder efficacement. Maîtrisez le contexte en fournissant uniquement les informations pertinentes pour chaque étape de débogage.
Gardez la Console de votre Workspace Replit ouverte. Elle fournit des messages d’erreur et des journaux précieux.
Console Replit affichant des messages d'erreur lors du débogage de l'intégration Notion
Voici les scénarios courants et comment les résoudre en déboguant méthodiquement :

​
Scénario 1 : « Échec du chargement des articles » ou erreurs de propriété

​
Symptôme

L’application fonctionne mais n’affiche pas les articles. Les erreurs dans la console peuvent mentionner « Could not find sort property with name ID created_time » ou d’autres incohérences de colonnes.

​
Cause

Agent peut supposer des noms de colonnes ou de propriétés (par ex., created_time pour le tri) qui n’existent pas ou sont nommés différemment dans votre base de données Notion.

​
Dépannage

  1. Vérifiez la base de données Notion : Assurez-vous que les noms de colonnes dans votre base de données correspondent exactement aux attentes d’Agent ou à votre prompt. Si Agent cherche created_time et que vous avez PublishedDate, c’est une inadéquation.
  2. Soumettez l’erreur à Agent (principe de débogage) : Copiez l’erreur exacte de la console et sélectionnez les extraits de code pertinents si vous les avez identifiés. Fournissez ce contexte ciblé à Agent : 
    There's an error fetching posts. Console: "Could not find sort property with name ID created_time".
My Notion database uses 'PublishedDate'. Please use this for sorting/fetching. Here's the suspected code from `services/notion.js`: [code snippet]
  3. Itérez (principe d’expérimentation) : Si la correction d’Agent échoue, fournissez plus de détails. « Les articles ne se chargent toujours pas. L’erreur persiste. Montrez-moi le code pour récupérer/trier les articles Notion. » Si vous avez ajouté une colonne comme created_time dans Notion comme solution rapide, vous pouvez ensuite demander à Agent : « Supprimez la dépendance à ‘created_time’, utilisez ‘PublishedDate’ à la place. » N’oubliez pas d’utiliser les Points de contrôle d’Agent pour sauvegarder les états fonctionnels.

​
Scénario 2 : Affichage ou formatage incorrect des données

​
Symptôme

Les données apparaissent, mais de manière incorrecte (par ex., le temps de lecture est incorrect sur la page d’accueil mais correct sur la page d’article ; problèmes de rendu Markdown).

​
Dépannage

  1. Soyez précis (principe de spécification) : Décrivez le problème et son emplacement clairement : 
    On the homepage, post reading time is incorrect, but it's correct on individual post pages.
Also, display 'PublishedDate' on the homepage for each post summary.
  2. Problèmes Markdown (principe de démonstration) : Si le Markdown du champ « Body » de Notion s’affiche incorrectement (par ex., espaces supplémentaires, erreurs de formatage) :
    • Inspectez le contenu brut dans Notion ; son formatage peut introduire des caractères subtils.
    • Soumettez un prompt clair à Agent. Vous pouvez même montrer un exemple : 
      Markdown rendering issue: In post X, bold text like '**this**' appears as ' ** this **' and fails to render. Ensure Markdown parsing handles such cases or trims whitespace. Example of correct rendering for bold: **This is bold**.
    • Tester avec du Markdown connu et correct (par ex., copié depuis ChatGPT dans Notion) peut isoler si le problème vient des données sources ou de la logique de rendu.

​
Flux de débogage général

  1. Observez : Notez l’erreur ou le comportement incorrect.
  2. Prompt de haut niveau (Simplifiez) : Décrivez le problème à Agent clairement.
  3. Vérifiez la Console/DevTools (Débogage) : Recherchez des erreurs détaillées.
  4. Itérez et fournissez du contexte (Sélectionnez, Montrez) : Si la correction d’Agent échoue, fournissez plus de contexte (message d’erreur, code pertinent, votre objectif, tentatives effectuées).
  5. Changements incrémentiels (Point de contrôle) : Demandez à Agent de corriger une chose à la fois. Utilisez les Points de contrôle dans Agent pour sauvegarder la progression.
  6. Retour en arrière : Si les prompts aggravent les choses, revenez à un Point de contrôle fonctionnel et essayez une nouvelle approche.
N’hésitez pas à examiner le code généré par Agent. Même sans expertise dans le langage, vous pouvez souvent repérer des problèmes logiques ou comprendre le flux de données, ce qui vous aide à rédiger de meilleurs prompts. Des fichiers comme notionService.js gèrent généralement les appels à l’API Notion.

​
Étape 5 : Améliorations supplémentaires

Une fois que les fonctionnalités principales fonctionnent, demandez à Agent d’ajouter des fonctionnalités. Utilisez un langage positif et direct (principe d’instruction). Voici quelques idées :
Demandez à Agent : « Implémentez la mise en cache et le préchargement des articles depuis Notion pour un site ultra-rapide. » Cela réduit les appels à l’API Notion et accélère le chargement des pages.
Demandez à Agent : « Ajoutez un effet de survol sur les liens des articles de blog de la page d’accueil. » ou « Améliorez la typographie des articles pour une meilleure lisibilité. » De petits ajustements visuels améliorent considérablement l’expérience utilisateur. Vous pouvez montrer à Agent des exemples de styles que vous aimez.
Réfléchissez à la fréquence à laquelle récupérer de nouvelles données depuis Notion. Pour les blogs simples, au chargement de la page ou au redémarrage du serveur peut être suffisant. Pour du contenu dynamique, demandez à Agent : « Explorez les options pour rafraîchir automatiquement les articles Notion toutes les heures. » Cela peut impliquer un sondage en arrière-plan (ajoute de la complexité mais maintient le contenu à jour).

​
Étape 6 : Publier votre site web

Satisfait de votre site ? Il est temps de le partager !
  1. Sélectionnez Publier dans le Workspace Replit (en haut à droite).
  2. Vérifiez les paramètres de publication (nom du projet, niveau). Pour plus de détails, consultez À propos des déploiements.
  3. Sélectionnez Publier.
Interface de publication Replit montrant comment publier votre site web propulsé par Notion
Replit compile, empaquette et publie votre application sur une URL publique.

​
Ce que vous avez appris

En suivant ce tutoriel, vous avez appris à :
  • Configurer Notion comme CMS avec une intégration et une base de données structurée
  • Soumettre des prompts à Replit Agent pour créer une application web connectée à Notion, en appliquant des principes tels que la planification, la spécification et la simplification
  • Gérer les clés API de manière sécurisée avec les Secrets Replit
  • Déboguer et améliorer de manière itérative une application générée par IA en utilisant des techniques telles que la fourniture de contexte, la démonstration d’exemples et l’utilisation de points de contrôle
  • Publier votre site web propulsé par Notion sur Replit
Pour des informations détaillées sur les points de contrôle et les retours en arrière, consultez Points de contrôle et retours en arrière. Construire avec l’IA comme Replit Agent est collaboratif. La pensée procédurale, les instructions claires et le débogage méthodique sont essentiels pour transformer les idées en réalité, rapidement.

​
Prochaines étapes

Continuez à développer votre site web propulsé par Notion :
Essayez d’ajouter du contenu varié depuis Notion : galeries d’images, vidéos intégrées ou éléments catégorisés.
Explorez les formules, les cumuls et les relations de Notion pour des structures de données complexes. Travaillez avec Agent pour afficher ces données enrichies sur votre site Replit.
Améliorez votre application en fusionnant les données Notion avec d’autres outils Replit AI ou des intégrations Agent. Par exemple, utilisez Replit Auth pour du contenu privé ou OpenAI pour des résumés générés par IA à partir de données Notion dans votre application.
Bonne création ! Nous avons hâte de voir ce que vous allez créer.