How to Use Hugging Face Space to Host Your Portfolio for Free

Image by author

# Introduction

Online portfolios are no longer optional. This is usually the first thing people check out when they want to see what you can actually do. Not your CV. Not your LinkedIn. Your work. If you’re a developer, data scientist, ML engineer, designer, or even just learning, a portfolio gives your projects a place to live. And you don’t need paid hosting to do it.

Hugging Face Space is one of those tools that people overlook. It’s free, easy to deploy, and good enough for hosting a clean personal site with live demos. You can keep it simple or add interactive pieces if it fits your work. In this article, we’ll look at what hugging face space is, why it’s great for portfolios, and how you can deploy it step by step.

# What is hugging face space?

Hugging Face Spaces is a platform that allows you to host web applications directly from a GitHub repository, making deployment simple and accessible even for beginners. Although it was originally designed to showcase machine learning demos, the platform has evolved significantly and now supports a wide range of use cases, including static websites, Python-based applications, interactive user interfaces, and fully functional AI-powered demos. You can create a space using:

Static HTML/CSS/JS
Gradio (Python UI Framework)
Streamlight

For portfolios, this flexibility is a big advantage. Let’s take a step-by-step look at how to host your portfolio for free on Hugging Face Space.

# Step 1: Creating a Hugging Face Account

Go to Hugging Face and Sign up.

# Step 2: Preparing Your Portfolio

You can choose one of the following approaches:

// Option A: Static Website (HTML/CSS/JS)

Your folder may look like this:

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

// Option B: Python-based Portfolio (Gradio/Streamlit)

It includes these files:

# Step 3: Creating a New Space

Click on New Space

This opens the next page
choose:
- Owner: your username
- Space Name: For example my-portfolio
- License: MIT (recommended)
Select SDK:
- HTML, CSS and JS static for portfolio
- Gradio for Python-based interactive portfolios
- Streamlight for Data Dashboard
Click after filling make space.

# Step 4: Upload your code or connect

You can upload files directly or connect to a GitHub repository.

For Static SDK, simply upload Index.html and assets.
For Gradio or Streamlight, make sure:

App.py exists
requirements.txt lists dependencies

Hugging Face automatically creates and deploys your location. For example, since I selected Gradio, I would click on Create app.py file:
app.pe app.pe

After this the following page opens:
page following app.py

I would edit the App.py file as follows:

import gradio as gr

def contact_message(name, message):
    return f"Thanks {name}! Your message has been received 😊"

with gr.Blocks(title="Eisha's Portfolio") as demo:
    gr.Markdown(
        """
        # 👋 Hi, I'm Kanwal  
        ### AI / ML Enthusiast | Python Developer  

        Welcome to my portfolio!  
        I enjoy building AI-powered applications and clean backend systems.
        """
    )

    gr.Markdown("## 🚀 Projects")
    gr.Markdown(
        """
        **🔹 PDF Parser with LangChain**  
        Custom PDF parsing with header/footer removal and LLM integration.

        **🔹 Case Similarity Finder (FYP)**  
        Finds similar medical/legal cases using LLaMA-based embeddings.

        **🔹 AI Chatbot Demo**  
        Conversational AI built using Hugging Face models.
        """
    )

    gr.Markdown("## Resume")
    gr.Markdown(
        "(Download my resume)(https://example.com/resume.pdf)"
    )

    gr.Markdown("## Contact Me")
    name = gr.Textbox(label="Your Name")
    message = gr.Textbox(label="Your Message", lines=3)
    output = gr.Textbox(label="Response")
    submit = gr.Button("Send Message")
    submit.click(contact_message, inputs=(name, message), outputs=output)

    gr.Markdown(
        """
        ---
        🔗 **GitHub:** https://github.com/yourusername  
        🔗 **LinkedIn:** https://linkedin.com/in/yourprofile  
        """
    )

demo.launch()

After editing the app.py file, click Commit new file to main:
commit file

# Step 5: Your Portfolio is Live

Now, on the same page, click on the app to view your portfolio.
View App
By clicking you can see your portfolio:

Alternatively, you can also visit https://–.hf.space to view your portfolio. This is your live, shareable portfolio link. A portfolio does not have to be static. You can include:

about me section
Live Demo Projects
resume download
contact link
GitHub and LinkedIn

With Gradio, you can turn this into an interactive experience.

# Tips to Make Your Portfolio Stand Out

Add Live Demo:
- ml model
- chatbots
- nlp tools
- data visualization
Keep it light: Free space has resource limitations, so optimize assets
Use Clean UI: Minimal design with attractive animations
Add a README.md: Your Space page shows README content, so use it wisely

# final thoughts

Hugging Face Space is more than a demo platform. It is a free, modern and powerful hosting solution for portfolios. If your work involves code, data, or AI, hosting your portfolio on Spaces instantly sets you apart from traditional static sites. Your portfolio shouldn’t just show what you can do. It should be shown live.

Kanwal Mehreen He is a machine learning engineer and a technical writer with a deep passion for the intersection of AI with data science and medicine. He co-authored the eBook “Maximizing Productivity with ChatGPT”. As a Google Generation Scholar 2022 for APAC, she is an advocate for diversity and academic excellence. She has also been recognized as a Teradata Diversity in Tech Scholar, a Mitex GlobalLink Research Scholar, and a Harvard VCode Scholar. Kanwal is a strong advocate for change, having founded FEMCodes to empower women in STEM fields.