Comment créer un site Web sur les pages GitHub : 12 étapes (avec photos)

Table des matières:

Comment créer un site Web sur les pages GitHub : 12 étapes (avec photos)
Comment créer un site Web sur les pages GitHub : 12 étapes (avec photos)

Vidéo: Comment créer un site Web sur les pages GitHub : 12 étapes (avec photos)

Vidéo: Comment créer un site Web sur les pages GitHub : 12 étapes (avec photos)
Vidéo: Tuto Graver un Film sur un CD/DVD 2024, Avril
Anonim

GitHub Pages est un excellent moyen de créer votre propre site personnel à partir de zéro. Il est entièrement gratuit et ne nécessite qu'un compte GitHub. Notez, cependant, que GitHub Pages n'offre pas la conception la plus conviviale pour créer des sites Web (contrairement à Wix ou Squarespace), mais c'est un excellent moyen d'acquérir de l'expérience avec HTML/CSS/JS et tous les éléments d'un site Web. Ce wikiHow vous montrera comment commencer.

Pas

Créer un site Web sur les pages GitHub Étape 1
Créer un site Web sur les pages GitHub Étape 1

Étape 1. Créez un compte sur GitHub, si vous n'en avez pas encore

Avant de pouvoir créer votre propre site Web sur les pages GitHub, vous devez créer un compte sur GitHub. Si vous avez déjà un compte sur GitHub, assurez-vous de vous connecter. Les deux sont accessibles à partir de la barre d'outils en haut à droite.

Créer un site Web sur les pages GitHub Étape 2
Créer un site Web sur les pages GitHub Étape 2

Étape 2. Créez un référentiel sur GitHub.

Assurez-vous de nommer le référentiel "[votre nom d'utilisateur GitHub ici].github.io". Cela initialisera votre site Web GitHub.

Méthode 1 sur 2: Utilisation d'un éditeur de code

Créer un site Web sur les pages GitHub Étape 3
Créer un site Web sur les pages GitHub Étape 3

Étape 1. Téléchargez le bureau GitHub, si vous ne l'avez pas déjà installé

L'installation du bureau GitHub est aussi simple que d'aller sur https://desktop.github.com/ et de cliquer sur le gros bouton violet "Télécharger". Ensuite, lancez le programme d'installation. Ceci est nécessaire pour pousser les modifications vers votre référentiel.

Créer un site Web sur les pages GitHub Étape 4
Créer un site Web sur les pages GitHub Étape 4

Étape 2. Installez un éditeur de code

Vous en avez besoin pour obtenir la coloration syntaxique sur GitHub. Les choix populaires incluent Atom, Visual Studio Code, Sublime Text et Notepad ++, compte tenu de leur sensation riche en fonctionnalités et minimaliste. Après avoir installé un éditeur de code, vous êtes prêt à commencer.

Créer un site Web sur les pages GitHub Étape 5
Créer un site Web sur les pages GitHub Étape 5

Étape 3. Créez un fichier appelé "index.html"

Vous pouvez le faire dans votre éditeur de code ou en ligne. Vous pouvez également accéder à l'emplacement de votre référentiel sur votre disque dur et créer un fichier "index.html" dans le dossier du référentiel sur votre disque.

Créer un site Web sur les pages GitHub Étape 6
Créer un site Web sur les pages GitHub Étape 6

Étape 4. Ajoutez votre code HTML

Vous devrez apprendre le HTML pour pouvoir coder une page Web de base. Il vous sera également utile d'apprendre CSS et JavaScript afin de pouvoir ajouter du style et des fonctionnalités à votre page Web.

N'oubliez pas d'enregistrer le fichier

Créer un site Web sur les pages GitHub Étape 7
Créer un site Web sur les pages GitHub Étape 7

Étape 5. Validez les modifications

Retournez sur le bureau GitHub et cliquez sur le bouton bleu Valider en maître. Cliquez ensuite sur Push Origin. Cela téléchargera les modifications sur GitHub.

Si vous envisagez d'apporter d'autres modifications, vous souhaiterez également extraire l'origine. Cliquez sur le bouton Pull origin sur le bureau GitHub pour télécharger le dernier commit sur votre machine

Créer un site Web sur les pages GitHub Étape 8
Créer un site Web sur les pages GitHub Étape 8

Étape 6. Affichez votre page Web

Accédez à "[votre nom d'utilisateur GitHub ici].github.io" dans un navigateur Web. Vous devrez peut-être contourner le cache de votre navigateur en maintenant la touche Ctrl ou Commande enfoncée tout en cliquant sur le bouton d'actualisation pour afficher la nouvelle page Web.

Méthode 2 sur 2: Utilisation de GitHub en ligne

Créer un site Web sur les pages GitHub Étape 9
Créer un site Web sur les pages GitHub Étape 9

Étape 1. Créez un fichier appelé "index.html"

Cliquez sur Ajouter un fichier puis sur Créer un nouveau fichier. Cela ouvrira un éditeur de fichiers. Ajoutez "index.html" au champ "Nommez votre fichier".

Créer un site Web sur les pages GitHub Étape 10
Créer un site Web sur les pages GitHub Étape 10

Étape 2. Ajoutez votre code HTML

Vous devrez apprendre le HTML pour pouvoir coder une page Web de base. Il vous sera également utile d'apprendre CSS et JavaScript afin de pouvoir ajouter du style et des fonctionnalités à votre page Web.

N'oubliez pas d'enregistrer le fichier

Créer un site Web sur les pages GitHub Étape 11
Créer un site Web sur les pages GitHub Étape 11

Étape 3. Validez les modifications

Cliquez sur le bouton vert Valider le nouveau fichier pour enregistrer le fichier sur GitHub.

Créer un site Web sur les pages GitHub Étape 12
Créer un site Web sur les pages GitHub Étape 12

Étape 4. Affichez votre page Web

Accédez à "[votre nom d'utilisateur GitHub ici].github.io" dans un navigateur Web. Vous devrez peut-être contourner le cache de votre navigateur en maintenant la touche Ctrl ou Commande enfoncée tout en cliquant sur le bouton d'actualisation pour afficher la nouvelle page Web.

Des astuces

  • Pour ajouter des sous-pages, créez simplement un nouveau dossier sur GitHub et ajoutez un fichier "index.html" dans ce dossier.
  • Si vous enregistrez un nom de domaine, vous pouvez faire en sorte que les pages GitHub utilisent ce nom de domaine au lieu du nom par défaut.
  • Les référentiels de pages GitHub doivent être publics, sauf si vous avez un compte premium.

Conseillé: