Comment deployer un site web statique sur github?

Qu'est ce qu'u site web statique?

 

C'est simplement un site web constitué uniquement du triplet HTML + CSS+Javascript donc en d'autre parole, le contenu n'est pas genéré dynamiquement par une technologie coté serveur comme ce peut etre PHP, javascript avec nodejs, c# avec asp.net, java avec spring boot ou python avec django etc...

Beaucoup de developpeurs surtout débutant, commencent leur aventure web en apprenant le HTML associé au CSS puis successivement le javascript pour mettre un peu de logicv et des effetes sur le flux de la page HTML, une fois qu'ils ont deja sur la main un site web statique qui contient par exemple leur portofoglio, ils veulent le faire voir aux amis, aux recruteurs etc.. du coup, il faut trouver un hebergement gratuit car rappellons le ici une fois de plus, un site web pour etre disponible et visible par les utilisateurs, doit etre deployer sur un serveur web, donc une machine distante publique accessible par tout le monde sur internet, voila la raison pour laquelle il existe des hebergeur web qui en fait, mettent à la disposition des concepteurs de site web, une machine public dans laquelle ils louent des espace sur le disque dure de cette machine moyennant une somme mensuelle ou annuelle, cependant, s'il s'agit d'un site web purement statique, alors on peut eviter ces hebergeurs couteux parfois en chosissant l'option de deployer notre site statique par exemple sur github avec les github pages ou meme sur firebase, ici dans cet article on vera pas à pas comment le faire avec les github page et je ferai un autre post pour demonter la meme chose avec firebase.

Pour ceux qui ne connaissent pas git et github, j'ai écrit un article simple et accessible à tous ici

J'avais dejà dans un article en parlant du concept des PWA(progressive web app), parlé du deployement d'un site web statique avec firenase ici

Pour cette demo, j'ai mis pour vous un site web statique sur mon google drive ici à telecharger pour suivre ce tutoriel

Comme vous le voyez, le contenu de ce fichier zip contient uniquement un site web statique, et si vous cliquer sur index.html, la page principale vous verez que c'est juste un simple site web, nous allons le deployer sur github pour le rendre visible à tous pour cela :

allez sur github et créer un depotoire(repository en anglais) comme suit:

en ouvrant github.com si vous etes dejà identifié, vous pouvez créer un repository en allant ici comme sur l'image en rouge

ou vbien vous allez sur votre profil à droite en haut comme sur l'image suivante et cliquez sur "Your repositories"

et puis successivement sur "New" comme en rouge sur l'image suivante

Je cree mon site web que j'appelle en 1 MonBeauSiteWEb et je met une description en 2 si je veux puis mon site web doit etre public comme en 3

Je descend rapidement loin en bas sans rien modifié et je clique sur "create repository" comme dans l'image suivante 

Voilà c'est fait Github me sugère immediatement tout ce que je dois faire et nous allons le faire pas à pas..

 

si vous utiliser mon site web telechargé plus haut sur mon google drive, alors le mien actuellement sur ma machine se trouve sur le chemin suivant: "C:Usersjpierre.deffofotsoDownloadsDemoSiteWebGithubhtml", comme je suis sur windwos 10, je cherche powershell (tappez powershell dans la barre de recherche de windows)

Je tappes cd "le chemin de mon repertoire ou il y a mon site web" comme en image

Je suis actuellement poitioné en ligne de commande dans le repertoire ou il y a mon site web que je veux publié sur github

Je peux donc maintenant tappé 1 à 1  toutes les commandes que m'a sugéré github et que je copie une fois de plus ici:

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Defcoq/MonBeauSiteWeb.git
git push -u origin main

 

Première commande c'est git init

deuxième commande (attention, j'ai mis un point après add pour que git prend tout ce qui est dans le repertoire)  git add .

troisième commande je tappes git commit -m "first commit"

Quatrième commande je tappes : git branch -M main

Cinquième commande je tappes : git remote add origin https://github.com/Defcoq/MonBeauSiteWeb.git

sixième et dernier commande : git push -u origin main

Eh voilà, à présent, si vous faite une mise à jour de votre depotoire sur github, votre site web se trouve deployé sur github comme dans l'image suivante:

Dans votre depotoire, clquez sur settings comme en image:

Allez sur le menu Pages en 1, puis dans le menu deroulant en 2 selectionné main en 3 puis save pour sauveguarder en 4

remettez la page à jour et c'est fait, vous obtenez le lien de votre nouveau site web que vous pouvez partagez à vos amis, le mien c'est le suivant : https://defcoq.github.io/MonBeauSiteWeb/

 

Voila c'etait bien simple et rapide.

Abbonnez vous massivement au blog.

Happy coding

 

---

---

Share

Comments (2)

Leave A Comment

Your Name:
Comment: