Vous avez déjà créé votre portfolio et vous souhaitez l'héberger gratuitement pour le partager facilement . vous avez trouvé le bon article, dans les quelques lignes suivantes nous verrons comment héberger un site web statique gratuitement sur github en l'occurrence un portfolio sur github.

GitHub

Selon Wikipédia github est un service web d'hébergement et de gestion de développement de logiciels, utilisant le logiciel de gestion de versions Git. En d'autres termes github est un service qui vous permet d'héberger vos codes sources gratuitement en utilisant le système de versioning git.

Si vous ne connaissez pas git et le versioning de code vous pouvez faire un tour ici et ici.

Dans cet article nous considérons que vous avez un minimum de connaissances de git et github, nous n'aborderons donc pas en profondeur les actions git et github indirectement liées à la publication d'un site sur github.

Creation d'un projet

Pour commencer il faut que le code source de votre projet soit hébergé sur github(ce qui est souvent le cas puisque github est le plus utilisé dans l'hébergement de code source gratuitement), nous allons donc aller sur github et appuyer sur le bouton nouveau projet (ou simplement new en anglais). si vous avez déjà un dépôt sur github vous pouvez directement sauter à l'étape suivante.

Dans le formulaire presenter on va remplir le nom du projet, pour mon cas c'est "portfolio", fournir une description si vous le souhaitez et laisser le projet en public puis on laisse les autres options par défaut(sauf si vous savez ce que vous faites) et appuyez sur créer le dépôt.

Si tout s'est bien passé et que github ne vous bloque pas en vous indiquant une erreur sur un champ donner vous devriez avoir un nouveau dépôt de code destiner à accueillir le code source de votre projet créer. vous tombez alors sur une page comme ou proche de celle ci-dessous.

Gardons cette page de côté et ouvrons notre projet local sur notre éditeur de code favori (pour mon cas c'est vs code).

Comme vous pouvez le remarquer c'est juste un simple fichier HTML avec quelques assets dans d'autres quatre autres dossiers. Nous allons donc d'abord lier ce projet local à celui sur github puis envoyer notre code course sur le dépôt distant.

Lier le projet local a github(dépôt distant)

Pour cela ouvrez le terminal de votre éditeur(ou un autre terminal) et assurez-vous d'être bel et bien sur le dossier contenant votre projet

À partir de la rentrer sur votre fenêtre github mise de coté précédemment et copier les commandes bash présent en appuyant sur le bouton prévu à cet effet, rapportez-vous à l'image ci-dessous

Rentrez dans votre terminal et coller ces lignes, il vous sera peut-être nécessaire de valider la dernière ligne en appuyant sur la touche ENTER de votre clavier et si tous se passent bien votre projet local et maintenant lier au dépôt distant sur github.

Envoyer le code source sur le dépôt distant

Maintenant pour envoyer tout notre code source sur github il nous faut taper trois commandes:

1.

git add .

pour indiquer qu'on veut que git suivent l'ensemble de nos fichiers dans le dossier actuel

2.

git commit -m "message de la version ou etat du projet"

indique qu'on veut capturer cette version de notre projet, l'option -m indiquant le message qu'on veut associer à cette version-là. les commis sont utilisés pour capturer l'état d'un projet à un point dans le temps

3.

git push

couramment utilisée pour publier des changements locaux et les charger vers un dépôt distant.

Déployer son dépôt comme site web accessible

Je spécifie que seuls les fichiers statiques sont hébergés par github.io, n'envisagez pas d'héberger un site web en php ou java sur ce dernier !

Pour activer l'hébergement, ouvrez simplement la page Github de votre projet, cliquez sur l'onglet "Réglages" en haut à droite.

Une fois les options affichées, faites défiler jusqu'à l'insert "Github Pages" tel qu'indiqué dans la capture d'écran ci-dessous.

Et ensuite vous tombez sur cette page

Comme vous le pouvez le remarquer la source est defini par défaut sur "None", il vous suffit de sélectionner "main"(la branche main) puis laissez "root" et appuyer sur "enregistrer" pour que votre repo Github soit hébergé sur github.io !

L'adresse vous sera indiquée par la notification de création(comme encercle en rouge sur l'image ci-dessus) mais globalement l'adresse suivra la forme: https://nomutilisateur.github.io/repos/:

• nomutilisateur: représente votre nom d'utilisateur github
• repos: représente le nom de votre dépôt github

Tester

Vous pouvez tester que ça fonctionne en allant à l'adresse indiquée sur la page "github pages", pour mon cas https:/vanotis.github.io/portfolio/ sert bel et bien mon portfolio:

Comme vous pouvez le constater, il n'est pas très compliqué de déployer un site web statique sur github, profitez-en pour déployer une démo consultable par le grand public pour chacun de vos projets vous en offrant la possibilité.

Noter qu'il est possible d'aller plus loin en customisant votre propre nom de domaine pour n'est plus avoir le github.io présent dans vos liens. j'aborderai ce sujet dans un prochain article.

Vous avez aimé cet article ? laissez-moi un commentaire ou Alors suivez-moi sur mes reseaux: Facebook et Linkedin !

Intéresser à intégrer un canal des développeurs ? rejoins-nous ici

A bientôt !