ContexteLe BTS SIO demande un portfolio qui présente les réalisations et la démarche de l'étudiant. J'ai choisi de le construire moi-même plutôt que d'utiliser un modèle tout fait.
Mon rôleConception, développement, contenu, référencement et maintenance : ce site est entièrement le mien.
RésultatUn site rapide, sans serveur ni base de données, qui sert à la fois de vitrine professionnelle et de support pour l'épreuve E5.
L’essentiel
- Un site statique, sans serveur ni base de données : presque rien à attaquer, rien à maintenir côté serveur.
- Un référencement soigné : plan du site, robots.txt, URL canoniques, aperçu de partage pour LinkedIn.
- Une veille intégrée : démarche, sources officielles, et ma sélection d’articles relevée depuis mon lecteur RSS auto-hébergé.
- Un environnement outillé : Git, conteneur de développement, une branche par chantier et une sauvegarde avant chaque changement risqué.
- Une migration maîtrisée : passage d’Astro 5 à 7 et de Tailwind 3 à 4, 19 vulnérabilités supprimées, chaque page comparée avant et après.
Dossier détaillé : choix techniques, référencement, environnement, migration
Contexte
Ce site est à la fois ma vitrine professionnelle et le support de mon épreuve E5. Il rassemble mes réalisations, la couverture du référentiel et ma veille. Le construire moi-même était aussi une façon d’apprendre : chaque fonctionnalité du site correspond à quelque chose que j’ai dû comprendre.
Environnement Technologique
- Générateur de site : Astro (site 100 % statique, aucune base de données)
- Mise en forme : Tailwind CSS
- Versionnage : Git et GitHub (dépôt privé)
- Environnement de développement : VS Code et conteneur de développement (Dev Container)
- Assistants IA : utilisés comme outils de travail, avec un fichier de contexte qui décrit l’architecture du projet
Actions réalisées
1. Un site statique, léger et sans serveur
Le site est généré à l’avance en pages HTML : il n’y a ni serveur applicatif ni base de données à maintenir, donc presque rien à attaquer et rien à mettre à jour côté serveur. Le contenu des réalisations est écrit en Markdown et validé automatiquement à la construction du site.
2. Un référencement soigné
- plan du site (sitemap) généré automatiquement et déclaré dans un fichier
robots.txt; - URL canoniques pour éviter les doublons ;
- balises de partage (Open Graph) pour un aperçu propre sur LinkedIn ;
- une description propre à chaque page.
La mesure de la visibilité (audit de performance et de référencement) se fera une fois le site en ligne.
3. Une veille intégrée au site
La page Veille présente ma démarche : un rythme hebdomadaire, des sources officielles (CERT-FR, ANSSI) et des flux RSS agrégés dans FreshRSS, que j’héberge sur mon serveur personnel.
Un script (npm run veille) interroge FreshRSS par son API et enregistre la dernière alerte du CERT-FR ainsi que les articles que j’ai mis en favori, avec mes étiquettes. Le site reste statique : il se construit à partir de ce relevé, sans dépendre d’un service tiers, et fonctionne même hors connexion.
4. Un environnement de travail outillé
- Conteneur de développement : tout le monde travaille avec la même version de Node, quelle que soit la machine ;
- branches Git pour chaque chantier, et une sauvegarde de la version stable avant toute migration risquée ;
- un fichier de contexte qui décrit l’architecture du site, pour reprendre le travail rapidement, seul ou avec un assistant IA.
5. Une migration maîtrisée
Le site est passé d’Astro 5 à Astro 7 et de Tailwind 3 à Tailwind 4, ce qui a supprimé les 19 vulnérabilités signalées sur les dépendances. La migration a été faite sur une branche séparée, la version précédente sauvegardée, et chaque page comparée avant et après par captures d’écran.
6. Une expérience pensée pour le visiteur
Palette de commandes (Ctrl+K), fil d’Ariane façon terminal, fond animé qui se met en pause hors de l’écran, et respect du réglage « réduire les animations » du système. Les couleurs des textes secondaires ont été choisies pour respecter le contraste minimal recommandé (WCAG AA).
Difficultés rencontrées & Solutions
| Difficulté | Solution |
|---|---|
| Une mise à jour majeure risquait de casser le site | Branche dédiée, sauvegarde de la version stable, comparaison visuelle page par page |
| Des vulnérabilités dans les dépendances | Correctifs sûrs d’abord, puis migration complète vers les versions à jour |
| Garder le site cohérent au fil des ajouts | Charte centralisée (couleurs, polices) et contenu validé à la construction |
Compétences BTS SIO
Tableau E5 Réalisation en cours de formation · avr. 2026 → en cours
- Référencer les services en ligne de l'organisation et mesurer leur visibilité (Développer la présence en ligne de l'organisation)
Référencement du site : plan du site (sitemap), robots.txt, URL canoniques, balises de partage - Mettre en place son environnement d'apprentissage personnel (Organiser son développement professionnel)
Environnement de travail personnel : dépôt Git, conteneur de développement, branches de test - Mettre en œuvre des outils et stratégies de veille informationnelle (Organiser son développement professionnel)
Page Veille alimentée par ma veille réelle : dernière alerte du CERT-FR et articles retenus, relevés depuis FreshRSS - Gérer son identité professionnelle (Organiser son développement professionnel)
Présentation professionnelle en ligne, liens LinkedIn et GitHub, CV - Développer son projet professionnel (Organiser son développement professionnel)
Projet professionnel affiché : poursuite après le BTS en cybersécurité