Introduction

Ce tutoriel vous montrera comment créer un thème simple pour Hugo. Je suppose que vous êtes familier avec HTML, la ligne de commande bash, et que vous êtes à l’aise avec Markdown pour formater le contenu. Je vais expliquer comment Hugo utilise des modèles et comment vous pouvez organiser vos modèles pour créer un thème. Je ne couvrirai pas l’utilisation de CSS pour styliser votre thème.

casa

Nous allons commencer par créer un nouveau site avec un modèle très basique. Ensuite, nous ajouterons quelques pages et des publications. Avec de petites variations, vous pourrez créer de nombreux types de sites web.

Dans ce tutoriel, les commandes que vous entrez commenceront par l’invite “$”. La sortie suivra. Les lignes qui commencent par “#” sont des commentaires que j’ai ajoutés pour expliquer un point. Lorsque je montre les mises à jour d’un fichier, le “:wq” sur la dernière ligne signifie qu’il faut sauvegarder le fichier.

Voici un exemple :

## Ceci est un commentaire

$ echo ceci est une commande
ceci est une commande

## édition d'un fichier

$vi foo.md
+++
date = "2014-09-28"
title = "Création d'un nouveau thème"
+++

Contenu du fichier
:wq

## L'afficher

$ cat foo.md
+++
date = "2014-09-28"
title = "Création d'un nouveau thème"
+++

Contenu du fichier
$

Quelques définitions

Il y a quelques concepts que vous devez comprendre avant de créer un thème.

Skins

Les skins sont les fichiers responsables de l’apparence de votre site. C’est le CSS qui contrôle les couleurs et les polices, c’est le Javascript qui détermine les actions et les réactions. Ce sont aussi les règles que Hugo utilise pour transformer votre contenu en HTML que le site montrera aux visiteurs.

Vous avez deux façons de créer un skin. Le moyen le plus simple est de le créer dans le répertoire layouts/. Si vous le faites, vous n’avez pas à vous soucier de configurer Hugo pour le reconnaître. Le premier endroit où Hugo recherchera pour les règles et les fichiers se trouve dans le répertoire layouts/ afin de trouver toujours le skin.

Votre deuxième choix est de le créer dans un sous-répertoire du répertoire themes/. Si vous le faites, vous devez toujours indiquer à Hugo où chercher le skin. C’est un travail supplémentaire, cependant, alors, pourquoi s’embêter avec ça?

La différence entre la création d’un skin dans layouts/ et la création dans themes/ est très subtile. Un skin dans layouts/ ne peut pas être personnalisé sans mettre à jour les modèles et les fichiers statiques sur lesquels il est construit. Un skin créé dans themes/, d’autre part, peut être et facilite son utilisation par d’autres personnes.

Le reste de ce tutoriel appellera un skin créé dans le répertoire thèmes/, un thème.

Notez que vous pouvez utiliser ce tutoriel pour créer un skin dans le répertoire layouts/ si vous le souhaitez. La principale différence sera que vous n’aurez pas besoin de mettre à jour le fichier de configuration du site pour utiliser un thème.

La page d’accueil

La page d’accueil, ou la page de destination, est la première page que beaucoup de visiteurs d’un site voient. C’est le fichier index.html dans le répertoire racine du site Web. Puisque Hugo écrit des fichiers dans le répertoire public/, notre page d’accueil est public/index.html.

Fichier de configuration du site

Lorsque Hugo s’exécute, il recherche un fichier de configuration qui contient des paramètres qui remplacent les valeurs par défaut pour l’ensemble du site. Le fichier peut utiliser TOML, YAML ou JSON. Je préfère utiliser TOML pour mes fichiers de configuration. Si vous préférez utiliser JSON ou YAML, vous devrez traduire mes exemples. Vous devrez également modifier le nom du fichier puisque Hugo utilise l’extension pour déterminer comment le traiter.

Hugo traduit les fichiers Markdown en HTML. Par défaut, Hugo s’attend à trouver des fichiers Markdown dans votre répertoire content/ and les modèles dans le répertoire themes/. Il créera les fichiers HTML dans votre répertoire public/. Vous pouvez le modifier en spécifiant d’autres emplacements dans le fichier de configuration.

Le contenu

Le contenu est stocké dans des fichiers texte contenant deux sections. La première section est la “section liminaire”, qui contient les méta-informations sur le contenu. La deuxième section contient le Markdown qui sera converti en HTML.

Section liminaire

La section liminaire est une information sur le contenu. Comme le fichier de configuration, il peut être écrit en TOML, YAML ou JSON. Contrairement au fichier de configuration, Hugo n’utilise pas l’extension du fichier pour connaître le format. Il recherche des marqueurs pour signaler le type. TOML est entouré de “+++”, YAML par “---”, et JSON est enfermé dans des accolades. Je préfère utiliser TOML, donc vous devrez traduire mes exemples si vous préférez YAML ou JSON.

L’information dans la section liminaire est transmise au modèle avant que le contenu ne soit rendu en HTML.

Markdown

Le contenu est écrit dans Markdown qui facilite la création du contenu. Hugo exécute le contenu via un moteur Markdown pour créer le code HTML qui sera écrit dans le fichier de sortie.

Text that is a quote Text that is a quote Text that is a quote Text that is a quote

Some basic Git commands are:

git status
git add
git commit

This is an image

  • George Washington
  • John Adams
  • Thomas Jefferson