Créer son Portfolio avec Hugo
Après WordPress, découvrez un outil plus robuste, plus sécurisé et plus simple à héberger pour construire votre Portfolio
- Découvrir un outil fiable, robuste et populaire pour créer son Portfolio, après avoir appris les bases de WordPress.
- Créer son Portfolio avec un outil plus robuste que WordPress.
- Créer son Portfolio avec un outil plus simple à héberger que WordPress.
- Créer son Portfolio avec un outil plus sécurisé que WordPress.
- Créer son Portfolio sur un hébergement pérenne, qui ne disparaîtra pas à la fin de votre BTS.
Prérequis
Ce tutoriel suppose que vous maîtrisez déjà les bases de deux outils, indispensables pour la suite :
- Découvrir Git : Hugo s'appuie entièrement sur Git pour suivre l'historique de votre Portfolio et pour l'héberger.
- Markdown : avec Hugo, chaque page de votre Portfolio est un simple fichier Markdown.
Si l'une de ces 2 notions n'est pas acquise, revenez d'abord sur le tutoriel correspondant. Sans elles, la suite de ce tutoriel sera incompréhensible : Hugo ne fait qu'assembler des fichiers Markdown à l'aide de Git.
Petite vérification
Avant de commencer, vérifiez si vous savez déjà répondre à ces 3 questions très simples, pour savoir si vous avez toutes les bases nécessaires pour cette séance :
- citer les commandes Git pour envoyer vos modifications sur le dépôt distant
- citer la syntaxe Markdown qui crée un titre de niveau 1
- citer la syntaxe Markdown qui met un mot en gras
📌 Réponse attendue
Notions théoriques
Qu'est-ce que Hugo ?
Hugo est un générateur de site statique (Static Site Generator, SSG) : un logiciel qui transforme un ensemble de fichiers Markdown en un site Web complet, fait uniquement de fichiers HTML, CSS et JavaScript déjà prêts.
Un site dynamique (comme WordPress) reconstruit chaque page à la demande, à chaque visite, en interrogeant une base de données.
Un site statique (comme celui généré par Hugo) est construit une fois, à l'avance : le serveur se contente ensuite d'envoyer des fichiers déjà prêts, sans aucun calcul.
Hugo est écrit dans un langage de programmation très performant (le Go), ce qui en fait l'un des générateurs de site statique les plus rapides et les plus utilisés au monde, aussi bien par des particuliers que par de grandes entreprises.
Pourquoi Hugo plutôt que WordPress pour un Portfolio ?
| WordPress | Hugo | |
|---|---|---|
| Fonctionnement | Base de données + code PHP exécuté à chaque visite | Fichiers HTML déjà générés à l'avance, rien à exécuter |
| Sécurité | Failles fréquentes (plugins, thèmes, mots de passe) | Rien à pirater : il n'y a ni base de données ni code exécuté sur le serveur |
| Hébergement | Nécessite un serveur PHP + MySQL, souvent payant | N'importe quel hébergeur de fichiers statiques, y compris gratuitement |
| Pérennité | Dépend d'un hébergement qui peut expirer (fin de formation) | Le dépôt Git et son hébergement restent disponibles indéfiniment |
Ce n'est pas un hasard si ce tutoriel arrive après celui sur WordPress : vous avez déjà expérimenté les limites qu'un outil comme Hugo permet justement d'éviter.
Le "front matter" : la passerelle entre Markdown et Hugo
Dans Hugo, chaque page Markdown commence par un petit bloc de métadonnées, encadré par deux
lignes --- : le front matter. Le reste du fichier, en dessous, reste du Markdown pur, exactement
comme vous le connaissez déjà.
---
title: "À propos de moi"
date: 2026-10-08
draft: false
---
Je m'appelle Camille DURAND, étudiante en BTS SIO...
draft: false signifie que la page est publiée. Tant que draft: true (valeur par défaut d'une
page nouvellement créée), la page reste invisible lors de la construction finale du site.
Installer Hugo
Sous Windows, avec winget (déjà installé sur Windows 10/11) :
winget install Hugo.Hugo.Extended
Installation d'Hugo sous MacOS
Sous MacOS, Hugo s'installe avec Homebrew, le gestionnaire de paquets le plus utilisé sur Mac. Si Homebrew n'est pas déjà installé :
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Puis installez Hugo :
brew install hugo
Sous MacOS, la formule Homebrew installe directement la version extended de Hugo : aucune précision supplémentaire n'est nécessaire, contrairement à Windows.
Vérifiez l'installation :
hugo version
Il existe deux versions de Hugo : la version normale, et la version extended, qui ajoute la prise en charge de certains thèmes avancés. Installez toujours la version extended : elle contient tout ce que fait la version normale, et plus encore.
Créer le projet Hugo
cd Documents
hugo new site mon-portfolio
cd mon-portfolio
Cette commande crée une structure de dossiers :
content/: vos pages, en Markdown (c'est le dossier que vous allez remplir).themes/: l'apparence visuelle du site (CSS, mise en page).hugo.toml: le fichier de configuration générale du site.
Ajouter un thème
Hugo ne fournit aucune apparence par défaut : il faut ajouter un thème, créé et partagé par
quelqu'un d'autre. Un thème est lui-même un simple dépôt Git, que l'on clone (récupère en une
copie complète) dans le dossier themes/ :
git clone --depth 1 https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
git clone récupère une copie complète d'un dépôt Git existant, créé par quelqu'un d'autre :
exactement ce qu'il faut pour récupérer le code d'un thème, sans avoir à le réécrire soi-même.
Déclarez ensuite ce thème dans hugo.toml :
baseURL = 'https://votre-compte.gitlab.io/mon-portfolio/'
languageCode = 'fr-fr'
title = "Portfolio de Camille DURAND"
theme = 'ananke'
baseURL doit correspondre à l'adresse finale de votre site, une fois publié sur GitLab Pages
(voir plus bas). Renseignez-la dès maintenant, même approximativement : vous pourrez la corriger
si besoin, une fois le site réellement en ligne.
Rédiger le contenu, rubrique par rubrique
Le tutoriel Un Portfolio c'est quoi ?
détaille les 10 rubriques attendues dans un Portfolio. Avec Hugo, chaque rubrique devient un
fichier Markdown, créé avec la commande hugo new content :
hugo new content apropos.md
hugo new content projet-professionnel.md
hugo new content experience.md
hugo new content competences.md
hugo new content formation.md
hugo new content certifications.md
hugo new content veille.md
hugo new content contact.md
hugo new content mentions-legales.md
Ouvrez content/apropos.md, et remplacez son contenu généré automatiquement par le vôtre :
---
title: "À propos de moi"
menu: main
draft: false
---
Je m'appelle Camille DURAND, étudiante en BTS SIO, option SLAM. Passionnée de développement Web,
je recherche actuellement un stage pour l'été prochain.
menu: main ajoute automatiquement cette page au menu de navigation du site (grâce au thème
Ananke). Ajoutez cette ligne à chaque rubrique que vous souhaitez voir apparaître dans le menu.
La rubrique « Projets réalisés » mérite un traitement un peu différent : plutôt qu'une seule
page, créez un dossier projets/, avec une page par projet :
hugo new content projets/_index.md
hugo new content projets/mon-premier-site.md
---
title: "Projets réalisés"
menu: main
draft: false
---
Voici les projets que j'ai réalisés durant ma formation.
Un fichier nommé _index.md décrit la page d'une liste (ici, la liste de tous les projets du
dossier projets/). Hugo l'affiche automatiquement avec les liens vers chaque projet.
N'oubliez pas non plus content/_index.md : c'est la page d'accueil de votre Portfolio.
Prévisualiser le site en local
hugo server -D
Ouvrez ensuite http://localhost:1313/ dans votre navigateur : vous visualisez votre Portfolio
exactement comme vos visiteurs le verront.
L'option -D (pour drafts) affiche aussi les pages encore en brouillon (draft: true). Avant une
publication définitive, repassez chaque page terminée en draft: false, sinon elle restera invisible
une fois le site réellement construit pour la publication.
Héberger le Portfolio sur GitLab
Créer un compte et un projet GitLab
- Créez un compte sur gitlab.com, si ce n'est pas déjà fait.
- Cliquez sur New project → Create blank project, donnez-lui un nom (par exemple
mon-portfolio), laissez-le public.
S'authentifier avec une clé SSH
ssh-keygen -t ed25519 -C "adresse@exemple.fr"
cat ~/.ssh/id_ed25519.pub
Sur GitLab : Settings → SSH Keys, collez le contenu affiché (la clé publique), validez.
ssh -T git@gitlab.com
Seule la clé publique (.pub) se partage, avec GitLab ou avec quiconque. La clé privée ne
quitte jamais votre machine.
Envoyer le Portfolio vers GitLab
cd mon-portfolio
git init
git add .
git commit -m "Premier commit de mon Portfolio Hugo"
git remote add origin git@gitlab.com:votre-compte/mon-portfolio.git
git push -u origin main
Publier automatiquement avec GitLab Pages
Contrairement à GitHub Pages, GitLab Pages ne sait pas, par lui-même, exécuter Hugo : il faut lui
donner la recette à suivre, dans un fichier .gitlab-ci.yml, à la racine du projet :
image: registry.gitlab.com/pages/hugo/hugo_extended:latest
pages:
script:
- hugo
artifacts:
paths:
- public
rules:
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
Ce fichier décrit un pipeline (une suite de tâches automatiques). À chaque git push, GitLab
démarre une machine temporaire, y installe Hugo, exécute la commande hugo (qui construit le site
dans le dossier public/), puis publie ce dossier. C'est l'équivalent, pour Hugo, de ce que fait
automatiquement GitHub Pages pour un site déjà construit.
git add .gitlab-ci.yml
git commit -m "Ajoute la publication automatique avec GitLab Pages"
git push
Sur la page du projet GitLab : Build → Pipelines, patientez que le pipeline passe au vert, puis rendez-vous dans Deploy → Pages pour récupérer l'adresse de votre Portfolio, de la forme :
https://votre-compte.gitlab.io/mon-portfolio/
Si l'adresse réelle diffère de celle renseignée plus tôt dans baseURL (fichier hugo.toml),
corrigez-la, puis git add, git commit et git push à nouveau : un nouveau pipeline republiera
automatiquement le site avec la bonne adresse.
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Votre défi pour aujourd'hui consiste à créer et publier votre propre Portfolio avec Hugo
Étape 1 — Créer le projet et ajouter un thème
Un thème très riche en fonctionnalités (menus déroulants complexes, animations...) demande souvent une configuration avancée. Pour un premier Portfolio, un thème simple comme Ananke suffit largement, et laisse toute la place à votre contenu.
Étape 2 — Rédiger la rubrique « À propos de moi »
Rédigez et vérifiez une rubrique du Portfolio avant de passer à la suivante (apropos.md, puis
competences.md, puis projets/...), plutôt que de créer les 10 fichiers vides d'un coup. Vous
repérez ainsi immédiatement toute erreur de front matter, sans avoir à la chercher parmi 10 fichiers.
Étape 3 — Prévisualiser le site en local
Étape 4 — Publier le Portfolio sur GitLab Pages
Si le site n'apparaît pas immédiatement après un push, consultez d'abord Build → Pipelines :
le pipeline met quelques dizaines de secondes à s'exécuter. Une icône rouge indique une erreur
(souvent une faute dans .gitlab-ci.yml), à corriger avant de recommencer.