Comment héberger gratuitement son portfolio avec Hugging Face Spaces ?

Hugging Face Spaces permet d’héberger gratuitement un portfolio interactif avec des démos en direct, sans prise de tête. Simple, flexible, et idéal pour les développeurs ou data scientists, c’est un atout pour montrer vos projets. Découvrez comment le configurer en quelques étapes.

3 principaux points à retenir.

Hugging Face Spaces offre un hébergement gratuit et facile pour portfolios interactifs.
Flexibilité : supporte sites statiques, Gradio, Streamlit, pour tous types de projets.
Déploiement rapide via GitHub ou upload direct, avec un lien live partageable.

Qu’est-ce que Hugging Face Spaces et pourquoi l’utiliser pour un portfolio

Hugging Face Spaces est une plateforme gratuite qui a d’abord été conçue pour héberger des démos de machine learning, mais laissez-moi vous dire : elle s’adapte parfaitement à la création de portfolios. Pourquoi ? Parce qu’elle offre une simplicité et une flexibilité qui manquent cruellement à d’autres solutions. Que vous soyez développeur, data scientist ou designer, vous pouvez créer un espace qui vous ressemble sans débourser un centime.

La plateforme supporte plusieurs types d’applications. Vous pouvez opter pour des sites statiques en HTML, CSS et JS, ou encore des applications Python via Gradio ou Streamlit. Cette diversité est un atout majeur, car elle vous permet de choisir le format qui met le mieux en valeur votre travail. Par exemple, si vous avez des projets interactifs, Gradio sera votre meilleur allié pour intégrer des démos vivantes qui captivent l’attention.

Un autre point fort de Hugging Face Spaces est son intégration avec GitHub. Vous pouvez directement connecter votre dépôt et déployer vos applications en un clin d’œil. Et le meilleur dans tout ça ? Vous obtenez un lien public direct pour partager votre portfolio avec le monde entier. Ça n’a jamais été aussi simple de montrer ce que vous savez faire !

En comparaison avec d’autres hébergements gratuits, souvent limités en termes de ressources ou nécessitant des compétences techniques avancées, Hugging Face Spaces se démarque. Vous n’avez pas besoin d’être un expert en déploiement pour utiliser cette plateforme. C’est un vrai coup de pouce pour ceux qui cherchent à se faire connaître dans le milieu tech.

Alors, si vous voulez un portfolio qui ne se contente pas de dire ce que vous pouvez faire, mais qui le montre réellement, Hugging Face Spaces est un excellent choix. Pour plus de détails sur la mise en place de votre portfolio, consultez ce guide ici.

Comment créer et préparer son portfolio pour Hugging Face Spaces

Pour héberger votre portfolio sur Hugging Face Spaces, vous avez deux grandes options : créer un site statique avec HTML, CSS et JavaScript, ou développer une application Python interactive avec Gradio ou Streamlit. Chacune de ces approches a ses avantages, mais commençons par la première.

OPTION A : SITE STATIQUE (HTML/CSS/JS)

Cette méthode est idéale si vous souhaitez un portfolio simple et rapide à mettre en place. La structure minimale de votre projet devrait ressembler à ceci :

portfolio/
│── index.html
│── style.css
│── script.js

Le fichier index.html contiendra le contenu de votre portfolio. C’est ici que vous afficherez vos projets, votre parcours et vos informations de contact.

OPTION B : PORTFOLIO BASÉ SUR PYTHON (GRADIO / STREAMLIT)

Cette option est parfaite si vous souhaitez intégrer des fonctionnalités interactives. La structure pour un projet utilisant Gradio ou Streamlit devrait inclure :

app.py
requirements.txt

Le fichier app.py contiendra le code de votre application, tandis que requirements.txt spécifiera les bibliothèques nécessaires.

Pour éviter les erreurs, commencez avec un projet simple. Voici un exemple de contenu minimal pour un portfolio Python utilisant Gradio :

import gradio as gr

def contact_message(name, message):
    return f"Merci {name} ! Votre message a été reçu 😊"

with gr.Blocks(title="Mon Portfolio") as demo:
    gr.Markdown("# 👋 Bonjour, je suis [Votre Nom]")
    gr.Markdown("### Développeur Python | Passionné par l'IA")
    gr.Markdown("## Projets")
    gr.Markdown("**🔹 Mon Projet 1** - Description du projet.")
    gr.Markdown("## CV")
    gr.Markdown("[Téléchargez mon CV](https://example.com/resume.pdf)")
    
    name = gr.Textbox(label="Votre Nom")
    message = gr.Textbox(label="Votre Message", lines=3)
    output = gr.Textbox(label="Réponse")
    submit = gr.Button("Envoyer le Message")
    submit.click(contact_message, inputs=[name, message], outputs=output)

demo.launch()

Avant de télécharger vos fichiers, assurez-vous que l’organisation est claire. Placez app.py et requirements.txt dans le même dossier. Avec cette structure, vous êtes prêt à créer un portfolio qui ne se contente pas de montrer ce que vous faites, mais le fait de manière interactive. Pour plus de détails sur la mise en place, vous pouvez consulter cette vidéo ici.

Comment créer un Hugging Face Space et y déployer son portfolio

Créer un Hugging Face Space pour héberger votre portfolio est un jeu d’enfant. Suivez ce guide étape par étape pour mettre en ligne vos projets sans débourser un centime. Commençons.

Étape 1 : Créer un compte Hugging Face

Rendez-vous sur le site de Hugging Face et inscrivez-vous. Cela ne prend que quelques minutes. Une fois que vous êtes connecté, vous êtes prêt à passer à la prochaine étape.

Étape 2 : Créer un nouvel espace

Cliquez sur le bouton New Space. Une page s’ouvre où vous allez configurer votre espace. Voici ce que vous devez faire :

Owner : Sélectionnez votre nom d’utilisateur.
Space name : Choisissez un nom accrocheur pour votre portfolio, par exemple mon-portfolio.
License : Optez pour la licence MIT, c’est la plus recommandée.

Ensuite, sélectionnez le SDK qui correspond à vos besoins :

Static : Pour un site en HTML, CSS et JS.
Gradio : Pour des portfolios interactifs basés sur Python.
Streamlit : Pour des tableaux de bord de données.

Une fois que tout est rempli, cliquez sur Create Space.

Étape 3 : Uploader ou connecter votre code

Vous avez deux options : uploader directement vos fichiers ou connecter un dépôt GitHub. Pour un portfolio statique, il vous suffit de télécharger votre index.html et vos fichiers d’assets.

Pour les projets Python, assurez-vous que app.py et requirements.txt sont présents. Hugging Face se charge de l’automatisation du build et du déploiement, ce qui signifie que vous n’avez pas à vous soucier de la mise en ligne manuelle.

Étape 4 : Valider le déploiement

Après avoir uploadé vos fichiers, cliquez sur Commit new file to main. Cela lancera le processus de déploiement. Une fois terminé, vous pouvez accéder à votre portfolio en cliquant sur App sur la même page. Votre portfolio est désormais en ligne !

Pour y accéder facilement, vous pouvez utiliser le lien public sous la forme https://-.hf.space. C’est aussi simple que ça ! Si vous voulez en savoir plus sur le processus, consultez cet article.

Comment rendre son portfolio attractif et performant sur Hugging Face Spaces

L’attractivité de votre portfolio sur Hugging Face Spaces repose sur plusieurs éléments clés. Premièrement, l’intégration de démos interactives est cruciale. Que vous présentiez des modèles de machine learning, des chatbots ou des visualisations de données, ces fonctionnalités permettent aux visiteurs d’expérimenter directement vos compétences. C’est un excellent moyen de montrer ce que vous savez faire, plutôt que de simplement le dire.

Ensuite, un design épuré est essentiel. Une interface minimaliste facilite la navigation et permet à vos projets de briller sans distractions inutiles. Utilisez des couleurs harmonieuses et des polices lisibles pour que l’expérience utilisateur soit agréable. Pensez également à optimiser les ressources de votre portfolio. Les comptes gratuits sur Hugging Face Spaces ont des limites de ressources, donc évitez de surcharger votre site avec des fichiers lourds ou des animations trop gourmandes.

Un autre point important est d’ajouter un fichier README.md pertinent. Ce fichier sert de carte d’identité à votre espace et peut enrichir la page de présentation. Expliquez qui vous êtes, ce que vous faites et ce que les visiteurs peuvent attendre de votre portfolio.

Pour structurer votre contenu, voici quelques sections à envisager :

À propos : Présentez-vous brièvement, vos compétences et vos passions.
Projets avec démos : Incluez des projets qui mettent en avant vos capacités, comme des applications interactives ou des modèles fonctionnels.
CV téléchargeable : Facilitez l’accès à votre CV pour que les recruteurs puissent le consulter rapidement.
Liens GitHub/LinkedIn : Offrez des accès directs à vos profils pour permettre aux visiteurs d’en savoir plus sur vous.
Formulaire de contact : Permettez aux visiteurs de vous écrire directement depuis votre portfolio.

Pour vous aider à optimiser votre portfolio, voici un tableau synthétique des bonnes pratiques :

Pratique	Conseil
Intégrer des démos	Utilisez des modèles ML, chatbots et visualisations interactives.
Design épuré	Optez pour une interface minimaliste et facile à naviguer.
Optimiser les ressources	Évitez les fichiers lourds pour respecter les limites de la plateforme.
Ajouter un README.md	Utilisez-le pour présenter votre travail et votre parcours.
Structurer le contenu	Incluez les sections essentielles pour une navigation fluide.

Alors, prêt à booster votre visibilité avec Hugging Face Spaces ?

Hugging Face Spaces est une solution gratuite, simple et moderne pour héberger un portfolio interactif qui fait la différence. Que vous soyez développeur, data scientist ou passionné d’IA, vous pouvez montrer vos projets en live, sans payer ni vous prendre la tête avec des infrastructures complexes. En quelques étapes, vous créez un espace à votre image, avec demos, CV et contact. Le vrai bénéfice ? Transformer votre portfolio en une vitrine dynamique et convaincante, prête à impressionner recruteurs ou clients.

FAQ

Qu’est-ce que Hugging Face Spaces ?

Hugging Face Spaces est une plateforme gratuite qui permet de déployer facilement des applications web, notamment des démos d’IA, des sites statiques ou des applications Python interactives, directement depuis un dépôt GitHub ou par upload direct.

Puis-je héberger un portfolio interactif gratuitement avec Hugging Face Spaces ?

Oui, Hugging Face Spaces offre un hébergement gratuit idéal pour les portfolios, notamment ceux qui veulent intégrer des démos interactives via Gradio ou Streamlit, avec un lien public et un déploiement simple.

Comment déployer mon portfolio sur Hugging Face Spaces ?

Il suffit de créer un compte Hugging Face, de créer un nouveau Space en choisissant le SDK adapté (Static, Gradio ou Streamlit), puis d’uploader vos fichiers ou connecter un repo GitHub. La plateforme se charge du build et du déploiement automatiquement.

Puis-je intégrer des modèles d’IA ou des chatbots dans mon portfolio ?

Absolument. Hugging Face Spaces supporte les applications Python avec Gradio ou Streamlit, permettant d’intégrer facilement des modèles d’IA, chatbots, visualisations ou autres démos interactives dans votre portfolio.

Quelles sont les limites de l’hébergement gratuit sur Hugging Face Spaces ?

Les Spaces gratuits ont des limites de ressources (CPU, RAM, stockage et bande passante), il faut donc optimiser les assets et le code pour garantir une bonne performance sans dépasser ces quotas.

A propos de l’auteur

Franck Scandolera est consultant expert en Analytics, Data, Automatisation et IA, spécialisé dans le développement d’applications intelligentes via OpenAI API, Hugging Face et LangChain. Responsable de l’agence webAnalyste et de l’organisme Formations Analytics, Franck accompagne les professionnels dans l’intégration concrète de l’IA dans leurs workflows métier, apportant pragmatisme et expertise technique.

Franck Scandolera

⭐ Analytics engineer, Data Analyst et Automatisation IA indépendant ⭐

Ref clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Football Français, Texdecor…

Mon terrain de jeu :

Data Analyst & Analytics engineering : tracking avancé (GTM server, e-commerce, CAPI, RGPD), entrepôt de données (BigQuery, Snowflake, PostgreSQL, ClickHouse), modèles (Airflow, dbt, Dataform), dashboards décisionnels (Looker, Power BI, Metabase, SQL, Python).
Automatisation IA des taches Data, Marketing, RH, compta etc : conception de workflows intelligents robustes (n8n, App Script, scraping) connectés aux API de vos outils et LLM (OpenAI, Mistral, Claude…).
Engineering IA pour créer des applications et agent IA sur mesure : intégration de LLM (OpenAI, Mistral…), RAG, assistants métier, génération de documents complexes, APIs, backends Node.js/Python.