Comment mettre en ligne votre site Bolt/Lovable avec votre nom de domaine

Vous avez créé un site web avec Bolt ou Lovable et souhaitez le rendre accessible à tous via votre propre nom de domaine ? Même si cela peut sembler complexe, avec les bonnes étapes, le processus devient un jeu d’enfant.

Dans ce guide, nous vous proposons deux méthodes efficaces pour mettre votre projet en ligne et le personnaliser avec votre propre adresse : l’utilisation d’une part, d’un hébergeur traditionnel comme Hostinger, d’autre part d’une plateforme de déploiement moderne comme Netlify.

Méthode 1 : Utilisation d’un hébergeur comme Hostinger

Que vous soyez un débutant ou un utilisateur expérimenté, utiliser Hostinger est un choix judicieux, surtout si vous voulez personnaliser davantage votre site. En effet, cette méthode offre un contrôle total sur votre environnement d’hébergement.

Voici les étapes à suivre pour réussir cette mise en ligne :

1. Achat du nom de domaine

La première étape pour mettre en ligne votre site Bolt ou Lovable est d’acquérir un nom de domaine. De ce fait, allez sur le site pour vérifier si ce dernier est encore disponible. Dans le cas où vous avez du mal à trouver un nom de domaine ou que votre choix n’est plus disponible, vous pouvez utiliser son générateur.

Pour information, des services comme Hostinger proposent des options d’achat de noms de domaine à des prix compétitifs. Si le .com est à tout juste 4,99 € la première année, il existe d’autres propositions moins chères telles que .info, .online, .store, .tech, etc.

Réservez ensuite le nom de domaine avec la durée sur laquelle vous voulez le garder. Il est à noter que le prix varie en fonction de la durée désirée.

2. Choix de l’hébergeur

Après l’achat du nom de domaine, il est temps de sélectionner votre plan d’hébergement. Pour ce faire, cliquez sur « Obtenir un hébergement ». Choisissez ensuite « Acheter un nouveau plan d’hébergement », puis cliquez sur « Confirmer ».

Pour terminer le processus d’achat, choisissez la période de facturation. Vous avez le choix entre 1 mois, 12 mois, 24 mois et 48 mois. À noter que le prix varie en fonction de la durée d’engagement.

Si vous souhaitez payer encore moins cher et bénéficier d’une réduction sur votre facture, vous pouvez entrer un code promo.

Une fois le paiement effectué, la page « Voulez-vous créer ou migrer un site web ? » apparait, alors cliquez sur « Suivant ».

Comme votre objectif est de créer un site sur Lovable, au lieu de cliquer sur WordPress ou Créateur de sites Hostinger, il faudra cliquer sur « Site PHP/HTML vide » puis sur « Suivant ».

3. Mise en ligne et importation des fichiers

Après avoir entré le pays où vous vous situez, Hostinger va configurer l’hébergement, il va donc effectuer l’affectation du serveur.

À ce stade, il va falloir générer le fichier à partir de Bolt. Là, indiquez à l’outil de changer le nom de votre site vers le nom de votre domaine.

Attention, cette action est importante, car c’est à partir de cette dernière qu’il va mettre à jour les fichiers, notamment le titre de la page dans index_html, le logo dans la barre de navigation, l’adresse email pour correspondre au nouveau nom de domaine, les mentions légales et tous les liens internes de votre site internet. Tout cela en ligne, il ne devra pas avoir de souci de navigation interne.

Pour importer les fichiers de votre site internet, cliquez sur « Download », en haut à droite de votre écran et enregistrez-les sur votre ordinateur.

Ensuite, retournez sur Hostinger. Sur le tableau de bord de votre nom de domaine, cliquez sur « Gestionnaire de fichiers ». Vous allez apercevoir un dossier « public_html » dans lequel vous allez mettre vos fichiers.

Récupérez le fichier que vous avez téléchargé sur Bolt, puis désarchivez-le. Une liste de dossiers s’affichera. Ouvrez le dossier « dist ». Il contient trois fichiers (_redirects, assets, index_html) que vous allez glisser-déposer dans le dossier « public_html » de Hostinger.

En revenant sur votre nom de domaine, vous allez voir que votre site est bien mis en ligne. Il est maintenant fonctionnel.

Méthode 2 : Utilisation de Netlify

L’autre méthode pour mettre en ligne votre site est d’utiliser Netlify. Cette plateforme offre une approche plus légère que les hébergeurs traditionnels et intègre directement vos projets via Git, ce qui facilite leur mise à jour.

1. Connexion avec GitHub

Sur Lovable, il va falloir déployer le site sur GitHub. Pour ce faire, cliquez sur « < > GitHub » en haut à droite, puis sur « Connect ». Si vous n’en avez pas encore, vous pouvez en créer un. Le processus ne prend qu’une minute et c’est entièrement gratuit.

Une fois connecté, appuyez sur « Create repository » pour commencer la génération sur GitHub. De là, vous aurez un clone de votre projet sur GitHub. Celui-ci vous donnera accès à une URL que vous allez utiliser plus tard.

Maintenant que vous avez votre copie sur GitHub, il convient de créer un compte sur Netlify. Inutile de passer par un plan payant, car la version gratuite peut bien suffire pour votre projet.

Une fois que vous avez votre compte, copiez l’URL indiquée sur votre navigateur, et changez la partie REPLACE_WITH_GITHUB_REPOSITORY par votre projet. Pour cela, il suffit de retourner sur GitHub, de copier et de coller l’URL.

Une page s’affichera et vous demandera de connecter votre compte GitHub à Netlify. Ainsi, cliquez sur « Authorize ». Si un message d’erreur apparaît, pas de panique ! Cela signifie que votre projet GitHub est en mode privé.

Pour le passer en mode public, allez sur ce dernier. Cliquez sur « Settings », puis « Collaborators ». Sur la droite, dans le bloc « PRIVATE REPOSITORY », cliquez sur « Manage ». À partir de là, cliquez sur « Change visibility », puis « Change to public ». Ensuite, appuyez sur « I had read and understand these effects » et « Make this repository public ».

Maintenant que votre projet GitHub est en mode public, revenez sur Netlify pour réessayer le lancement. Si ça ne marche toujours pas, allez sur votre profil Netlify et entrez dans le menu « Builds ».

Pour importer votre projet, cliquez sur « GitHub », puis « Installer ». Vous aurez ensuite accès à ce dernier. Renommez votre site et vérifiez sa disponibilité.

Enfin, cliquez sur « Deploy ». Une fenêtre de progression s’affichera. Votre site est désormais déployé sur netlify.app.

Pour information, Avec Bolt, il est possible de déployer directement sur Netlify, ce qui n’est pas le cas avec Lovable.

2. Configuration du nom de domaine et des configurations DNS

À partir de votre projet Netlify, vous pouvez vous connecter à votre nom de domaine. Il est préférable d’acheter votre nom de domaine sur Hostinger ou un autre fournisseur, car le choix est assez limité sur Netlify et un peu plus cher que sur d’autres enregistra.

Cliquez sur « Add a domain » et entrez votre nom de domaine. Appuyez ensuite sur « Verify », puis « Add domain ». Les informations à indiquer pour le DNS vont apparaître. Copiez « apex-loadbalancer.netlify.com ».

Revenez sur Hostinger et appuyez sur « Modifier » dans la partie « DNS/serveurs de noms ». Sélectionnez « CNAME » comme type de DNS, collez la « Cible » que Netlify vous a indiquée et cliquez sur « Ajouter ».

La dernière étape consiste à modifier le nom des serveurs indiqués sur votre fournisseur. Une fois les modifications effectuées, cela devra vous diriger vers votre projet Netlify. Votre projet Lovable est maintenant en ligne, avec des noms de domaine personnalisés. Votre site est ainsi fonctionnel et votre URL s’affiche dans la barre d’adresse.

Quelle que soit la méthode que vous choisissez pour mettre en ligne votre site, chacune offre des avantages distincts. De plus, tous deux marchent aussi bien sur Bolt que sur Lovable. À vous de choisir la solution adaptée à vos besoins !