Conception de mon portfolio

Contexte et besoins

Pendant ma première année de BTS SIO SISR, mes travaux s’accumulaient dans des dossiers locaux sans véritable organisation. Au moment de préparer les épreuves E5 et E6, j’ai réalisé qu’il me fallait un endroit unique pour rassembler tous mes projets, les expliquer proprement et pouvoir les présenter à un jury ou à un recruteur.

Mes besoins étaient simples :

• un site clair pour présenter mon parcours,
• un article par projet, avec contexte, configuration et bilan,
• une organisation par épreuve BTS (E5, E6, EF3),
• un site rapide à charger, facile à mettre à jour et gratuit à héberger.

Pourquoi Hugo

J’ai choisi Hugo, un générateur de site statique. Le principe est simple : on écrit ses articles en Markdown (un format texte facile à lire), Hugo les transforme en pages HTML, et on publie ces pages sur Internet.

Trois raisons à ce choix :

• C’est rapide. Pas de base de données, le site se génère en quelques millisecondes.
• C’est simple. Le contenu est en texte, on peut le lire sans navigateur et le versionner avec Git.
• C’est gratuit à héberger. Comme il n’y a que des fichiers HTML/CSS/JS, on peut utiliser Cloudflare Pages, GitHub Pages, etc.

Pour le design, j’ai pris le thème hugo-narrow  : sobre, responsive, mode sombre, et il gère nativement le multilingue.

Préparation de l’environnement

J’ai tout fait depuis mon PC sous Windows 11. J’installe Git et Hugo Extended avec winget , le gestionnaire de paquets fourni par défaut sur Windows 11 :

# Dans un terminal PowerShell standard
winget install --id Git.Git -e
winget install --id Hugo.Hugo.Extended -e

# Vérification
git --version
hugo version

Création du site

Toujours dans PowerShell, je me place dans mon dossier de projets et je lance la création du site :

hugo new site portfolio-bts
cd portfolio-bts
git init

# Ajout du thème comme sous-module Git
git submodule add https://github.com/tom2almighty/hugo-narrow.git themes/hugo-narrow

Explications :

• hugo new site crée la structure de dossiers du site (content, layouts, static, config).
• git submodule add permet d’inclure le thème dans le projet sans le copier. Pour le mettre à jour plus tard, il suffira d’une commande.

Configuration du site

La configuration tient dans config/_default/hugo.yaml. Voici les paramètres principaux :

baseURL: https://portfolio.kairrin.net/
languageCode: fr-FR
defaultContentLanguage: fr
title: Portfolio - Lucas Lopes Da Silva
theme: hugo-narrow

permalinks:
  projects: /projects/:slug/

taxonomies:
  category: categories
  tag: tags

Explications :

• baseURL : l’adresse du site une fois en ligne.
• defaultContentLanguage: fr : langue principale du site.
• theme : le thème utilisé (celui qu’on a ajouté juste avant).
• permalinks : permet d’avoir des URL propres comme /projects/hsrp-packet-tracer/.

Organisation des articles

Tous les articles sont dans le dossier content/. Chaque projet a son propre dossier, qui contient l’article et ses fichiers associés (images, PDF, fichiers Packet Tracer).

content/fr/
├── projects/
│   ├── hsrp-packet-tracer/
│   │   └── index.md
│   ├── dhcp-pool-packet-tracer/
│   │   └── index.md
│   └── ...
├── epreuves/        # E5, E6, EF3
├── presentation/
└── veille/

Modèle d’article

Pour rester cohérent, chaque article commence par les mêmes informations (le « front matter ») :

---
title: "Titre du projet"
date: 2025-01-24
slug: slug-du-projet
description: "Phrase courte affichée dans la liste des projets."
period: "1ère année - ScholaNova (JJ/MM/AAAA → JJ/MM/AAAA)"
tags:
  - Réseau
  - Cisco
categories:
  - projects
status: "completed"
---

Le slug détermine l’URL de l’article. Il est important de le garder stable pour ne pas casser les liens externes.

Rédaction au quotidien

Une fois la base posée, le rythme de travail est simple :

# Création d'un nouvel article
hugo new content/fr/projects/mon-nouveau-projet/index.md

# Aperçu en direct dans le navigateur
hugo server -D

# Publication
git add .
git commit -m "Ajout de l'article : Mon nouveau projet"
git push

Explications :

• hugo server -D lance un mini-serveur local accessible sur http://localhost:1313. À chaque sauvegarde, l’aperçu se met à jour automatiquement.
• L’option -D affiche aussi les articles encore en brouillon (draft: true).

Mise en ligne avec GitHub Pages

Pour publier le site, j’utilise GitHub Pages. C’est gratuit, c’est intégré à GitHub, et la mise en ligne se fait automatiquement à chaque git push grâce à un workflow GitHub Actions.

Activation côté GitHub

1. Sur le dépôt GitHub, aller dans Settings → Pages.
2. Dans la section Build and deployment, choisir GitHub Actions comme source.

Workflow de déploiement

Je crée le fichier .github/workflows/hugo.yml à la racine du projet. C’est lui qui dit à GitHub comment construire le site et le publier :

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.156.0
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
      - name: Install Dart Sass
        run: sudo snap install dart-sass
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: recursive
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
          HUGO_ENVIRONMENT: production
        run: |
          hugo \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Explications du workflow :

• on: push: branches: ["master"] : le workflow se déclenche automatiquement à chaque envoi de code sur la branche master. L’entrée workflow_dispatch permet aussi de le lancer manuellement depuis l’onglet Actions.
• permissions : on autorise GitHub Actions à lire le code, écrire sur Pages et signer le déploiement avec un jeton OIDC. Sans ces permissions, le déploiement échoue.
• concurrency : empêche deux déploiements de tourner en même temps. Si un push arrive pendant un build, GitHub mettra le suivant en attente plutôt que de tout lancer en parallèle (ce qui pourrait créer un conflit).
• defaults: run: shell: bash : force toutes les commandes à s’exécuter dans Bash, pour avoir un comportement identique sur tous les runners.

Le job build se déroule en plusieurs étapes :

• Install Hugo CLI : on télécharge le .deb officiel d’Hugo Extended (version définie par la variable HUGO_VERSION) et on l’installe avec dpkg. C’est plus rapide qu’un apt install qui pourrait nous donner une version trop ancienne.
• Install Dart Sass : indispensable pour le thème hugo-narrow qui utilise SCSS. Sans cette étape, la compilation du CSS échoue.
• Checkout avec submodules: recursive : récupère le code du dépôt et le thème, qui est inclus comme sous-module Git. Sans recursive, le dossier themes/hugo-narrow resterait vide.
• Setup Pages : récupère automatiquement la baseURL à utiliser pour le build (l’URL publique de GitHub Pages).
• Install Node.js dependencies : si un package-lock.json est présent (par exemple pour Tailwind CSS), npm ci installe les dépendances ; sinon l’étape est ignorée.
• Build with Hugo : génère le site dans le dossier public/. La variable HUGO_ENVIRONMENT: production active les optimisations propres au mode production. HUGO_CACHEDIR indique où Hugo doit stocker son cache pour accélérer les builds suivants.
• Upload artifact : empaquette le contenu de public/ dans un artefact que GitHub Pages saura déployer.

Le job deploy est volontairement isolé du job de build : il récupère l’artefact et le publie sur GitHub Pages. Le needs: build garantit qu’il ne se lance qu’après une compilation réussie.

Domaine personnalisé

Pour utiliser portfolio.kairrin.net plutôt que l’adresse <utilisateur>.github.io, j’ai ajouté une redirection depuis la page d’administration du repository github avec mon URL.

Côté DNS (chez mon registrar), j’ai créé un enregistrement CNAME qui fait pointer portfolio.kairrin.net vers <mon-utilisateur>.github.io. Le HTTPS est ensuite activé tout seul par GitHub via Let’s Encrypt.

Petites personnalisations

Au-delà du thème de base, j’ai ajouté quelques éléments :

• un logo SVG dans static/images/,
• un menu organisé par sections (projets, épreuves, veille, présentation),
• un mot de passe sur la section E6 pour que le contenu ne soit pas visible publiquement,
• l’intégration de mes rapports PDF directement dans les pages avec un shortcode dédié.

Maintenance

Le portfolio vit en continu :

• ajout d’un article à chaque nouveau projet ou épreuve,
• mise à jour mensuelle du thème,
• réécriture progressive des anciens articles pour les rendre plus clairs.

Compétences du bloc 1 mobilisées

Bilan

Ce portfolio est devenu plus qu’une vitrine. Rédiger un article m’oblige à comprendre vraiment ce que j’ai fait, à chercher des sources fiables et à anticiper les questions du jury. Et le fait d’utiliser Hugo me permet de me concentrer sur le contenu plutôt que sur la maintenance d’un CMS.

Sources

• Documentation officielle Hugo — guide complet sur les commandes, les thèmes et le multilingue.
• Hugo — Host on GitHub Pages — guide officiel pour héberger un site Hugo sur GitHub Pages.
• Thème hugo-narrow sur GitHub .
• Documentation GitHub Pages — guide officiel GitHub.
• winget — Le gestionnaire de paquets Windows — pour installer Hugo et Git.
• Markdown — MDN Web Docs — rappels sur la syntaxe Markdown.

Lien vers le site

Le portfolio est accessible à l’adresse portfolio.kairrin.net .