Migrer vers Hugo depuis Jekyll
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
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
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 :
-
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
-
Ou modifiez la configuration de Hugo pour utiliser le répertoire
_site
au lieu depublic
.{ .. "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 ne m’a pris que quelques heures.
Convertir les extensions Jekyll vers des shortcodes Hugo
Jekyll support les extensions; Hugo lui a les 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 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).