Migrer de WordPress vers Jekyll – partie 2

Quelques manipulations et fonctionnalités qu’il est bon d’utiliser avec Jekyll :

  • Utilisation d’un nom de domaine avec GitHub Pages
  • Commentaires avec Disqus
  • Flux RSS
  • SEO

Nom de domaine

Créer un fichier CNAME avec un seul nom de domaine à la racine du dépôt.

Si votre fichier CNAME contient domain-name.com, www.domain-name.com redirigera vers domain-name.com.

Si votre fichier CNAME contient www.domain-name.com, domain-name.com redirigera vers www.domain-name.com.

Concernant l’enregistrement DNS, il est possible de choisir un ALIAS/ANAME vers http://username.github.io ou un enregistrement A vers les IP 192.30.252.153 et 192.30.252.154.

Chez OVH, je n’ai réussi à le faire fonctionner qu’avec l’enregistrement A. Un collègue chez 1&1 a rencontré le même soucis.

GitHub – Setting up an apex domain and www subdomain

Commentaires avec Disqus

Jekyll permet de générer des sites statiques, il faut donc confier la gestion des commentaires à un service tiers. Dans l’univers Jekyll, le fournisseur de service le plus utilisé est Disqus.

1 – Créer un compte Disqus

Disqus – Importer les commentaires

2 – Exporter le contenu de votre site wordpress au format WXR. /!\ Si l’URL de votre site a changé, il faudra mettre à jour les liens dans le fichier WXR pour que Disqus associe les commentaires aux bonnes pages.

3 – Importer les commentaires en passant par https://import.disqus.com

Disqus – Importer les commentaires

4 – Ajouter le code JavaScript Universel fourni par Disqus dans le modèle de vos posts (par défaut: _layouts/post.html)

5 – Modifier le code JavaScript pour configurer Disqus en fonction des liens de votre site.

var disqus_config = function () {
   this.page.url = {{site.baseurl}}/{{page.url}};  // Replace PAGE_URL with your page's canonical URL variable
   this.page.url = {{site.baseurl}}/{{page.url}};  // Replace PAGE_URL with your page's canonical URL variable
   this.page.identifier = {{page.id}}; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
   this.page.title = {{page.title}};
};

6 – Activer/désactiver les commentaires sur une page

Pour activer ou désactiver les commentaires sur une page, ajouter une variable dans l’entête YAML de la page ou du post, puis n’insérer le code JavaScript Disqus que si cette varialbe est vraie.

Entête YAML

---
title: SEO and Jekyll
author: Ghislain
layout: post
comments: true
---

Modèle de page/post

{% if page.comments == true %}
    <script>
        # code JavaScript Disqus
    </script>
{% endif %}

Disqus – JavaScript configuration variables

Flux RSS

Ajouter le gem jekyll-feed dans le fichier _config.xml. Un fichier ATOM nommé feed.xml sera construit à chaque création du site statique.

Feed ATOM du www.ghislain-lerda.com

SEO

Sitemap

Ajouter le gem jekyll-sitemap dans le fichier _config.xml. Un fichier sitemap.xml sera construit à chaque création du site statique.

Robots.txt

Le fichier robots.txt indique au robot d’indexation des moteurs de recherche ce qu’ils peuvent voir et ce qu’ils doivent éviter.

Plus d’informations sur les liens suivants :

Créer un fichier robots.txt à la racine qui contient par exemple :

User-agent: *
Sitemap: {{ site.url }}/sitemap.xml

Meta description et keywords pour chaque page

Il est bon d’avoir une description spécifique pour chaque page. Le texte utilisé peut être une variable existante comme page.excerpt ou créée spécifiquement. Dans le second cas, il faut ajouter la variable et sa valeur dans l’entête YAML du post.

---
title: SEO and Jekyll
author: Ghislain
layout: post
metadescription: description dedicated to SEO 
keywords : "jekyll, SEO"
---

<meta name="description" content="{{ page.excerpt }}">
<!-- plus travaillé -->
<meta name="description" content="{% if page.metadescritpion %}{{ page.metadescritpion | truncate: 160 }}{% else %}{{ page.excerpt }}{% endif %}">{% endhighlight %}
{% if page.keywords %}
<meta name="keywords" content="{{ page.keywords }}" />
{% endif %}

Si vous trouvez ce post intéressant, je vous invite à tester le service de commentaire ci-dessous.