Tous les langages informatiques à partir de 0

Note: pour ouvrir un article, cliquez sur le titre. Vous pouvez cliquer sur les boutons pour filtrer par catégorie, ou bien faire une recherche pour nom d’article spécifique.

Comment héberger un site web facilement avec GitHub

Comment héberger un site web facilement en quelques minutes, c’est très simple avec Github. Pour cet article, vous n’avez pas besoin que de deux choses (choses que nous allons créer dans cet article):

  • Un site web
  • Un compte Github

Nous allons commencer par la création de notre site web, qui ne sera qu’une petite page HTML avec du CSS.

Création des fichiers

Normalement si vous avez trouvé cet article, vous devriez déjà avoir un site web prêt à être déployé. Cependant, au cas où vous n’en auriez pas un, voici un fichier HTML et CSS.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Voilà pour le fichier HTML, maintenant voici le petit fichier CSS que nous allons utiliser.

CSS
body { color: red; }

Bien entendu, votre projet sera bien plus grand que le mien, cela n’a aucune importance. Gardez juste en tête que cette méthode d’hébergement fonctionne uniquement pour les sites statiques. Cela veut dire que si vous voulez héberger un site e-commerce, un blog ou tout autre contenu dynamique, ça ne marchera pas.

Maintenant que vous avez votre projet, il ne reste plus qu’à créer votre compte GitHub.

Héberger un site sur GitHub

La première chose à faire est de créer notre compte GitHub.

Création du compte GitHub

Commencez par vous rendre sur le site de Github.

Héberger un site - Création du compte GitHub

Bien que le site soit en anglais, il suffit d’entrer votre pseudo, votre e-mail et un mot de passe.

Hébergement du site

Ensuite, cliquez sur la petite croix dans le coin supérieur droit du site, cela va nous permettre de créer le dossier où notre site sera stocké.

Héberger un site - Création du repo

Maintenant, vous allez devoir faire attention, le nom de votre dossier doit être comme ceci: <votrePseudo>.github.io. Donc pour moi, le nom sera aolland.github.io.

Héberger un site - Création du repo sur GitHub

Une fois que le dossier est créé, il ne reste plus qu’à envoyer nos fichiers sur Github, il existe plusieurs façons de faire ça mais nous allons prendre la plus simple. C’est à dire que nous allons directement hébergé les fichiers au lieu de passer par l’invité de commande, aucune installation requise.

Héberger un site - Ajout des fichiers

Cliquez sur le lien et glisser tous vos fichiers à l’intérieur du cadre en pointillé (tout ce qui se trouve dans le dossier (à la racine) et non le dossier), puis sauvegardez vos changements tout en bas sur le bouton ‘Commit Changes’.

Et voilà, votre site est maintenant hébergé avec succès, vous pouvez le retrouver en écrivant l’adresse que vous avez entré plus tôt (<votrePseudo>.github.io) ou en allant dans les paramètres de votre dossier, c’est au choix.

Conclusion

A noter que les changements peuvent prendre entre 1 et 20 minutes pour s’afficher, donc avant de vous plaindre, attendez!

De plus, si vous n’avez pas d’idée pour votre site, vous pouvez toujours visiter HTML5UP.

Le site est à nouveau en ligne! Les pages de connexion et d'inscription fonctionnent, cependant elles ne sont pas encore stylisées. Certaines traductions peuvent manquer!
+