Article original : How to Publish an HTML Website on Netlify or GitHub Pages
Par Vasyl Lagutin
Vous avez terminé la création de votre site web HTML et vous êtes fier de votre travail. Mais il manque une chose : vous ne savez pas comment publier votre site web.
Dans ce tutoriel, vous apprendrez à publier un site web HTML en utilisant deux plateformes populaires – Netlify et GitHub.
Avant de commencer, assurez-vous d'avoir un compte GitHub car vous devrez héberger votre dépôt (votre code source) sur GitHub. Sans cela, vous ne pourrez pas publier votre site web HTML en suivant ce tutoriel.
Comment publier un site web sur Netlify
La première méthode que nous allons explorer est comment publier votre site web sur Netlify.
Netlify est une plateforme d'hébergement de sites web. Il est facile d'héberger des sites sur Netlify car vous n'avez pas besoin de le configurer manuellement – et surtout, c'est gratuit. Si vous n'avez pas encore créé de compte, c'est le moment de le faire.
Voici le processus étape par étape pour publier votre site web sur Netlify :
Étape 1 : Ajoutez votre nouveau site
Une fois connecté, vous serez redirigé vers un tableau de bord. Cliquez sur le bouton New site from git pour ajouter votre nouveau site web à Netlify.
Étape 2 : Liez à votre GitHub
Lorsque vous cliquez sur le bouton New site from git, vous serez redirigé vers la page "Create a new site". Assurez-vous d'avoir poussé votre dépôt sur GitHub afin que Netlify puisse se lier à votre compte GitHub.
Cliquez sur le bouton GitHub comme montré dans la capture d'écran ci-dessous :
Étape 3 : Autorisez Netlify
Ensuite, cliquez sur le bouton Authorize Netlify by Netlify. Cette autorisation est nécessaire pour que Netlify et GitHub puissent se connecter.
Étape 4 : Sélectionnez votre dépôt
Une fois que vous avez accordé l'autorisation à Netlify, vous pouvez voir une liste de tous vos dépôts. Sélectionnez votre site web à publier. Vous pouvez le trouver en faisant défiler la liste ou en utilisant la barre de recherche pour affiner la liste.
Étape 5 : Configurez vos paramètres
Après avoir sélectionné votre site web, vous serez invité à configurer les paramètres pour déployer le site web. Comme votre site web est simplement statique, il n'y a pas grand-chose à faire ici. Cliquez simplement sur Deploy site pour continuer.
Étape 6 : Publiez votre site web
Votre site web est maintenant prêt à être publié ! Netlify fera le reste du travail pour vous, et cela ne prendra qu'une minute ou deux pour terminer le processus.
Maintenant, c'est fait ! Votre nouveau site web est publié, et vous pouvez le consulter en cliquant sur le lien vert.
Pour l'instant, votre URL semble aléatoire, mais vous pouvez la modifier en cliquant sur le bouton Site settings puis sur le bouton Change site name.
Félicitations pour la publication de votre premier nouveau site web ! Maintenant, nous allons apprendre à publier un site web avec GitHub.
Comment publier un site web sur GitHub
La deuxième méthode que nous allons examiner utilise GitHub pour publier votre site. GitHub est une plateforme pour stocker, suivre et gérer le code source des projets. C'est également là que vous pouvez publier votre site web HTML – et comme Netlify, c'est gratuit de l'héberger ici.
Voici le processus étape par étape pour publier votre site web sur GitHub :
Remarque : Vous ne pouvez publier votre site web sur GitHub que si vous définissez la visibilité du dépôt sur public. Si vous souhaitez déployer un site web alors qu'il est privé, mettez à niveau votre compte vers Pro ou utilisez Netlify pour l'héberger à la place.
Étape 1 : Allez dans le dépôt de votre site web
Après vous être connecté, allez dans le dépôt sur la barre latérale de gauche et sélectionnez celui que vous souhaitez publier.
Étape 2 : Sélectionnez les paramètres
Dans votre dépôt, cliquez sur le lien Settings, et vous serez redirigé vers la page des paramètres du dépôt.
Étape 3 : Allez dans GitHub Pages
Lorsque vous êtes dans les paramètres du dépôt, faites défiler un peu vers le bas jusqu'à ce que vous voyiez le lien Pages dans la barre latérale de gauche. Cliquez dessus, et cela vous mènera à GitHub Pages.
Étape 4 : Sélectionnez la branche
Dans la section source, cliquez sur le menu déroulant et sélectionnez la branche master et enregistrez-la. Selon la manière dont vous la nommez, elle peut être master ou main.
Étape 5 : C'est tout
Et c'est tout ! Votre site web sera publié, et cela ne prendra qu'une minute ou deux pour terminer le processus. Actualisez la page, et vous verrez un lien vers votre nouveau site web publié.
Conclusion
J'espère que vous avez trouvé ce tutoriel utile. Vous avez appris à publier votre site web HTML avec Netlify et GitHub. Maintenant, vous pouvez aller de l'avant et montrer au monde votre travail incroyable.
Si vous cherchez à en apprendre davantage sur le développement web moderne, je vous invite à rejoindre mon Cours Full-Stack JavaScript ou à lire plus d'articles sur JS, HTML et CSS sur mon blog de programmation.