1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
---
title: Utiliser les pages GitHub
slug: Learn/Common_questions/Using_Github_pages
tags:
- Débutant
- GitHub
- Guide
- Web
- git
translation_of: Learn/Common_questions/Using_Github_pages
original_slug: Apprendre/Utiliser_les_pages_GitHub
---
<p><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p>
<h2 id="Publier_du_contenu">Publier du contenu</h2>
<p>GitHub est un outil très populaire et important à l'heure actuelle. Git est <a href="http://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-%C3%80-propos-de-la-gestion-de-version">un logiciel de gestion de version</a> reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : <a href="https://pages.github.com/">les pages GitHub</a>. Celles-ci vous permettent de publier un site web sur Internet.</p>
<h3 id="Mettre_en_place_Git_et_un_compte_GitHub">Mettre en place Git et un compte GitHub</h3>
<ol>
<li>Tout d'abord, <a href="http://git-scm.com/downloads">installez Git</a> sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.</li>
<li>Ensuite, <a href="https://github.com/join">inscrivez-vous sur GitHub</a>. La procédure est plutôt simple.</li>
<li>Une fois inscrit, connectez vous à <a href="https://github.com">github.com</a> avec votre nom d'utilisateur et votre mot de passe.</li>
</ol>
<div class="note">
<p><strong>Note :</strong> Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.</p>
</div>
<h3 id="Préparer_le_code_afin_de_l'envoyer_vers_GitHub">Préparer le code afin de l'envoyer vers GitHub</h3>
<p>Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé <code>index.html</code>.</p>
<p>Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :</p>
<ol>
<li>Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé <code>test-site</code>, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande <code>cd</code> (qui signifie « <em>change directory</em> » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme <code>test-site</code>, vous pourrez taper :
<pre class="brush: bash">cd Bureau/test-site</pre>
</li>
<li>Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git :
<pre class="brush: bash">git init</pre>
</li>
</ol>
<h4 id="Un_aparté_sur_les_interfaces_en_ligne_de_commande">Un aparté sur les interfaces en ligne de commande</h4>
<p>La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :</p>
<p><img alt="Interface en ligne de commande" src="commande.png"></p>
<div class="note">
<p><strong>Note :</strong> Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p>
</div>
<p>Chaque système d'exploitation possède sa propre interface en ligne de commande :</p>
<ul>
<li><strong>Windows</strong> : <strong>l'invite de commande</strong>. Celle-ci peut être lancée en utilisant la touche Windows et en tapant <em>Invite de commande</em> avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera <code>\</code> pour indiquer un sous-répertoire alors que Linux et OS X utiliseront <code>/</code>).</li>
<li><strong>OS X</strong> : <strong>le terminal</strong>. On le trouvera dans <em>Applications > Utilitaires</em>.</li>
<li><strong>Linux</strong> : Généralement, on peut lancer un terminal avec le raccourci clavier <em>Ctrl + Alt + T</em>. Si cela ne fonctionne pas, recherchez <strong>Terminal</strong> dans les applications ou via les outils de recherche.</li>
</ul>
<p>La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.</p>
<h3 id="Créer_un_dépôt_sur_GitHub_pour_votre_code">Créer un dépôt sur GitHub pour votre code</h3>
<ol>
<li>Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option <em>New Repository</em> (qui signifie « Créer un nouveau dépôt »).</li>
<li>Sur la page qui s'affiche, dans le champ « <em>Repository name</em> », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir <em>mon-premier-depot</em>.</li>
<li>Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :<br>
<img alt="" src="create-new-repo.png"></li>
<li>Ensuite, cliquez sur « <em>Create repository</em> » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :<br>
<img alt="" src="github-repo.png"></li>
</ol>
<h3 id="Envoyer_vos_fichiers_vers_GitHub">Envoyer vos fichiers vers GitHub</h3>
<ol>
<li>Sur cette page, une section vous intéresse particulièrement : « <em>…or push an existing repository from the command line</em> » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à :
<pre>git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git</pre>
</li>
<li>Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action.
<pre class="brush: bash">git add --all
git commit -m 'ajout des fichiers au dépôt'</pre>
</li>
<li>Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub :
<pre class="brush: bash">git push -u origin master</pre>
</li>
<li>Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une <em>branche</em> <code>gh-pages</code> sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « <em>Branch: <strong>master</strong></em> » (GitHub indique que vous êtes sur la branche <code>master</code> de votre dépôt). Dans la liste qui s'affiche, saisissez le texte <strong>gh-pages</strong> puis cliquez sur <em>Create branch: gh-pages</em> (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera <em>nom-utilisateur.github.io/nom-du-depot</em>. Dans mon exemple, l'URL est donc <em>https://chrisdavidmills.github.io/my-repository</em>. La page qui est affichée à cette URL est la page <code>index.html</code> contenue dans le dépôt.<br>
<img alt="" src="repo-site.png"></li>
<li>Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)</li>
</ol>
<div class="note">
<p><strong>Note :</strong> Si vous êtes bloqué-e, n'hésitez pas à utiliser <a href="https://pages.github.com/">la page d'aide GitHub sur les pages GitHub</a> qui est une excellente ressource (en anglais).</p>
</div>
<h3 id="Aller_plus_loin_avec_Git_et_GitHub">Aller plus loin avec Git et GitHub</h3>
<p>Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :</p>
<pre>git add --all
git commit -m 'Un autre commit'
git push</pre>
<p>Vous pouvez utiliser un autre message que « un autre commit » pour indiquer les changements que vous avez effectués.</p>
<p>Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les <a href="https://help.github.com/index.html">pages d'aide de GitHub</a> (en anglais) ou encore <a href="http://git-scm.com/book/fr/v1">le manuel Pro Git</a> (en français).</p>
|
