Création d’une Page d’Accueil Personnalisée avec Hugo

La page d’accueil est souvent la première impression que les visiteurs ont de votre site web. Dans ce tutoriel, nous allons vous guider à travers les étapes nécessaires pour créer votre propre page d’accueil personnalisée avec Hugo, la définir comme page par défaut et l’intégrer à la barre de navigation.

Étape 1 : Configuration de la Page d’Accueil

1. Pour commencer, éditez le fichier config.toml, qui se trouve dans le répertoire www\template\config.toml. Dans ce fichier, décommentez le code suivant :

1
2
3
4
5
6

#[[menu.main]]
    #pageref = "/"
    #name = "Home"
    #weight = 1
    #pre = "internal"
    #post = "home"

• pageref : C’est la référence à la page qui sera liée à cette entrée de menu.

• name : C’est le nom qui sera affiché dans la barre de navigation pour cette entrée de menu.

• weight : C’est un nombre qui détermine l’ordre des éléments dans le menu.

• pre : C’est le type de lien. “internal” signifie que le lien est interne au site.

• post : C’est utilisé pour ajouter une icône. Pour une personnalisation plus poussée des icônes, je vous recommande de consulter cet article qui explique comment ajouter et modifier les réseaux sociaux dans Hugo.

Pour trouver le code SVG des icônes, vous pouvez consulter les liens suivants :

• Pour les icônes de marques : Brands Icons | Font Awesome
• Pour les icônes régulières : Regular Style Icons | Font Awesome
• Pour les icônes solides : Solid Style Icons | Font Awesome

Ces ressources vous permettront de trouver l’icône qui correspond le mieux à vos besoins et de l’intégrer dans votre site Hugo.

2. Toujours dans ce même fichier config.toml, remplacez posts par index dans le code suivant :

1
2

# Homepage Layout
homeLayout = "posts"

Cela permettra à Hugo de savoir quelle page utiliser comme page d’accueil par défaut.

Étape 2 : Création du Modèle de la Page d’Accueil

Hugo utilise des modèles pour générer les différentes pages de votre site. Pour créer un modèle pour votre page d’accueil, suivez ces étapes :

1. Éditez le fichier www\template\themes\meme\layouts\index.html.
2. Ajoutez le code suivant avant le dernier {{ end }} dans ce fichier :

1
2
3
4

<!-- Layout Index -->
{{ if eq .Site.Params.homeLayout "index" }}
    {{ partial "pages/index.html" . }}
{{ end }}

Ce code vérifie si le modèle de la page d’accueil est défini comme “index” dans le fichier config.toml. Si c’est le cas, il inclura le contenu de la page d’accueil à cet endroit.

Étape 3 : Création de la Page d’Accueil

Il est maintenant temps de créer la page d’accueil elle-même. Créez un fichier www\template\themes\meme\layouts\partials\pages\index.html avec le contenu que vous souhaitez afficher sur votre page d’accueil. Par exemple :

1
2
3
4
5

<main class="main single" id="main">
    <div class="main-inner">
        <p>mon index file</p>
    </div>
</main>

Vous pouvez personnaliser le contenu de cette page en ajoutant du HTML, du CSS et même du JavaScript selon vos besoins. Cette page d’accueil personnalisée remplacera la page d’accueil par défaut générée par Hugo.

Notez que l’en-tête trouvé dans www\template\themes\meme\layouts\partials\pages\post.html est une référence à un modèle générique pour les pages de contenu. Vous pouvez personnaliser davantage ce modèle si nécessaire, mais pour la page d’accueil, nous utilisons un modèle spécifique.

Conclusion

En suivant ces étapes, vous pouvez créer une page d’accueil personnalisée pour votre site Hugo, la définir comme page d’accueil par défaut et l’intégrer à la barre de navigation. Cela vous permettra de donner à votre site une touche unique et de captiver vos visiteurs dès leur arrivée. N’oubliez pas de compiler votre site Hugo avec la commande hugo depuis votre terminal, après avoir effectué ces modifications pour voir le résultat en ligne.