Comment créer un site web avec Lovable AI et le mettre en ligne ?

Créer un site web professionnel nécessite généralement des connaissances en développement, du temps et plusieurs outils pour concevoir les pages, intégrer les fonctionnalités et assurer la mise en ligne. Avec Lovable AI, il est désormais possible de simplifier une grande partie de ce processus grâce à l’intelligence artificielle.✨ Cette plateforme permet de créer un site web à partir d’une simple description textuelle, sans devoir écrire manuellement chaque ligne de code. Vous pouvez ensuite personnaliser les pages, ajouter des fonctionnalités et publier votre projet sur Internet.👨‍💻

Pour créer un site web avec Lovable AI, rendez-vous sur lovable.dev, créez un compte gratuit, puis décrivez le site souhaité dans un prompt. Après avoir généré et personnalisé les pages, cliquez sur le bouton « Publish » pour obtenir une adresse publique en .lovable.app, sans abonnement payant. Si vous souhaitez utiliser votre propre nom de domaine, vous devrez souscrire une formule payante et configurer les enregistrements DNS demandés par Lovable auprès de votre fournisseur de domaine.

Dans ce tutoriel, nous allons découvrir comment créer un site web avec Lovable AI, le personnaliser et le mettre en ligne gratuitement. Nous verrons également comment sauvegarder son code sur GitHub et, si vous souhaitez disposer d’une adresse professionnelle, connecter un nom de domaine personnalisé avec une formule payante.💰 Si vous souhaitez explorer une autre méthode de développement assisté par l’IA, découvrez comment créer un site web avec Claude Code et l’héberger sur LWS.

Quel est l’objectif de ce tutoriel ?

L’objectif de ce tutoriel est de vous accompagner dans la création et la publication d’un site web avec Lovable AI, depuis la configuration initiale jusqu’à sa mise en ligne.⚡ Nous commencerons par découvrir les fonctionnalités de Lovable, ses différentes formules et les éléments nécessaires pour créer un premier projet. Vous apprendrez ensuite à rédiger un prompt efficace, à personnaliser votre site et à intégrer des fonctionnalités comme un formulaire de contact.📲 Nous verrons également comment publier gratuitement votre site sur une adresse en .lovable.app et synchroniser son code avec GitHub pour en conserver une copie. Enfin, nous expliquerons comment utiliser votre propre nom de domaine, configurer les enregistrements DNS et vérifier le bon fonctionnement de votre site.

Les outils indispensables pour créer un site sur Lovable

Avant de commencer la création de votre site web avec Lovable AI, préparez les éléments suivants :

Les étapes liées au nom de domaine personnalisé seront traitées séparément, car elles nécessitent une formule payante.

Comment suivre ce tutoriel : niveau gratuit et niveau payant

Pour créer et mettre en ligne un site avec Lovable AI, vous pouvez commencer gratuitement. La plateforme propose plusieurs formules, mais un abonnement payant n’est pas indispensable pour réaliser votre premier projet.

Ce tutoriel est organisé en deux niveaux :

• Niveau 1 – Gratuit (Free) : vous apprendrez à créer votre compte, générer un site avec un prompt, personnaliser ses pages, ajouter des fonctionnalités, le publier sur une adresse .lovable.app et sauvegarder son code avec GitHub.
• Niveau 2 – Payant (Pro ou supérieur) : vous découvrirez comment connecter votre propre nom de domaine, retirer le badge Lovable et télécharger directement les fichiers du projet.

Le plan gratuit comprend 5 crédits de création par jour, dans la limite de 30 crédits par mois. Cette quantité permet d’expérimenter la plateforme, mais impose de bien préparer ses demandes.

Qu’est-ce que Lovable et que peut-on y créer ?

Lovable AI est une plateforme de création de sites web et d’applications utilisant l’intelligence artificielle pour transformer des instructions rédigées en langage naturel en un projet fonctionnel.

Contrairement au développement traditionnel, qui consiste à écrire manuellement du code HTML, CSS ou JavaScript, Lovable permet de décrire le résultat recherché. L’intelligence artificielle se charge ensuite de générer une première version du site, que vous pouvez modifier à travers de nouvelles instructions.

Cette méthode de développement est souvent appelée vibe coding. Elle consiste à guider une IA pour créer une application ou un site web, tout en conservant la possibilité de consulter et de modifier le code généré.

Quels types de sites peut-on créer avec Lovable ?

Lovable peut notamment servir à concevoir :

• Un site vitrine professionnel : présenter une entreprise, ses prestations et ses coordonnées.
• Un portfolio : mettre en valeur ses réalisations, ses compétences et ses projets.
• Une landing page : créer une page destinée à présenter un produit, promouvoir un service ou collecter des prospects.
• Une application web : développer une interface comportant des formulaires, des comptes utilisateurs ou des informations enregistrées dans une base de données.

Lovable ne se limite donc pas à la création de pages statiques. La plateforme propose également des fonctionnalités de backend, d’authentification, de stockage et de connexion à des services externes.

Elle permet aussi de synchroniser le code avec GitHub et de publier directement un projet sur Internet.

Toutefois, la qualité du résultat dépend du projet demandé et des vérifications effectuées. Pour un premier essai, il est préférable de commencer par un site relativement simple avant d’ajouter des fonctionnalités complexes.

Lovable est-il gratuit ? Quel plan faut-il pour mettre un site en ligne ?

Lovable propose une formule gratuite permettant de créer et de publier un site web, mais certaines fonctionnalités avancées nécessitent un abonnement payant.

La principale différence concerne notamment le nombre de crédits disponibles, la possibilité de connecter un nom de domaine personnalisé et les outils de gestion proposés aux équipes.

Quels sont les tarifs de Lovable AI ?

Voici un comparatif des quatre formules proposées par Lovable, selon les tarifs publics consultés le 29 octobre 2026.

Fonctionnalités	Free	Pro	Business	Enterprise
Prix de départ	0 $/mois	25 $/mois	50 $/mois	Sur devis
Crédits mensuels inclus	30 crédits maximum de création	100 crédits	100 crédits	Selon contrat
Publication sur .lovable.app	Oui	Oui	Oui	Oui
Domaine personnalisé	Non	Oui	Oui	Oui
Synchronisation GitHub	Oui	Oui	Oui	Oui
Projets privés dans l’espace de travail	Oui	Oui	Oui	Oui
Suppression du badge Lovable	Non	Oui	Oui	Oui
Téléchargement direct du code	Non	Oui	Oui	Oui
Fonctions avancées pour les équipes	Limitées	Oui	Oui	Personnalisées

Les tarifs indiqués correspondent aux prix de départ en facturation mensuelle, pour les formules présentant 100 crédits mensuels lorsque cette capacité est applicable. Ils peuvent évoluer selon la formule, le volume de crédits et le mode de facturation.

Comment fonctionnent les crédits Lovable ?

Lovable utilise un système de crédits pour mesurer différentes opérations, notamment la génération du site, les modifications demandées à l’IA et certaines ressources utilisées par les applications.

Sur le plan Free, vous disposez de 5 crédits de création quotidiens, avec un plafond de 30 crédits mensuels. La formule inclut également une allocation mensuelle de 20 crédits Cloud et de 4 crédits destinés aux fonctionnalités d’intelligence artificielle intégrées aux applications.

Le coût d’une demande dépend de sa complexité. À titre d’exemple, Lovable présente les consommations indicatives suivantes :

• Modifier la couleur d’un bouton : 0,50 crédit.
• Supprimer un pied de page : 0,90 crédit.
• Ajouter un système d’inscription et de connexion : 1,20 crédit.
• Générer une landing page avec des images : 1,70 crédit.

Ces valeurs sont des exemples fournis par l’éditeur, et non des tarifs fixes pour toutes les opérations similaires. Les crédits mensuels inutilisés des abonnements payants peuvent être reportés selon les conditions de validité de la formule. Les crédits quotidiens gratuits, eux, ne sont pas reportés au lendemain.

Quel plan choisir ? Si votre objectif consiste simplement à découvrir Lovable et à publier un premier site, commencez avec Free. En revanche, si vous souhaitez utiliser votre propre nom de domaine et supprimer le badge Lovable, une formule payante sera nécessaire.

Comment créer son compte et son premier projet ?

Pour commencer avec Lovable AI, vous devez créer un compte sur la plateforme, puis décrire le site web que vous souhaitez générer. L’éditeur utilise ensuite votre description pour construire une première version du projet.

Étape 1 : créer un compte sur Lovable

Rendez-vous sur le site officiel de Lovable et accédez à l’option permettant de commencer gratuitement.

Depuis l’écran d’inscription, sélectionnez une méthode de connexion proposée, puis suivez les instructions pour accéder à votre espace de travail.

La formule Free ne nécessite pas de carte bancaire pour commencer.

Une fois connecté, vous arrivez dans l’environnement de création de Lovable. C’est depuis cet espace que vous pourrez démarrer un projet et retrouver vos réalisations.

Étape 2 : décrire le site que vous souhaitez créer

Pour ce tutoriel, prenons l’exemple d’un site vitrine pour une agence spécialisée dans la création de sites web et l’intelligence artificielle.

Dans le champ de saisie de Lovable, vous pouvez utiliser une instruction comme celle-ci :

Crée un site web professionnel en français pour une agence spécialisée dans la création de sites internet et les solutions d’intelligence artificielle. Le site doit comporter une page d’accueil, une page de présentation des services, une page À propos et une page Contact. Utilise un design moderne, des couleurs bleues et blanches, une navigation intuitive et une interface adaptée aux smartphones.

Envoyez ensuite votre demande pour lancer la génération du projet.

Lovable analyse votre description et crée une première version de votre site. La durée et la consommation de crédits dépendent du travail demandé.

Étape 3 : découvrir l’interface de l’éditeur

Lorsque la génération est terminée, l’éditeur permet de consulter le résultat et d’interagir avec l’intelligence artificielle.

Vous retrouverez notamment :

• L’aperçu du projet : pour visualiser les pages et vérifier leur présentation.
• Le chat du projet : pour demander des modifications, corriger des éléments ou ajouter de nouvelles fonctionnalités.
• Le bouton « Share » : pour accéder aux options de partage.
• Le bouton « Publish » : pour publier le site sur Internet.

À ce stade, prenez le temps de parcourir les pages générées. Vérifiez particulièrement la navigation, les contenus, les boutons et l’affichage sur différentes tailles d’écran.

Comment rédiger un prompt efficace pour un site web ?

Pour créer un site web professionnel avec Lovable AI, la qualité du prompt joue un rôle essentiel. Plus votre demande est précise, plus l’intelligence artificielle dispose d’informations pour générer une interface adaptée à vos attentes.

Un prompt est une instruction que vous transmettez à l’intelligence artificielle. Dans Lovable, il permet de définir la structure du site, les pages à créer, les fonctionnalités souhaitées et son apparence visuelle.

Les cinq éléments d’un bon prompt Lovable

Pour obtenir un résultat cohérent, votre description devrait préciser cinq éléments :

• L’objectif du site : présenter une entreprise, vendre un service ou collecter des demandes de devis.
• Le public cible : entrepreneurs, particuliers, associations ou professionnels.
• Les pages à créer : accueil, services, à propos et contact, par exemple.
• Les contenus et fonctionnalités : textes de présentation, boutons, formulaires ou témoignages.
• Le style graphique : couleurs, typographie, disposition des éléments et adaptation aux appareils mobiles.

Prenons un exemple concret.

Exemple de prompt trop vague :

Crée un beau site web pour une agence digitale.

Cette demande ne précise ni les services proposés, ni les pages nécessaires, ni le public visé. Lovable devra donc prendre plusieurs décisions sans disposer d’indications suffisantes.

Exemple de prompt détaillé :

Crée un site web vitrine professionnel en français pour une agence nommée SuperTutoriels, spécialisée dans la création de sites web, le référencement naturel et l’automatisation par intelligence artificielle.

Le site cible les petites entreprises, les entrepreneurs et les indépendants.

Crée quatre pages : Accueil, Services, À propos et Contact.

Sur la page d’accueil, ajoute une section principale avec un titre accrocheur, un bouton « Demander un devis », une présentation de trois services et une section de témoignages.

Utilise un design moderne avec un fond blanc, des accents bleus, des cartes arrondies et une typographie professionnelle. Le site doit être responsive et facile à consulter sur smartphone.

Ce second prompt fournit des instructions concrètes et réduit les ambiguïtés.

Améliorer progressivement le résultat généré

Une fois le premier site créé, vous pouvez demander des modifications à Lovable directement dans le chat du projet.

Par exemple :

Sur la page d’accueil, agrandis le titre principal, réduis l’espace entre les sections et rends le bouton « Demander un devis » plus visible sur mobile. Conserve les autres éléments sans modification.

Cette méthode permet de modifier une partie précise du site sans demander une reconstruction complète.

Il est préférable de procéder par petites étapes et de vérifier le résultat après chaque modification. Gardez également à l’esprit que les demandes adressées à l’agent peuvent consommer des crédits Lovable. Préparer vos instructions avant de les envoyer permet donc de limiter les opérations inutiles.

Comment ajouter un formulaire, une base de données ou une connexion utilisateur ?

Lovable permet d’ajouter des fonctionnalités dynamiques à un site web, notamment des formulaires, une base de données et un système d’authentification, grâce à son backend intégré.

Contrairement à une page statique qui affiche simplement des informations, un site dynamique peut enregistrer des données, gérer des comptes utilisateurs ou communiquer avec des services externes.

Comprendre le backend intégré de Lovable

Le backend désigne la partie technique qui fonctionne en arrière-plan d’un site ou d’une application. Il permet notamment de recevoir les informations transmises par les visiteurs, de les enregistrer et de contrôler leur accès.

Lovable propose un environnement appelé Cloud, reposant sur les technologies open source de Supabase.

Il intègre plusieurs fonctionnalités :

• Base de données : enregistrer les messages de contact, les inscriptions ou d’autres informations.
• Authentification : permettre aux utilisateurs de créer un compte et de se connecter.
• Stockage : conserver des images, des documents et d’autres fichiers.
• Fonctions serveur : exécuter des traitements sans exposer les opérations sensibles dans le navigateur.
• Gestion des secrets : conserver les clés API et autres identifiants sensibles dans un emplacement adapté.

Vous pouvez également connecter un projet Supabase externe, notamment si vous souhaitez utiliser une infrastructure déjà configurée.

Attention toutefois : la migration entre un backend externe et le backend intégré de Lovable n’est pas nécessairement automatique. Le déplacement des données, des fichiers et de la configuration d’authentification peut nécessiter des opérations manuelles.

Étape 1 : demander la création d’un formulaire de contact

Pour notre site d’agence, nous allons ajouter un formulaire permettant aux visiteurs d’envoyer une demande de renseignements.

Dans le chat de Lovable, saisissez :

Ajoute un formulaire de contact sur la page Contact. Il doit contenir les champs Nom, Adresse e-mail, Sujet et Message. Tous les champs sont obligatoires. Vérifie le format de l’adresse e-mail et affiche un message de confirmation uniquement lorsque les informations ont été correctement enregistrées.

Lovable peut alors générer les champs du formulaire et proposer la configuration nécessaire pour traiter les messages.

Étape 2 : connecter le formulaire à une base de données

Un formulaire visible sur une page ne garantit pas que les informations envoyées sont réellement enregistrées.

Demandez donc à Lovable :

Connecte le formulaire de contact au backend intégré. Crée une table destinée à enregistrer le nom, l’adresse e-mail, le sujet, le message et la date de réception. Protège les données contre les accès non autorisés et empêche les visiteurs de consulter les messages des autres utilisateurs.

Si l’activation de Lovable Cloud nécessite une autorisation, examinez la demande avant de la valider.

Vous pourrez ensuite consulter les tables et leurs enregistrements dans les outils de gestion du backend.

Il est important de vérifier les règles d’accès à la base de données. Les messages reçus ne doivent pas devenir publiquement consultables simplement parce que le formulaire est accessible à tous.

Étape 3 : tester l’enregistrement et la réception des messages

Après la configuration, ouvrez le formulaire et effectuez un envoi avec des informations fictives.

Vérifiez que :

• Les champs obligatoires sont contrôlés.
• Les adresses e-mail incorrectes sont refusées.
• Le message est effectivement enregistré dans la base.
• Le visiteur reçoit une confirmation après un enregistrement réussi.
• Les informations ne sont pas visibles par d’autres visiteurs.

Si vous souhaitez recevoir chaque demande directement par e-mail, vous devrez également configurer un mécanisme d’envoi adapté. L’enregistrement en base de données ne signifie pas automatiquement qu’un message arrive dans votre messagerie.

Enfin, si votre site collecte des données personnelles, prévoyez une information sur leur utilisation, leur conservation et les droits des personnes concernées.

Comment publier son site Lovable ?

Lovable permet de publier gratuitement un site web sur Internet grâce à son système d’hébergement intégré. Il n’est donc pas nécessaire de louer immédiatement un serveur ou de configurer manuellement un hébergement.

Une fois votre projet créé et vérifié, vous pouvez le rendre accessible au public depuis l’éditeur.

Étape 1 : accéder aux paramètres de publication

Ouvrez votre projet Lovable et cliquez sur le bouton « Publier », situé dans la partie supérieure droite de l’éditeur, près du bouton « Partager ».

Une fenêtre de publication s’affiche avec les paramètres du site.

Lovable propose une adresse reprenant généralement le nom du projet, sous la forme :

nom-du-projet.lovable.app

Vous pouvez personnaliser la partie correspondant au nom du projet, sous réserve que l’adresse souhaitée soit disponible.

Avant de continuer, vérifiez que le nom choisi est facilement compréhensible et qu’il représente correctement votre activité.

Étape 2 : vérifier les informations du site

Avant la publication, contrôlez les informations affichées dans la fenêtre.

Lovable peut générer automatiquement certains éléments, notamment le titre du site, sa description et son icône.

Assurez-vous que ces informations correspondent à votre projet. Vous pourrez demander leur modification à l’agent si nécessaire.

Profitez également de cette étape pour parcourir l’aperçu et vous assurer que les pages principales fonctionnent.

Sur les formules Free et Pro, le site publié est accessible aux personnes disposant de son adresse. Les options permettant de restreindre l’accès aux membres d’un espace de travail ou à des personnes sélectionnées sont proposées sur les formules Business et Enterprise.

Étape 3 : lancer la publication

Cliquez de nouveau sur le bouton « Publier » pour confirmer la mise en ligne.

Lovable prépare alors une version publiée de votre projet et fournit son adresse publique.

Ouvrez cette URL dans un nouvel onglet pour vérifier le résultat.

Votre site est désormais accessible sur Internet avec une connexion HTTPS, sans configuration manuelle d’un certificat SSL.

La publication depuis la fenêtre dédiée ne consomme pas de crédits de création. En revanche, l’hébergement et les fonctionnalités backend peuvent consommer des ressources selon l’utilisation du site.

Pour mieux comprendre les différentes méthodes de publication, consultez notre guide expliquant comment mettre un site en ligne facilement.

Étape 4 : publier les modifications ultérieures

Une particularité importante de Lovable est que les modifications effectuées dans l’éditeur ne sont pas automatiquement visibles sur le site public.

Chaque publication correspond à une version précise de votre projet.

Après avoir modifié une page, cliquez sur le bouton « Publier », puis sur le bouton « Publier les modifications » afin de déployer la nouvelle version.

Un petit point peut apparaître sur le bouton « Publier » pour vous signaler que des modifications n’ont pas encore été publiées.

Vous pouvez également demander à l’agent de publier votre projet depuis le chat, mais cette méthode est comptabilisée comme une interaction consommant des crédits.

Résultat : à cette étape, vous disposez d’un site public hébergé par Lovable. Vous pouvez conserver gratuitement son adresse en .lovable.app et passer directement à la sauvegarde du code sur GitHub si vous ne souhaitez pas utiliser de domaine personnalisé.

Comment connecter son propre nom de domaine ?

Nécessite un plan payant : la connexion d’un domaine personnalisé à Lovable est réservée aux formules payantes. Cette étape est facultative si vous souhaitez conserver l’adresse gratuite en .lovable.app.

Pour utiliser une adresse professionnelle comme www.monsite.fr, vous devez posséder un nom de domaine et modifier ses enregistrements DNS afin de le relier à votre projet Lovable.

Cette configuration permet aux visiteurs d’accéder à votre site depuis une adresse correspondant à votre marque ou à votre entreprise.

Étape 1 : disposer d’un nom de domaine

Vous devez d’abord posséder un nom de domaine et pouvoir accéder à sa zone DNS.

Si vous n’en avez pas encore, vous pouvez vérifier la disponibilité d’un nom de domaine chez LWS, puis choisir une adresse correspondant à votre activité.

Privilégiez un nom court, facilement mémorisable et cohérent avec l’identité de votre projet.

Pour ce tutoriel, nous utiliserons monsite.fr comme exemple fictif. Il devra être remplacé par votre véritable domaine.

Étape 2 : ajouter votre domaine dans Lovable

Dans votre projet, accédez aux paramètres (Settings), puis à la rubrique « Domaines« .

Vous pouvez également ouvrir la fenêtre « Publier » et sélectionner le bouton “Ajouter un domaine”.

Choisissez l’option permettant de connecter un domaine existant, puis saisissez votre adresse.

Lovable vous proposera alors la configuration nécessaire pour vérifier que le domaine vous appartient et le relier à votre site.

Selon les fournisseurs, une configuration automatique peut être proposée. Nous allons ici utiliser la configuration DNS manuelle, qui permet de comprendre précisément les modifications effectuées.

Étape 3 : configurer les enregistrements DNS chez LWS

Si votre domaine est géré chez LWS et utilise ses serveurs DNS, connectez-vous à votre espace client LWS et ouvrez la gestion du domaine concerné.

Accédez ensuite à sa zone DNS, depuis le panneau de gestion disponible pour votre domaine.

Vous devrez y ajouter les enregistrements demandés par Lovable.

Pour un domaine principal, les valeurs de référence sont les suivantes :

Type	Nom ou hôte	Valeur
A	@	185.158.133.1
TXT	_lovable	Valeur de vérification fournie par Lovable

L’enregistrement A dirige votre domaine vers l’adresse IP utilisée par Lovable.

L’enregistrement TXT permet de confirmer que vous êtes autorisé à utiliser le domaine. Sa valeur commence généralement par lovable_verify=, mais la chaîne complète est propre à votre configuration.

Pour un sous-domaine, comme app.monsite.fr, le nom d’hôte de l’enregistrement A correspond généralement à app, et celui du TXT à _lovable.app. Suivez toutefois les valeurs proposées par Lovable.

Vérifiez également qu’aucun ancien enregistrement A, AAAA ou CNAME incompatible ne pointe le même nom vers un autre serveur. Ne supprimez pas les enregistrements liés à votre messagerie ou à d’autres services sans en comprendre l’utilité.

Étape 4 : attendre la vérification du domaine

Après avoir enregistré les modifications DNS, retournez dans Lovable et confirmez la configuration.

La plateforme vérifie les enregistrements, puis prépare le certificat SSL nécessaire à l’utilisation du protocole HTTPS.

La propagation DNS peut prendre jusqu’à 72 heures, même si les modifications deviennent souvent visibles plus rapidement.

Lorsque la configuration est terminée, le domaine passe au statut Live. Vous pouvez alors ouvrir votre adresse personnalisée et vérifier que le site Lovable s’affiche correctement.

Si la vérification échoue, contrôlez en priorité les enregistrements TXT, A et AAAA, ainsi que les éventuelles anciennes configurations DNS.

Étape 5 : vérifier le HTTPS et les redirections

Une fois le domaine connecté, vérifiez que votre site s’ouvre avec https://.

Lovable génère automatiquement un certificat SSL pour les domaines correctement connectés. Vous n’avez donc pas besoin d’installer manuellement un certificat chez votre fournisseur de domaine.

Vérifiez ensuite le comportement des versions www et sans www.

Lovable permet de désigner un domaine principal. Lorsqu’un domaine principal est défini, les autres domaines connectés au même projet peuvent rediriger vers celui-ci.

Il faut toutefois connaître une particularité importante pour le référencement : Lovable utilise des redirections HTTP 302 temporaires entre les domaines connectés, et non des redirections permanentes 301.

Cette différence mérite une attention particulière lors de la configuration SEO du site.

Si vous utilisez Cloudflare ou un autre proxy, Lovable propose également une configuration avancée reposant sur un enregistrement CNAME. Dans ce cas, utilisez exclusivement la cible communiquée dans les paramètres de votre projet.

Résultat : votre site Lovable est désormais accessible depuis votre propre nom de domaine, avec une connexion HTTPS. Vous pouvez continuer à modifier ses pages dans l’éditeur, puis utiliser Publish changes pour mettre en ligne les nouvelles versions.

Comment sauvegarder son code avec GitHub ?

Lovable permet de sauvegarder le code source de votre site sur GitHub, même avec la formule gratuite. Cette fonctionnalité est particulièrement utile pour conserver une copie de votre projet, suivre les modifications effectuées et préparer un éventuel déploiement sur un autre hébergement.

GitHub est une plateforme de gestion de code utilisant Git, un système de contrôle de versions. Grâce à la synchronisation proposée par Lovable, vous pouvez retrouver les fichiers de votre projet dans un dépôt indépendant.

Étape 1 : connecter votre compte GitHub à Lovable

Commencez par créer un compte gratuit sur GitHub, si vous n’en possédez pas encore.

Ouvrez ensuite votre projet Lovable et procédez comme suit :

• Accédez aux paramètres du projet (Project settings).
• Ouvrez la rubrique « Git », puis sélectionnez l’option « GitHub ».

• Cliquez sur le bouton « Add connection » pour ajouter votre compte GitHub.

• Cliquez ensuite sur le bouton « Add account »

• Dans la fenêtre GitHub, choisissez le compte ou l’organisation à connecter.
• Cliquez sur le bouton « Install & Authorize » pour autoriser la connexion.

Lovable associe alors votre compte GitHub à votre espace de travail.

Étape 2 : créer le dépôt et activer la synchronisation

Une fois votre compte GitHub connecté, retournez dans les paramètres Git de votre projet.

Sélectionnez le compte souhaité, puis cliquez sur le bouton « Connect ». Lovable crée automatiquement un nouveau dépôt GitHub privé, dans lequel les fichiers du projet sont synchronisés.

Cette synchronisation fonctionne dans les deux sens :

• Les modifications réalisées dans Lovable sont envoyées vers GitHub.
• Les modifications transmises à la branche Git active depuis GitHub peuvent être récupérées dans Lovable.

Vous pouvez ainsi consulter le code, suivre son historique et travailler avec un développeur utilisant un environnement de développement classique.

Certaines limites doivent toutefois être prises en compte. Lovable synchronise une seule branche à la fois et crée un nouveau dépôt lorsqu’un projet est connecté. Il ne faut donc pas considérer cette connexion comme une solution permettant d’importer automatiquement n’importe quel dépôt existant.

Étape 3 : vérifier les fichiers sauvegardés

Rendez-vous sur GitHub et ouvrez le dépôt nouvellement créé.

Vous devriez y retrouver les fichiers correspondant à votre application, notamment ceux qui définissent les pages, les composants, les styles et la configuration du projet.

La structure exacte dépend du code généré. Vous pouvez notamment examiner les fichiers de configuration pour identifier les technologies utilisées.

Cette vérification est importante si vous envisagez de déployer ultérieurement votre site sur un autre hébergement.

Alternative payante : les abonnements payants permettent également de télécharger directement le code depuis la section « Project settings > Git > Download codebase », sans passer par la synchronisation GitHub.

Pour un utilisateur du plan Free, GitHub reste donc une solution pratique pour conserver une copie indépendante du code source.

Peut-on héberger son site Lovable ailleurs, par exemple chez LWS ?

Il est possible de récupérer le code d’un projet Lovable pour envisager son hébergement sur une infrastructure externe, notamment un hébergement web ou un VPS LWS. Toutefois, la procédure dépend des technologies utilisées et des services nécessaires au fonctionnement du projet.

La première étape consiste à récupérer le code avec GitHub, puis à identifier sa structure technique.

Si le projet génère une version statique composée de fichiers HTML, CSS et JavaScript, ces fichiers pourront éventuellement être publiés sur un hébergement web compatible, après compilation si nécessaire.

En revanche, si votre application utilise un serveur, des processus spécifiques ou un backend personnalisé, un VPS peut être plus adapté pour installer les dépendances et gérer son exécution.

Pour préparer cette migration, il est recommandé de :

• Récupérer le code source depuis GitHub.
• Identifier le framework et les dépendances du projet.
• Vérifier les commandes nécessaires pour générer une version destinée à la production.
• Déterminer si le site utilise une base de données ou des services hébergés par Lovable.
• Tester le déploiement sur l’infrastructure choisie avant de modifier les DNS.

Dans le cadre de ce tutoriel, le déploiement externe reste une possibilité à étudier selon le projet. Il ne constitue pas une étape obligatoire, puisque Lovable fournit déjà un environnement de publication intégré.

Pour les projets nécessitant une infrastructure plus flexible, découvrez comment déployer une application sur un VPS et maîtriser votre environnement d’hébergement.

Un site généré avec Lovable est-il bien référencé ?

Un site créé avec Lovable AI peut être référencé par Google, à condition que ses pages soient accessibles aux moteurs de recherche et que leur contenu soit correctement structuré.

Cependant, le simple fait de publier un projet avec Lovable ne garantit ni son indexation ni son positionnement dans les résultats de recherche.

Comme pour un site développé avec WordPress ou un autre outil, il faut vérifier plusieurs éléments techniques et éditoriaux.

Configurer les éléments SEO des pages

Commencez par demander à Lovable d’optimiser les principales informations de votre site.

Par exemple, utilisez cette instruction :

Optimise le référencement naturel de mon site. Ajoute un titre SEO unique et une meta-description pertinente pour chaque page, organise les contenus avec des titres H1, H2 et H3 cohérents, renseigne les textes alternatifs des images et vérifie que les liens de navigation fonctionnent correctement.

Après cette modification, contrôlez les éléments réellement générés.

Vérifiez notamment :

• La balise title : elle doit décrire précisément le contenu de chaque page.
• La meta-description : elle doit résumer la page et donner envie de la consulter.
• Les titres Hn : ils doivent organiser les informations dans un ordre logique.
• Les attributs alt : ils doivent décrire les images utiles au contenu.
• Les URL : elles doivent rester compréhensibles et cohérentes avec les pages.

Vous pouvez également à la section « SEO et AEO » dans la section « Paramètres › Analytics »pour évaluer votre site et ajuster ce qui manque.

Une attention particulière doit également être accordée aux balises canoniques, afin d’éviter les ambiguïtés entre plusieurs adresses présentant le même contenu.

Vérifier l’indexation avec Google Search Console

Une fois votre site publié, utilisez Google Search Console pour examiner son accessibilité aux moteurs de recherche.

Si vous avez connecté un domaine personnalisé, ajoutez celui-ci comme propriété et effectuez la vérification demandée.

Utilisez ensuite l’outil Inspection de l’URL pour analyser une page importante, comme votre page d’accueil.

Vous pourrez vérifier si Google connaît cette URL, si son exploration est autorisée et si elle peut être indexée.

Lorsque cela est possible, examinez également le rendu de la page pour vous assurer que les contenus importants sont accessibles.

Vérifiez enfin la présence d’un fichier robots.txt et d’un sitemap XML, puis soumettez ce dernier dans Search Console s’il est disponible.

Enfin, si plusieurs domaines sont connectés à votre projet, vérifiez les redirections. Lovable utilise des redirections HTTP 302 entre les domaines associés, un comportement à prendre en compte dans votre stratégie SEO.

Comment vérifier que le site fonctionne correctement ?

Avant de partager votre site Lovable avec vos visiteurs, vous devez contrôler son affichage, sa sécurité et ses principales fonctionnalités. Un site publié n’est pas nécessairement exempt d’erreurs.

Effectuez les vérifications suivantes :

• Adresse et HTTPS : ouvrez le domaine public et assurez-vous qu’il utilise une connexion sécurisée.
• Navigation : testez les menus, les boutons et les liens internes pour vérifier qu’ils dirigent vers les bonnes pages.
• Affichage mobile : consultez le site sur smartphone et tablette afin de détecter les éléments mal alignés ou difficiles à utiliser.
• Formulaire de contact : envoyez un message fictif et vérifiez qu’il est réellement enregistré ou transmis.
• Performances : analysez l’adresse publique avec Google PageSpeed Insights pour identifier les problèmes de chargement.
• Domaine personnalisé : si vous en utilisez un, contrôlez les versions avec et sans www, ainsi que les redirections.
• Dernière version publiée : assurez-vous d’avoir utilisé Publish changes après vos dernières modifications.

Pour un contrôle plus complet, testez également votre site dans plusieurs navigateurs, notamment Chrome, Firefox et Edge.

Si vous constatez un problème, revenez dans Lovable et décrivez précisément l’anomalie à l’agent. Par exemple :

Sur smartphone, le bouton « Demander un devis » dépasse de la largeur de l’écran. Corrige uniquement son affichage mobile, sans modifier la présentation sur ordinateur.

Après chaque correction, publiez à nouveau votre projet, puis vérifiez le résultat sur l’adresse publique. Cette dernière étape permet de s’assurer que votre site est réellement prêt à accueillir ses premiers visiteurs.

Quelles sont les erreurs fréquentes avec Lovable ?

Les problèmes les plus fréquents avec Lovable AI concernent la configuration du nom de domaine, les crédits disponibles et la publication des modifications. La plupart peuvent être évités en vérifiant les paramètres du projet avant sa mise en ligne.

Le domaine reste bloqué sur « Unable to verify »

Lorsque vous connectez un domaine personnalisé, Lovable doit vérifier les enregistrements DNS configurés auprès de votre fournisseur.

Si le statut Unable to verify apparaît, plusieurs causes sont possibles :

• Un enregistrement TXT incorrect : vérifiez que la valeur de vérification correspond exactement à celle fournie par Lovable.
• Un ancien enregistrement DNS : un enregistrement A ou AAAA incompatible peut empêcher la connexion.
• Une propagation DNS incomplète : les changements peuvent nécessiter jusqu’à 72 heures.
• Un domaine déjà utilisé : un même domaine exact ne peut pas être associé simultanément à plusieurs projets Lovable.

Si le domaine est correctement vérifié mais que son certificat HTTPS ne fonctionne toujours pas après 72 heures, contactez le support Lovable. Vérifiez également les enregistrements CAA, qui peuvent limiter les autorités autorisées à émettre un certificat SSL.

Les modifications ne s’affichent pas sur le site publié

Vous avez changé un texte ou une image dans l’éditeur, mais le site public affiche toujours l’ancienne version ?

Il est possible que vous ayez oublié de republier les modifications. Dans Lovable, cliquez sur le bouton « Publish », puis sur « Publish changes ».

Actualisez ensuite votre site pour vérifier que la nouvelle version est disponible.

Les crédits Lovable sont épuisés

Avec le plan gratuit, vous disposez d’un nombre limité de crédits. Des demandes répétées ou complexes peuvent rapidement épuiser votre allocation.

Pour éviter cette situation, préparez vos prompts, regroupez les modifications cohérentes et évitez de régénérer inutilement des pages entières.

Vous pouvez consulter votre consommation depuis les informations d’utilisation de votre compte.

Quelles bonnes pratiques adopter ?

Pour créer un site web fiable avec Lovable AI, il est recommandé d’adopter quelques habitudes dès le début du projet.

1. Sauvegardez votre code avec GitHub. Activez la synchronisation dès les premières étapes pour disposer d’un historique de votre projet et conserver une copie du code source.

2. Rédigez des prompts précis. Décrivez clairement les pages, les fonctionnalités et les éléments à modifier. Préférez plusieurs instructions ciblées à une demande trop générale.

3. Vérifiez chaque modification. Après une intervention de l’IA, contrôlez le résultat dans l’éditeur avant de passer à l’étape suivante.

4. Protégez les données sensibles. Ne saisissez jamais de mots de passe, de clés API privées ou d’autres secrets directement dans vos prompts. Utilisez les fonctionnalités prévues pour leur stockage sécurisé.

5. Relisez les contenus générés. L’intelligence artificielle peut produire des erreurs, notamment dans les informations commerciales, les coordonnées et les mentions légales.

6. Respectez les obligations relatives aux données personnelles. Si votre site utilise des formulaires ou des cookies non essentiels, prévoyez les informations et les mécanismes de consentement appropriés.

7. Surveillez votre consommation de crédits. Consultez régulièrement les statistiques d’utilisation pour éviter les interruptions liées aux limites de votre formule.

Enfin, prenez l’habitude de tester votre site sur ordinateur et sur mobile après chaque modification importante. Cela vous permettra d’identifier rapidement les problèmes d’affichage ou de fonctionnement.

FAQ

Lovable AI est-il vraiment gratuit ?

Oui, Lovable propose une formule Free qui permet de créer un site web, de le modifier et de le publier gratuitement sur une adresse en .lovable.app.

Cette formule comprend jusqu’à 30 crédits de création par mois, avec une limite quotidienne de 5 crédits. Elle permet également de synchroniser le code avec GitHub.

Cependant, certaines fonctionnalités, comme l’utilisation d’un nom de domaine personnalisé et le téléchargement direct du code, nécessitent un abonnement payant.

Peut-on utiliser son propre nom de domaine avec Lovable ?

Oui, Lovable accepte les noms de domaine personnalisés avec une formule payante.

Vous devez ajouter votre domaine dans les paramètres du projet, puis configurer les enregistrements DNS demandés auprès de votre fournisseur.

Une fois la vérification terminée, votre site devient accessible depuis votre propre adresse web, avec un certificat HTTPS automatiquement généré.

Peut-on récupérer le code d’un site Lovable ?

Oui. Lovable permet de récupérer le code source grâce à la synchronisation GitHub, disponible également sur le plan gratuit.

Cette fonctionnalité crée un dépôt contenant les fichiers du projet et synchronise les modifications.

Les abonnements payants permettent aussi de télécharger directement le code depuis les paramètres du projet. Attention : la récupération des fichiers ne garantit pas le transfert automatique du backend et de la base de données.

Faut-il savoir coder pour utiliser Lovable ?

Il n’est pas indispensable de maîtriser un langage de programmation pour créer les premières pages d’un site avec Lovable.

Vous pouvez décrire votre projet en français, puis demander des modifications à l’intelligence artificielle.

Toutefois, des connaissances en développement web restent utiles pour comprendre les erreurs, sécuriser les fonctionnalités avancées ou héberger le projet sur une infrastructure externe.

Que devient le site si on arrête son abonnement Lovable ?

Selon les conditions documentées par Lovable, les domaines personnalisés déjà connectés peuvent continuer à fonctionner après un retour à la formule gratuite, même si l’ajout de nouveaux domaines nécessite un plan payant.

En revanche, les fonctionnalités disponibles et les limites d’utilisation dépendent de la formule active.

Avant de résilier, vérifiez les conditions applicables à votre compte, notamment concernant les crédits, le backend et les ressources consommées par votre application.

Lovable ou WordPress : lequel choisir ?

Lovable et WordPress répondent à des besoins différents.

Lovable privilégie la génération de sites et d’applications à partir d’instructions en langage naturel. Il convient notamment à la création de prototypes, de pages de présentation et de projets web personnalisés.

WordPress dispose d’un écosystème mature de thèmes, d’extensions et d’outils de gestion de contenu. Il constitue notamment une solution intéressante pour les blogs, les sites éditoriaux et les projets nécessitant une administration régulière des contenus.

Le choix dépend donc de votre objectif, de votre budget et du niveau de contrôle technique souhaité.

Pour approfondir cette question, consultez également notre guide expliquant comment choisir un constructeur de site ou développer son site manuellement.

Conclusion

Lovable AI simplifie la création d’un site web en permettant de transformer des instructions rédigées en langage naturel en pages et fonctionnalités utilisables. Comme nous l’avons vu, vous pouvez commencer avec la formule gratuite, générer votre premier site, le personnaliser et le publier sur une adresse en .lovable.app. La synchronisation avec GitHub permet également de conserver une copie du code source.✨ Pour aller plus loin, une formule payante donne notamment accès à la connexion d’un nom de domaine personnalisé et au téléchargement direct des fichiers. ⬇Toutefois, la publication ne constitue pas la dernière étape. Il reste important de vérifier le référencement, la sécurité, les performances et le fonctionnement des formulaires.

Vous préférez utiliser WordPress ? Découvrez également comment créer un site WordPress avec l’IA grâce aux outils de création assistée par intelligence artificielle.

En suivant progressivement ces recommandations, vous pourrez créer un premier site avec Lovable, puis l’améliorer en fonction de vos besoins et de l’évolution de votre projet. Avez-vous déjà utilisé Lovable AI pour créer un site web ? Partagez votre expérience ou posez vos questions dans les commentaires !