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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
|
+++
author = "Auteur de migration"
categories = ["Hugo", "Jekyll"]
date = "2014-03-10"
description = ""
featured = ""
featuredalt = ""
featuredpath = ""
linktitle = ""
slug = "Migrer vers Hugo depuis Jekyll"
title = "Migrer vers Hugo depuis Jekyll"
type = "posts"
+++
## Déplacez le contenu statique vers `static`
Jekyll a une règle comme quoi tout répertoire qui ne commence pas par `_` sera
copié tel-quel dans le répertoire `_site`. Hugo garde tout le contenu statique
dans le répertoire `static`. Vous devez donc déplacer tout ce type de contenu
là-dedans. Avec Jekylll, l'arborescence ressemblant à ceci :
▾ <root>/
▾ images/
logo.png
<!--more-->
doit devenir
▾ <root>/
▾ static/
▾ images/
logo.png
En outre, vous allez devoir déplacer tous les fichiers présents à la racine vers
le répertoire `static`.
## Créez votre configuration Hugo
Hugo peut lire votre fichier de configuration au format JSON, YAML et TOML. Hugo
supporte également les paramètres de configuration. Plus d'informations sur la
[documentation de configuration Hugo](/overview/configuration/)
## Définiez votre répertoire de publication sur `_site`
La valeur par défaut pour Jekyll est d'utiliser le répertoire `_site` pour
publier le contenu. Pour Hugo, le répertoire de publication est `public`. Si,
comme moi, vous avez [lié `_site` vers un sous-module git sur la branche
`gh-pages`](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.ht
ml), vous allez vouloir avoir quelques alternatives :
1. Changez votre lien du sous-module `gh-pages` pour pointer sur public au lieu
de `_site` (recommendé).
git submodule deinit _site
git rm _site
git submodule add -b gh-pages
git@github.com:your-username/your-repo.git public
2. Ou modifiez la configuration de Hugo pour utiliser le répertoire `_site` au
lieu de `public`.
{
..
"publishdir": "_site",
..
}
## Convertir un thème Jekyll pour Hugo
C'est la majeure partie du travail. La documentation est votre ami.
Vous devriez vous référer à [la documentation des thèmes de Jekyll]
(http://jekyllrb.com/docs/templates/) si vous devez vous rafraîchir la mémoire
sur la façon dont vous avez construit votre blog et [les thèmes de Hugo]
(/layout/templates/) pour apprendre la manière de faire sur Hugo.
Pour vous donner un point de référence, la conversion du thème pour
[heyitsalex.net](http://heyitsalex.net/) ne m'a pris que quelques heures.
## Convertir les extensions Jekyll vers des shortcodes Hugo
Jekyll support les [extensions](http://jekyllrb.com/docs/plugins/); Hugo lui a
les [shortcodes](/doc/shortcodes/). C'est assez banal les porter.
### Implémentation
Comme exemple, j'utilise une extension pour avoir un [`image_tag`](https://githu
b.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc
06908ec/_plugins/image_tag.rb) presonnalisé pour générer les images avec une
légende sur Jekyll. J'ai vu que Hugo implémente un shortcode qui fait exactement
la même chose.
Extension Jekyll :
```
module Jekyll
class ImageTag < Liquid::Tag
@url = nil
@caption = nil
@class = nil
@link = nil
// Patterns
IMAGE_URL_WITH_CLASS_AND_CAPTION =
IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK =
/(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->
((https?:\/\/|\/)(\S+))(\s*)/i
IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
IMAGE_URL = /((https?:\/\/|\/)(\S+))/i
def initialize(tag_name, markup, tokens)
super
if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK
@class = $1
@url = $3
@caption = $7
@link = $9
elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
@class = $1
@url = $3
@caption = $7
elsif markup =~ IMAGE_URL_WITH_CAPTION
@url = $1
@caption = $5
elsif markup =~ IMAGE_URL_WITH_CLASS
@class = $1
@url = $3
elsif markup =~ IMAGE_URL
@url = $1
end
end
def render(context)
if @class
source = "<figure class='#{@class}'>"
else
source = "<figure>"
end
if @link
source += "<a href=\"#{@link}\">"
end
source += "<img src=\"#{@url}\">"
if @link
source += "</a>"
end
source += "<figcaption>#{@caption}</figcaption>" if @caption
source += "</figure>"
source
end
end
end
Liquid::Template.register_tag('image', Jekyll::ImageTag)
```
Écrite en tant que shortcode Hugo:
```
<!-- image -->
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
<img src="{{ .Get "src" }}"
{{ if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt"}}
{{.}}
{{else}}
{{ .Get "caption" }}
{{ end }}"
{{ end }} />
{{ if .Get "link"}}</a>{{ end }}
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>{{ if isset .Params "title" }}
{{ .Get "title" }}{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}<p>
{{ .Get "caption" }}
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
{{ .Get "attr" }}
{{ if .Get "attrlink"}}</a> {{ end }}
</p> {{ end }}
</figcaption>
{{ end }}
</figure>
<!-- image -->
```
### Utilisation
J'ai simplement changé :
```
{% image
full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg
"One of my favorite touristy-type photos. I secretly waited for the
good light while we were "having fun" and took this. Only regret: a
stupid pole in the top-left corner of the frame I had to clumsily get
rid of at post-processing."
->http://www.flickr.com/photos/alexnormand/4829260124/in/
set-72157624547713078/ %}
```
pour cela (cet exemple utilise une version légèrement étendue nommée `fig`,
différente de la `figure` intégrée) :
```
{{%/* fig class="full"
src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg"
title="One of my favorite touristy-type photos. I secretly waited for the
good light while we were having fun and took this. Only regret: a stupid
pole in the top-left corner of the frame I had to clumsily get rid of at
post-processing."
link="http://www.flickr.com/photos/alexnormand/4829260124/in/
set-72157624547713078/" */%}}
```
Comme bonus, les paramètres nommés des shortcodes sont plus lisibles.
## Touches finales
### Corriger le contenu
Suivant le nombre de modifications que vous avez effectué sur chaque articles
avec Jekyll, cette étape requierra plus ou moins d'efforts. Il n'y a pas de
règles rigoureuses ici, si ce n'est que `hugo server --watch` est votre ami.
Testez vos modifications et corrigez les erreurs au besoin.
### Nettoyez le tout
Vous voudrez sûrement supprimer votre configuration Jekyll maintenant que tout
est fini. Exact, pensez à supprimer tout ce qui est inutilisé.
## Un exemple pratique
[Hey, it's Alex](http://heyitsalex.net/) a été migré de Jekyll vers Hugo en
moins de temps qu'une journée père enfant. Vous pouvez trouver toutes les
modification en regardant ce [diff](https://github.com/alexandre-normand/alexand
re-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b
81495423294208cc74d610).
|
