Sommaire
- Pourquoi GitHub Pages pour votre portfolio BTS SIO
- Créer votre dépôt GitHub Pages pas à pas
- Choisir et personnaliser un template
- Contenu à inclure dans votre portfolio BTS SIO
- Configurer un domaine personnalisé
- Optimisation et bonnes pratiques
- Exemples de portfolios inspirants
- Checklist interactive : mon portfolio est-il prêt ?
- Conclusion
Un portfolio en ligne est devenu indispensable pour tout étudiant en informatique qui cherche un stage, une alternance ou un premier emploi. GitHub Pages offre une solution gratuite, fiable et professionnelle pour héberger votre portfolio sans aucun coût ni maintenance serveur. Pour les étudiants en BTS SIO, c’est l’occasion parfaite de démontrer vos compétences techniques tout en créant un outil concret pour votre insertion professionnelle.
Ce guide vous accompagne de la création de votre dépôt GitHub à la mise en ligne d’un portfolio complet : choix du template, personnalisation HTML/CSS, contenu adapté au BTS SIO, configuration d’un nom de domaine personnalisé et bonnes pratiques SEO. Le tout sans dépenser un centime.
En bref
- Gratuit à vie : hébergement, HTTPS et bande passante inclus, sans publicité
- Votre profil GitHub comme vitrine : les recruteurs IT regardent systématiquement les profils GitHub des candidats. Un portfolio hébergé sur GitHub Pages montre que vous maîtrisez Git
- Versionné par défaut : chaque modification est tracée dans l’historique Git. Vous pouvez revenir en arrière à tout moment
- Déploiement automatique : un simple
git pushmet à jour votre site en moins de 30 secondes - HTTPS natif : le certificat SSL est fourni automatiquement par GitHub
- Domaine personnalisé : vous pouvez utiliser votre propre nom de domaine (ex: prenom-nom.fr)
Pourquoi GitHub Pages pour votre portfolio BTS SIO
Parmi les nombreuses options d’hébergement disponibles, GitHub Pages se distingue par plusieurs avantages décisifs pour un étudiant en informatique.
Comparatif des solutions d’hébergement de portfolio
| Solution | Coût | Compétences démontrées | Personnalisation | Idéal pour |
|---|---|---|---|---|
| GitHub Pages | Gratuit | Git, HTML/CSS, CI/CD | Totale (code source) | Développeurs, étudiants IT |
| WordPress.com | Gratuit (limité) / 4-25 euros/mois | Aucune technique | Limitée (thèmes) | Non-techniques, blogging |
| Wix / Squarespace | 12-40 euros/mois | Aucune technique | Visuelle (drag & drop) | Créatifs, designers |
| Netlify | Gratuit (tier gratuit) | Git, CI/CD, JAMstack | Totale | Développeurs frontend |
| VPS personnel | 3-10 euros/mois | Administration serveur complète | Totale | Administrateurs système |
Les avantages spécifiques de GitHub Pages
- Gratuit à vie : hébergement, HTTPS et bande passante inclus, sans publicité
- Votre profil GitHub comme vitrine : les recruteurs IT regardent systématiquement les profils GitHub des candidats. Un portfolio hébergé sur GitHub Pages montre que vous maîtrisez Git
- Versionné par défaut : chaque modification est tracée dans l’historique Git. Vous pouvez revenir en arrière à tout moment
- Déploiement automatique : un simple
git pushmet à jour votre site en moins de 30 secondes - HTTPS natif : le certificat SSL est fourni automatiquement par GitHub
- Domaine personnalisé : vous pouvez utiliser votre propre nom de domaine (ex: prenom-nom.fr)
Créer votre dépôt GitHub Pages pas à pas
La mise en place d’un site GitHub Pages prend moins de 10 minutes. Voici la procédure complète.
Prérequis
- Un compte GitHub (gratuit sur github.com)
- Git installé sur votre machine (consultez notre guide Git débutant)
- Un éditeur de code (VS Code recommandé)
Étape 1 : Créer le dépôt
- Connectez-vous à GitHub
- Cliquez sur le « + » en haut à droite > « New repository »
- Nommez le dépôt exactement :
votre-pseudo.github.io(remplacez « votre-pseudo » par votre nom d’utilisateur GitHub) - Sélectionnez « Public » (obligatoire pour le tier gratuit)
- Cochez « Add a README file »
- Cliquez sur « Create repository »
Étape 2 : Cloner et ajouter votre premier fichier
# Cloner le dépôt
git clone https://github.com/votre-pseudo/votre-pseudo.github.io.git
cd votre-pseudo.github.io
# Créer un fichier index.html minimal
cat > index.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prénom Nom - Portfolio BTS SIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Prénom Nom</h1>
<p>Étudiant BTS SIO - Option SLAM/SISR</p>
</header>
<main>
<section id="about">
<h2>À propos</h2>
<p>Bienvenue sur mon portfolio.</p>
</section>
</main>
</body>
</html>
HTMLEOF
# Pousser vers GitHub
git add .
git commit -m "Initial portfolio setup"
git push origin mainÉtape 3 : Activer GitHub Pages
- Allez dans les Settings de votre dépôt
- Dans le menu latéral, cliquez sur Pages
- Source : sélectionnez "Deploy from a branch"
- Branch : sélectionnez "main" et "/ (root)"
- Cliquez sur "Save"
Après 1 à 2 minutes, votre site est accessible à https://votre-pseudo.github.io.
Étape 4 : Vérifier le déploiement
Rendez-vous sur l'URL de votre site. Si vous voyez une page blanche ou une erreur 404, vérifiez que :
- Le fichier se nomme bien
index.html(pas Index.html ni index.HTML) - Le fichier est à la racine du dépôt
- Le push à bien été effectué (vérifiez dans l'onglet Actions de GitHub)
Choisir et personnaliser un template
Un portfolio professionnel nécessite un design soigné. Plutôt que de partir de zéro, utilisez un template que vous personnaliserez. Cela accélère le développement tout en vous permettant d'apprendre en modifiant le code existant.
Sources de templates gratuits
| Source | Type | Qualité | Licence |
|---|---|---|---|
| HTML5 UP (html5up.net) | Templates HTML/CSS/JS | Excellent design, responsive | Creative Commons (attribution) |
| Jekyll Themes (jekyllthemes.io) | Thèmes Jekyll natifs GitHub Pages | Variable, souvent minimaliste | MIT / libre |
| Start Bootstrap (startbootstrap.com) | Templates Bootstrap | Professionnel, bien documenté | MIT |
| GitHub Pages Themes | Thèmes intégrés (Settings > Pages) | Basique, orienté documentation | Libre |
| Astro Themes (astro.build/themes) | Templates Astro (build statique) | Moderne, performant | Variable |
Personnalisation d'un template HTML
Prenons l'exemple d'un template HTML5 UP. Après le téléchargement et l'extraction dans votre dépôt, modifiez les fichiers suivants :
- index.html : remplacez les textes placeholder par vos informations (nom, bio, compétences, projets)
- assets/css/main.css : ajustez les couleurs, polices et espacements
- images/ : remplacez les images par les vôtres (photo professionnelle, captures de projets)
Structure recommandée pour le dépôt
votre-pseudo.github.io/
├── index.html # Page d'accueil
├── projets.html # Page de détail des projets
├── contact.html # Page de contact
├── style.css # Feuille de styles principale
├── script.js # JavaScript (animations, navigation)
├── assets/
│ ├── css/
│ │ └── main.css # Styles additionnels
│ ├── js/
│ │ └── main.js # Scripts additionnels
│ └── images/
│ ├── photo-profil.jpg
│ ├── projet-1.png
│ ├── projet-2.png
│ └── favicon.ico
├── documents/
│ └── cv-prenom-nom.pdf # CV téléchargeable
├── CNAME # Domaine personnalisé (optionnel)
└── README.md # Description du dépôtUtiliser Jekyll pour un portfolio avancé
Jekyll est le générateur de sites statiques intégré à GitHub Pages. Il permet de créer un portfolio avec un système de templates, de variables et de collections sans nécessiter de build local.
Pour activer Jekyll, créez un fichier _config.yml à la racine :
title: Prénom Nom - Portfolio
description: Étudiant BTS SIO, développeur web et administrateur réseau
url: "https://votre-pseudo.github.io"
theme: minima
author:
name: Prénom Nom
email: [email protected]
collections:
projets:
output: true
permalink: /projets/:title/
plugins:
- jekyll-seo-tag
- jekyll-sitemapAvec Jekyll, vous pouvez créer des pages de projet individuelles dans un dossier _projets/, et elles seront automatiquement générées et listées. C'est la solution idéale si vous avez de nombreux projets à présenter.
Contenu à inclure dans votre portfolio BTS SIO
Le contenu de votre portfolio est aussi important que son design. Voici les sections essentielles et ce qu'elles doivent contenir pour maximiser votre impact auprès des recruteurs et des jurys de BTS SIO.
Les sections indispensables
| Section | Contenu | Conseil |
|---|---|---|
| Hero / En-tête | Nom, titre (ex: "Étudiant BTS SIO SLAM"), photo professionnelle | Photo sur fond neutre, sourire naturel, pas de selfie |
| À propos | Présentation en 3-5 phrases, parcours, motivations | Évitez le récit chronologique ; allez droit au but |
| Compétences | Technologies maîtrisées, niveau estimé, certifications | Barres de progression ou tags visuels, honnêteté sur les niveaux |
| Projets | 3-6 projets détaillés avec description, technologies, liens | Captures d'écran, lien GitHub, démo live si possible |
| Formation | BTS SIO (option, année), formations complémentaires | Mentionnez les spécialisations et les modules pertinents |
| Expérience | Stages, alternances, projets freelance | Résultats concrets, pas juste une liste de tâches |
| Contact | Email, LinkedIn, GitHub, formulaire | Email professionnel (pas de pseudo fantaisiste) |
| CV téléchargeable | PDF optimisé, mis à jour | Un bouton visible, PDF < 1 Mo |
Projets à mettre en avant selon votre option
Pour l'option SLAM (développement) :
- Application web complète (frontend + backend) avec lien vers le code source
- API REST documentée (avec Swagger ou Postman)
- Projet mobile (React Native, Flutter) avec captures d'écran
- Contribution à un projet open source (même mineure, c'est valorisant)
- Script d'automatisation (Python) qui résout un problème concret
Pour l'option SISR (infrastructure) :
- Déploiement complet d'une infrastructure (AD, DNS, DHCP, GLPI)
- Mise en place d'un serveur web (Docker, Nginx, Apache)
- Configuration d'un pare-feu et d'un VPN
- Script d'administration PowerShell ou Bash
- Projet de monitoring (Zabbix, Grafana, Prometheus)
Rédiger une description de projet efficace
Pour chaque projet, incluez systématiquement :
- Contexte : quel problème le projet résout (en 1-2 phrases)
- Technologies : langages, frameworks, outils utilisés
- Votre rôle : ce que vous avez fait concrètement (si projet en équipe)
- Résultat : ce qui fonctionne, captures d'écran, métriques si possible
- Lien GitHub : code source (propre, commenté, avec README)
- Lien démo : version live si disponible
Configurer un domaine personnalisé
Un domaine personnalisé (prenom-nom.fr, prenom-nom.dev) renforce le professionnalisme de votre portfolio. La configuration est simple et l'hébergement reste gratuit sur GitHub Pages.
Acheter un nom de domaine
Les registrars les plus utilisés en France :
- OVHcloud : domaines .fr à partir de 6 euros/an, interface en français
- Gandi : bonne réputation, support réactif, environ 12 euros/an pour un .fr
- Namecheap : tarifs compétitifs pour les .dev et .io, interface en anglais
- Cloudflare Registrar : prix coûtant (pas de marge), DNS inclus
Choisissez un domaine professionnel : prenom-nom.fr ou prenom-nom.dev. Évitez les extensions exotiques (.ninja, .rocks) pour un contexte professionnel.
Configurer les DNS
Chez votre registrar, ajoutez les enregistrements DNS suivants :
| Type | Nom | Valeur | TTL |
|---|---|---|---|
| A | @ | 185.199.108.153 | 3600 |
| A | @ | 185.199.109.153 | 3600 |
| A | @ | 185.199.110.153 | 3600 |
| A | @ | 185.199.111.153 | 3600 |
| CNAME | www | votre-pseudo.github.io. | 3600 |
Configurer GitHub Pages
- Créez un fichier
CNAMEà la racine de votre dépôt contenant uniquement votre domaine :prenom-nom.fr - Poussez le fichier vers GitHub
- Dans Settings > Pages, vérifiez que le domaine personnalisé est détecté
- Cochez "Enforce HTTPS" (après propagation DNS, 1 à 24h)
# Ajouter le fichier CNAME
echo "prenom-nom.fr" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push origin mainLa propagation DNS peut prendre jusqu'à 24 heures. Pendant cette période, votre site peut être temporairement inaccessible via le nouveau domaine.
Optimisation et bonnes pratiques
Un portfolio technique doit être irréprochable sur le plan technique. Voici les optimisations à appliquer.
Performance
- Images optimisées : utilisez le format WebP, compressez avec TinyPNG ou Squoosh. Visez moins de 200 Ko par image.
- CSS/JS minifiés : si vous n'utilisez pas Jekyll, utilisez un outil comme cssnano ou terser avant de déployer
- Lazy loading : ajoutez
loading="lazy"sur les images sous le fold - Polices web : limitez-vous à 2 polices maximum, chargez-les avec
font-display: swap
SEO de base
<!-- Dans le <head> de chaque page -->
<meta name="description" content="Portfolio de Prénom Nom, étudiant BTS SIO option SLAM. Projets web, applications et compétences en développement.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://prenom-nom.fr/">
<!-- Open Graph pour les partages sur les réseaux sociaux -->
<meta property="og:title" content="Prénom Nom - Portfolio Développeur">
<meta property="og:description" content="Découvrez mes projets et compétences en développement web et informatique.">
<meta property="og:image" content="https://prenom-nom.fr/assets/images/og-image.jpg">
<meta property="og:url" content="https://prenom-nom.fr/">Accessibilité
- Attribut
altdescriptif sur toutes les images - Contraste suffisant entre texte et fond (ratio 4.5:1 minimum)
- Navigation au clavier fonctionnelle (tab, enter)
- Structure sémantique (header, main, nav, section, footer)
Responsive design
Votre portfolio doit être parfaitement lisible sur mobile. Testez avec les DevTools de Chrome (F12 > Toggle Device Toolbar) sur différentes tailles d'écran. Les recruteurs consultent souvent les portfolios sur leur téléphone entre deux entretiens.
Mise à jour régulière
Un portfolio abandonné depuis 6 mois envoie un mauvais signal. Mettez-le à jour au minimum :
- Après chaque nouveau projet terminé
- Après chaque stage ou période d'alternance
- Après l'obtention d'une certification
- Au minimum une fois par trimestre
Utilisez les bonnes pratiques Git pour versionner vos modifications : des commits clairs, des branches pour les modifications importantes, et un historique propre.
Exemples de portfolios inspirants
Voici les caractéristiques des meilleurs portfolios d'étudiants IT, à utiliser comme source d'inspiration.
Ce qui fait un bon portfolio
| Critère | Bon exemple | Mauvais exemple |
|---|---|---|
| Design | Épuré, professionnel, 2-3 couleurs cohérentes | Surchargé, animations partout, couleurs criardes |
| Navigation | Menu clair, scroll smooth, retour en haut | Liens cassés, pages orphelines, pas de menu |
| Contenu | Concis, orienté résultats, projets détaillés | Texte trop long, pas de projets, copier-coller |
| Technique | Rapide, responsive, HTTPS, code propre | Lent, cassé sur mobile, erreurs console |
| GitHub | Repos organisés, README clairs, commits réguliers | Repos vides, pas de README, un seul commit |
| Contact | Email pro, LinkedIn, formulaire fonctionnel | Aucun moyen de contact, email fantaisiste |
Erreurs fréquentes à éviter
- Template non personnalisé : si le texte lorem ipsum est encore visible ou si les sections "About" contiennent le texte du template, cela donne une impression de négligence
- Projets scolaires uniquement : incluez au moins un projet personnel qui montre votre curiosité et votre initiative
- Pas de code source : un développeur sans dépôts GitHub publics, c'est un menuisier sans atelier
- Informations obsolètes : vérifiez les dates, les liens et les descriptions régulièrement
- Photo non professionnelle : pas de photo de vacances, de soirée ou avec des filtres. Un fond neutre et une expression avenante suffisent
Checklist interactive : mon portfolio est-il prêt ?
Cochez chaque élément validé avant de partager votre portfolio avec un recruteur :
Conclusion
Créer un portfolio sur GitHub Pages est l'une des actions les plus rentables que vous puissiez entreprendre pendant votre BTS SIO. En quelques heures, vous obtenez un site professionnel, gratuit et maintenable qui démontre vos compétences techniques tout en servant d'outil concret pour vos candidatures. C'est un investissement que vous ne regretterez pas.
Pour enrichir votre portfolio, consultez nos guides sur Git, VS Code et Python pour ajouter de nouvelles compétences à votre profil. Si vous cherchez une alternance, notre guide sur l'alternance en informatique et nos conseils pour le CV développeur junior complètent parfaitement votre démarche. La documentation officielle GitHub Pages et le guide GitHub Docs détaillent les fonctionnalités avancées (GitHub Actions, Jekyll plugins, etc.).
À retenir
- Gratuit à vie : hébergement, HTTPS et bande passante inclus, sans publicité
- Domaine personnalisé : vous pouvez utiliser votre propre nom de domaine (ex: prenom-nom.fr)
- Contexte : quel problème le projet résout (en 1-2 phrases)
- Lien démo : version live si disponible
- Images optimisées : utilisez le format WebP, compressez avec TinyPNG ou Squoosh. Visez moins de 200 Ko par image.
Questions fréquentes
GitHub Pages est-il vraiment gratuit ?
Oui, GitHub Pages est entièrement gratuit pour les dépôts publics. L'hébergement, le HTTPS et la bande passante sont inclus sans frais. Les seules limites sont : 1 Go maximum pour le dépôt, 100 Go de bande passante par mois et 10 builds par heure. Ces limites sont largement suffisantes pour un portfolio.
Oui, mais GitHub Pages ne sert que des fichiers statiques. Vous devez d'abord compiler votre application (npm run build) puis déployer le dossier de build. Avec GitHub Actions, vous pouvez automatiser ce processus : chaque push déclenche la compilation et le déploiement. Des templates d'Actions existent pour React, Vue, Astro et Next.js.Puis-je utiliser un framework JavaScript (React, Vue) sur GitHub Pages ?
Cela dépend de votre ciblé. Pour des candidatures en France, le français est recommandé avec éventuellement une version anglaise. Pour un profil international ou des postes dans des entreprises tech, l'anglais est préférable. Vous pouvez créer les deux versions (fr/ et en/) avec un sélecteur de langue.Mon portfolio doit-il être en français ou en anglais ?
Visez entre 3 et 6 projets de qualité. Il vaut mieux 3 projets bien documentés (avec description, captures, code source propre et README) que 10 projets bâclés. Incluez au moins un projet personnel en plus des projets scolaires pour montrer votre initiative et votre curiosité.Combien de projets faut-il sur un portfolio BTS SIO ?
GitHub Pages ne supporte pas le PHP où le backend. Pour un formulaire de contact, utilisez un service tiers gratuit comme Formspree (formspree.io), Getform ou EmailJS. Ces services fournissent un endpoint vers lequel votre formulaire HTML envoie les données, et vous recevez les messages par email.Comment ajouter un formulaire de contact sur GitHub Pages ?
Oui, c'est même l'un de ses usages les plus courants. Avec Jekyll (intégré nativement), vous pouvez créer un blog avec catégories, tags, flux RSS et pagination. Écrivez vos articles en Markdown dans le dossier _posts/, et Jekyll génère automatiquement les pages HTML. C'est la solution idéale pour un blog technique minimaliste et rapide.GitHub Pages est-il adapté à un blog technique ?
Ajoutez Google Analytics (ou une alternative respectueuse de la vie privée comme Plausible ou Umami) en insérant le script de suivi dans votre fichier HTML. Cela vous permettra de suivre le nombre de visiteurs, les pages les plus consultées et la provenance du trafic. C'est utile pour savoir si votre portfolio est effectivement consulté après une candidature.Comment mesurer les visites sur mon portfolio GitHub Pages ?
Formatrice IT indépendante depuis 2016, ancienne étudiante BTS SIO SLAM. 6 ans d'expérience en entreprise.
