Learning Hugo

Si vous ne l’avez pas remarqué, ce site est construit avec Hugo, qui n’est pas humain, mais un compagnon numérique, pour générer des sites web statiques. Cela présente des avantages et des inconvénients pour mon besoin particulier, qui pourraient être différents pour vous.

Il ne s’agit pas de faire la promotion d’Hugo qui s’en fiche un peu. Juste de tracer quelques informations sur mon apprentissage de quelques trucs.

Bien que la documentation d’Hugo soit complète et que je m’y réfère directement, j’aime bien écrire quelques lignes des solutions aux points durs que j’ai rencontrés. Si je devais repartir de zéro, pour créer un autre site, je devrais être un peu plus efficace et excuser plus facilement mon cerveau de ne pas s’être souvenu de tout.

Le choix du thème

Le choix du thème est important car chaque thème propose plus ou moins de facilités, et ses propres spécificités au dessus des fonctionnalités standard d’hugo.

Pour ce site, je me suis amusé à mixer 2 thèmes. Un thème pour la structure générale d’un blog avec des zones prédéfinies (pour les tags, les articles récents, …) et un autre thème “single page” pour avoir une page d’accueil plus dynamique.

Ce mix m’a permis d’apprendre un peu plus profondément les rouages d’hugo, et quelques astuces. Néanmoins selon les thèmes choisis, il peut s’avérer un véritable casse tête dans l’adaptation des templates et des feuilles de style. C’est pourquoi je ne le recommande qu’à des développeurs suffisamment disciplinés dans leur gestion de configuration, et dans une approche pas à pas.

Formater divers contenus (code, image, etc) grâce aux shortcodes

Dans les pages de blog, Hugo permet d’inclure ou de formater des contenus de façon rapide par l’usage de “shortcodes”, des bouts de code html que l’on peut assimiler à une fonction de programme pour insérer du contenu dans la page.

Il existe déjà de nombreux shortcodes dans Hugo, et il en existe certainement dans le thème que vous avez choisi. Jettez un oeil dans le répertoire theme/[votre theme]/layouts/shorcodes

Vous pouvez aussi facilement en écrire, ou en récupérer au detour de l’exploration d’autres thèmes sur github…

Quelques shortcodes standards plus ou moins utiles

Comment insérer du code dans votre page

• Un exemple en python

# Python program to check if the input number is odd or even.
# A number is even if division by 2 gives a remainder of 0.
# If the remainder is 1, it is an odd number.

num = int(input("Enter a number: "))
if (num % 2) == 0:
   print("{0} is Even".format(num))
else:
   print("{0} is Odd".format(num))

Source programiz.com

• Un exemple en java:

import java.util.Scanner;

public class EvenOdd {

    public static void main(String[] args) {

        Scanner reader = new Scanner(System.in);

        System.out.print("Enter a number: ");
        int num = reader.nextInt();

        if(num % 2 == 0)
            System.out.println(num + " is even");
        else
            System.out.println(num + " is odd");
    }
}

Source programiz.com

Insérer du code github avec gist

D’autres Shortcodes très utiles

• Pour insérer des images

Ecrire des formules mathématiques

Cette possibilité est peut être déjà offerte dans le thème. Si ce n’est pas le cas, vous pouvez essayer de récuper le nécessaire et le fonctionnement reproduire. C’est ce que j’ai fait pour cupper (pas de math).

$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$

Un formule dans le texte $ ma formule: (\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…)
$ est ici.

Ici aussi $\sum_{n=1}^{\infty} 2^{-n} = 1$

Block math: $$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$