Installation des outils

Les étapes de création d'un environnement de développement Hugo sous Linux sont les suivantes :

1. Installer Hugo :
   1. Télécharger le binaire depuis le Github Hugo
   2. Décompresser le zip dans le dossier du projet
   3. Renommer les fichiers README et LICENSE si besoin
   4. Vérifier l'installation : hugo version
   5. Si le système ne trouve pas hugo mais qu'il est bien dans le dossier, ajouter le dossier courant au PATH sous Linux : echo "export PATH='.':\$PATH" >> ~/.bashrc
2. Installer git : sudo apt install git-all

Source : Hugo Quick Start Guide (english)

Création d'un projet

1. Créer un dossier pour le projet et aller dans le dossier : mkdir mon_projet
2. Aller dans le dossier : cd mon_projet
3. Initialiser le site Hugo : hugo new site . (ajouter --force si le dossier n'est pas vide)
4. Initialiser le projet git : git init --initial-branch=main
5. Télécharger un thème (ici Paper): git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper
6. Configurer le thème dans Hugo : echo "theme = 'paper'" >> hugo.toml
7. Démarrer le serveur de développement : hugo server

Source : Hugo Quick Start Guide (english)

Configuration du site

Dans cet exemple, le fichier hugo.yaml est utilisé plutôt que le fichier hugo.toml. Le fichier hugo.toml peut être renommé en hugo.yaml et son contenu adapté.

1. Editer le fichier hugo.yaml. Exemple pour ce site :

baseURL: 'https://blog.tihkatek.fr/'
languageCode: 'fr-FR'
title: 'Blog Tihka Tek'
theme: 'paper'

Avec :

• baseURL : l'URL du site final en production
• languageCode : la langue
• title : le nom du site
• theme : le nom du thème

Le thème permet de configurer un certain nombre d'éléments indiqués dans la documentation du thème :

params:
  # color style
  color: linen                           # linen, wheat, gray, light

# header social icons
  gitlab: tihka-tek
  linkedin: laurentplanche
  rss: true                                # show rss icon

  # home page profile
  name: Laurent Planche
  bio: Architecte Data Indépendant

  # misc
  favicon: favicon.ico                   # customize the default favicon
  appleTouchIcon: apple-touch-icon.png   # customize the default Apple touch icon

  #disableHLJS = true                        # disable highlight.js
  #disablePostNavigation = true              # disable post navigation
  #monoDarkIcon = true                       # show monochrome dark mode icon
  #math = true                               # enable KaTeX math typesetting globally
  #localKatex = false                        # use local KaTeX js/css instead of CDN

Ajout de contenu

Pour ajouter du contenu, il suffit de taper la commande :

hugo new content content/posts/my-first-post.md

Un fichier sera créé sous content/posts et contiendra :

+++
date = '2025-04-16T18:10:31+02:00'
draft = true
title = 'My First Post'
+++

Par défaut l'article est en draft = true donc en mode brouillon

Vous pouvez éditer le fichier pour ajouter le contenu :

+++
title = 'Premier post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

La syntaxe Markdown reconnue par Hugo est documentée ici

Pour afficher les article encore en brouillon : hugo server -D

Prochaines étapes

1. Modifier un thème Hugo
2. Publier le site Hugo dans Gitlab Pages