-
Notifications
You must be signed in to change notification settings - Fork 0
/
publier-github.html
137 lines (124 loc) · 8.05 KB
/
publier-github.html
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset=utf-8 />
<title>
Narval
</title>
<meta name="author" content="Ench" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://narvalblog.github.io/RSSfeed.xml" rel="alternate" type="application/rss+xml" title="News for Narval" />
<link rel="canonical" href="https://narvalblog.github.io" />
<link rel="icon" href="https://narvalblog.github.io/themes/Minival/favicon.ico" />
<link rel="stylesheet" type="text/css" href="https://narvalblog.github.io/themes/Minival/base.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Alegreya:400,700|Raleway" rel="stylesheet">
<meta name="description" content="Comment publier son blog Narval sur Github, pas à pas." />
</head>
<body>
<div class="container">
<header>
<h1><a href="https://narvalblog.github.io/index.html">Narval</a></h1>
<p>Générateur de blog statique.</p>
<nav>
<ul>
<a href="https://narvalblog.github.io/index.html"><li>Accueil</li></a>
<a href="#" id="bt1"><li class="menu withSubmenu">Categories</li></a>
<a href="#" id="bt2"><li class="menu withSubmenu">Pages</li></a>
<a type="application/rss+xml" href="https://narvalblog.github.io/RSSfeed.xml"><li>RSS</li></a>
</ul>
<ul class="submenu" id="categories">→
<a style="background:rgb(230, 230, 230);" class="tag" href="https://narvalblog.github.io/divers/index.html">Divers</a>
<a style="background:rgb(233, 206, 206);" class="tag" href="https://narvalblog.github.io/documentation/index.html">Documentation</a>
</ul>
<ul class="submenu" id="pages">→
<a class="tag" href="https://narvalblog.github.io/a-propos.html">À propos</a>
<a class="tag" href="https://narvalblog.github.io/archives.html">Archives</a>
</ul>
</nav>
</header>
<article itemscope itemtype="http://schema.org/BlogPosting">
<header><h1>Publier son blog sur Github</h1></header>
<div class="metas">
<time itemprop="dateCreated" datetime="2017-12-31T22:05:00.000000+00:00">31 décembre 2017</time>
<a class="tag" style="background:rgb(233, 206, 206)" href="https://narvalblog.github.io/documentation/index.html">Documentation</a>
</div>
<div itemprop="about"><p>Voyons ici comment mettre en ligne son blog <em>Narval</em> sur les serveurs de <em>Github</em>.</p></div>
<div class="content"><h2>1. <em>Git</em></h2>
<p><em>Github</em> fonctionne avec <em>Git</em> qui est un logiciel de gestion de versions décentralisé. Avec cet outil, il est possible de gérer facilement les versions d’un dossier et son contenu. Cela n’est pas très utile pour ton blog, mais <em>Github</em> est à la base fait pour les développeurs ayant besoin de ce genre d’outil. <em>Narval</em> ne permet d’ailleurs pas de gérer les versions de ton blog, puisqu’il écrase tous les fichiers à chaque fois que tu reconstruis ton blog avec la commande <code>python3 build.py</code>. Ce n’est pas un problème, car si tu souhaites versionner ton blog, il convient plutôt de le faire sur le dossier <span class="path">content/</span>, mais ne nous égarons pas.</p>
<p>Tu as donc tout d’abord besoin de <em>Git</em>. Si tu l’as déjà, la commande <code>git --version</code> dans un terminal affichera le numéro de version. Sinon, <a href="https://git-scm.com/book/fr/v1/D%C3%A9marrage-rapide-Installation-de-Git">cette page</a> indique la marche à suivre pour l’installer.</p>
<h2>2. <em>Github</em></h2>
<h3>Inscription sur <em>Github</em></h3>
<p>C’est ici que l’inscription se passe : <a href="https://github.com/">https://github.com/</a>.</p>
<p>L’inscription est facile, mais il faut faire attention à une chose : <strong>le nom d’utilisateur choisi figurera dans l’adresse URL du blog</strong>(https://username.github.io). Choisis donc bien ton nom d’utilisateur. Il te sera demandé si tu veux un compte gratuit ou payant. Le compte gratuit est suffisant pour l’usage que tu en auras et, si besoin, tu pourras passer à un compte payant plus tard sans soucis.</p>
<p><img src="attachments/github/1.png" alt="Page d’inscription sur Github."/></p>
<h3>Création d’un nouveau dépôt</h3>
<p>Une fois inscrit et connecté, tu crées un nouveau dépôt qui accueillera les fichiers et dossiers de ton blog. Pour ce faire, clique sur « Start a project » ou « New repository ».</p>
<p>Le nom du dépôt se compose de ton nom d’utilisateur suivi de « .github.io ». Dans le champ « Repository name » indique donc « <em>username</em>.github.io ».<p>
<p>Voilà, tu peux alors laisser le reste tel quel et cliquer sur « Create repository ». Facile !</p>
<p><img src="attachments/github/2.png" alt="Création d’un dépôt sur Github."/></p>
<h2>3. Blog</h2>
<p>Dans le dossier <span class="path">content/</span> de ton blog se trouve le fichier <span class="path">CONFIG</span>. Pour la clef <code>url</code>, met la valeur <code>https://<em>username</em>.github.io</code> si ce n’est pas déjà fait.</p>
<p>Ensuite, il faut générer le blog avec la commande <code>python3 build.py</code> (voir <a href="/documentation-complete.html">la documentation</a> si besoin).</p>
<p>Enfin, il faut se placer dans le dossier du blog généré (pas le <span class="path">-local</span>, l’autre qui porte le même non, sans le suffixe « -local ») et saisir plusieurs commandes dans le terminal :</p>
<ol>
<li><code>git init</code>, qui permet d’initialiser <em>Git</em> dans le dossier du blog à mettre en ligne;</li>
<li><code>git add .</code>, pour prendre en charge tous les fichiers du blog dans le versionnage;</li>
<li><code>git commit -m "maj"</code>, pour réaliser une version avec un message à choisir (ici « maj », mais ce message n’a aucune importance dans notre cas);</li>
<li><code>git remote add origin https://github.com/<em>username</em>/<em>username</em>.github.io.git</code>, pour que les enregistrements se fassent au bon endroit sur <em>Github</em>;</li>
<li><code>git push -u origin master</code>, pour mettre en ligne la ou les versions créées précédemment.</li>
</ol>
<p>Suite à cette dernière commande, il te sera demandé ton nom d’utilisateur, puis ton mot de passe <em>Github</em>.</p>
<p>Cette série de commande n’est pas à resaisir dans son intégralité à chaque fois qu’un nouvel article est à publier, car <em>Narval</em> conserve l’initialisation de <em>git</em> et est toujours synchronisé avec <em>Github</em> (à moins que tu aies supprimé le dossier généré manuellement, ce qui est déconseillé, car peu pratique). Du coup, pour chaque nouvel article, voici ce qu’il faut saisir dans le dossier fraîchement regénéré :</p>
<ol>
<li><code>git add .</code>;</li>
<li><code>git commit -m "maj"</code>;</li>
<li><code>git push origin master</code>.</li>
</ol>
<p>Une prochaine mise à jour permettra la publication directe du blog, dès sa génération. Cela permettra de ne plus avoir à saisir ces 3 commandes dans le dossier généré.</p>
<p>Félicitations, ton blog est en ligne !</p></div>
</article>
<a class="btNav" href="https://narvalblog.github.io/index.html">Accueil</a>
<br><a href='documentation-complete.html'>← Documentation complète</a>
<footer>
<p>
<small>
Blog de Ench, généré avec <em>Narval</em>.
<br>
Dernière modification le 01 janvier 2018.
</small>
</p>
</footer>
<script>
const
categories = document.getElementById('categories'),
pages = document.getElementById('pages'),
bt1 = document.getElementById('bt1'),
bt2 = document.getElementById('bt2')
function showCategories() {
categories.style.display = 'block'
pages.style.display = 'none'
}
function showPages() {
pages.style.display = 'block'
categories.style.display = 'none'
}
bt1.addEventListener('click', function(e) {
e.preventDefault()
showCategories()
}, false)
bt2.addEventListener('click', function(e) {
e.preventDefault()
showPages()
}, false)
bt1.addEventListener('touchstart', function(e) {
e.preventDefault()
showCategories()
}, false)
bt2.addEventListener('touchstart', function(e) {
e.preventDefault()
showPages()
}, false)
</script>
</div>
</body>
</html>