Astro + n8n: Génération d'articles IA avec OpenAI

Astro + n8n: Génération d’articles IA avec OpenAI

Bienvenue, développeurs ! Jules ici. Aujourd’hui, on va combiner trois outils incroyables : Astro, n8n et OpenAI pour automatiser la création d’articles de blog. L’objectif ? Un site statique Astro avec du contenu frais généré par l’IA, sans avoir à écrire chaque mot à la main.

Prérequis

Un site Astro fonctionnel (vous pouvez utiliser le template de base).
Un compte n8n Cloud ou une instance n8n auto-hébergée.
Une clé API OpenAI (payante, mais souvent avec un crédit gratuit au début).

Étape 1: Configurer n8n

Créer un workflow : Dans n8n, créez un nouveau workflow vide.
Trigger : Ajoutez un nœud “Cron” pour déclencher le workflow à intervalles réguliers (par exemple, une fois par jour). Configurez le Cron Expression pour qu’il corresponde à vos besoins. 0 0 * * * pour tous les jours à minuit.
Function : Ajoutez un nœud “Function” pour définir un prompt de base pour OpenAI. Ce prompt guidera l’IA dans la génération de l’article. Par exemple :

javascript // JavaScript const topic = ‘Un guide pratique pour intégrer Tailwind CSS dans un projet Astro’; const prompt = Écris un article de blog détaillé sur le sujet suivant : ${topic}. L'article doit être structuré avec une introduction, des sections claires avec des titres h2, et une conclusion. Inclus des exemples de code concis et pertinents. Utilise un ton professionnel et enthousiaste, adapté à des développeurs web.

return [{json: {prompt: prompt, topic: topic}}];

OpenAI : Ajoutez un nœud “OpenAI” (il faudra peut-être l’installer depuis la marketplace n8n). Configurez-le avec votre clé API OpenAI et sélectionnez le modèle gpt-3.5-turbo ou gpt-4 (ce dernier est plus performant mais plus coûteux). Dans le champ “Prompt”, utilisez l’expression {{$node["Function"].json["prompt"]}} pour récupérer le prompt du nœud précédent. Ajustez les paramètres de génération (température, max_tokens) selon vos préférences. Une température plus élevée rendra le texte plus créatif, mais potentiellement moins cohérent.
Function (Markdown Formatting) : Ajoutez un autre nœud “Function” pour formater la réponse d’OpenAI au format Markdown, prêt à être utilisé dans Astro. Ce nœud nettoie potentiellement les erreurs de formatage, ajoute un titre (H1) à l’article et ajoute des métadonnées (tags, description). Vous pouvez aussi rajouter une image, ou générer un prompt pour une image DALL-E 3.

javascript // JavaScript const articleContent = $input.first().json.choices[0].message.content; const title = $input.first().json.topic; const slug = title.toLowerCase().replace(/ /g, ’-’); const description = articleContent.substring(0, 160) + ’…’; //Tronquer la description

const markdown = # ${title}\n\n${description}\n\n${articleContent}; // Création d’un exemple de Markdown

return [{json: {title: title, slug: slug, description: description, markdown: articleContent}}];

Write to File: Ajoutez un nœud “Write Binary File”. Configurez-le pour écrire le contenu Markdown dans un fichier .md dans votre répertoire src/pages/ du site Astro. Nommez le fichier en utilisant le slug généré précédemment, par exemple, src/pages/{{$node["Function (Markdown Formatting)"].json["slug"]}}.md.

Étape 2: Intégrer les articles dans Astro

Assurez-vous que votre site Astro est configuré pour lire les fichiers Markdown dans le répertoire src/pages/. Vous pouvez utiliser la syntaxe Astro standard pour afficher les articles sur votre page d’accueil ou sur une page d’archive.

Étape 3: Lancer le workflow

Activez votre workflow n8n. Il se déclenchera automatiquement selon la planification que vous avez définie (nœud Cron).

Optimisations

Améliorer les prompts : Expérimentez avec différents prompts pour obtenir des résultats plus précis et pertinents. Utilisez des mots-clés spécifiques et fournissez des instructions claires à l’IA.
Catégorisation et tags : Ajoutez de la logique à votre workflow n8n pour catégoriser automatiquement les articles et générer des tags pertinents.
Utiliser un CMS Headless : Pour une gestion de contenu plus avancée, vous pouvez intégrer n8n avec un CMS headless comme Strapi ou Contentful.
Générer une image DALL-E 3 avec le prompt généré dans le script JS

Conclusion

Ce tutoriel vous a montré comment automatiser la création de contenu pour votre site Astro avec n8n et OpenAI. En combinant ces outils puissants, vous pouvez créer un blog dynamique et toujours à jour, sans avoir à passer des heures à écrire des articles à la main. À vous de jouer !

N’hésitez pas à me poser vos questions dans les commentaires ci-dessous. Et rappelez-vous, le futur du développement, c’est le Vibe Coding !