The right way to Use Hugging Face Areas to Host Your Portfolio for Free

Picture by Creator

# Introduction

 
A web-based portfolio isn’t elective anymore. It’s often the very first thing individuals verify after they need to see what you possibly can really do. Not your CV. Not your LinkedIn. Your work. In case you’re constructing issues as a developer, knowledge scientist, ML engineer, designer, and even simply studying, a portfolio offers your initiatives a spot to dwell. And also you don’t want paid internet hosting to do it.

Hugging Face Areas is a kind of instruments individuals overlook. It’s free, simple to deploy, and adequate to host a clear private web site with dwell demos. You’ll be able to maintain it easy or add interactive items if that matches your work. On this article, we’ll cowl what Hugging Face Areas is, why it’s nice for portfolios, and how one can deploy yours step-by-step.

# What’s Hugging Face Areas?

 
Hugging Face Areas is a platform that permits you to host net purposes instantly from a GitHub repository, making deployment easy and accessible even for newbies. Whereas it was initially designed to showcase machine studying demos, the platform has advanced considerably and now helps a variety of use instances, together with static web sites, Python-based purposes, interactive person interfaces, and absolutely practical AI-powered demos. You’ll be able to construct Areas utilizing:

• Static HTML/CSS/JS
• Gradio (Python UI framework)
• Streamlit

For portfolios, this flexibility is a large benefit. Let’s see step-by-step easy methods to host your portfolio on Hugging Face Areas totally free.

# Step 1: Making a Hugging Face Account

 
Go to Hugging Face and enroll.

# Step 2: Making ready Your Portfolio

 
You’ll be able to select one of many following approaches:
 

// Possibility A: Static Web site (HTML/CSS/JS)

Your folder would possibly seem like:

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

// Possibility B: Python-Based mostly Portfolio (Gradio / Streamlit)

This consists of recordsdata as:

# Step 3: Making a New House

1. Click on New House
    
   
    
   This opens the next web page
    
   
    
2. Select:
   • Proprietor: your username
   • House identify: e.g. my-portfolio
   • License: MIT (really useful)
3. Choose SDK:
   • Static for HTML, CSS, and JS portfolios
   • Gradio for Python-based interactive portfolios
   • Streamlit for knowledge dashboards
4. After filling up, click on Create House.
    
   
    

# Step 4: Importing or Connecting Your Code

 
You’ll be able to add recordsdata instantly or hook up with a GitHub repository.

• For Static SDK, simply add index.html and belongings.
• For Gradio or Streamlit, guarantee:
• app.py exists
• necessities.txt lists dependencies

Hugging Face mechanically builds and deploys your House. For instance, since I chosen Gradio, I’ll click on create the app.py file:
 

 

After this, the next web page opens:
 

 

I’ll edit the app.py file as follows:

import gradio as gr

def contact_message(identify, message):
    return f"Thanks {identify}! Your message has been obtained 😊"

with gr.Blocks(title="Eisha's Portfolio") as demo:
    gr.Markdown(
        """
        # 👋 Hello, I am Kanwal  
        ### AI / ML Fanatic | Python Developer  

        Welcome to my portfolio!  
        I take pleasure in constructing AI-powered purposes and clear backend techniques.
        """
    )

    gr.Markdown("## 🚀 Initiatives")
    gr.Markdown(
        """
        **🔹 PDF Parser with LangChain**  
        Customized PDF parsing with header/footer elimination and LLM integration.

        **🔹 Case Similarity Finder (FYP)**  
        Finds comparable medical/authorized instances utilizing LLaMA-based embeddings.

        **🔹 AI Chatbot Demo**  
        Conversational AI constructed utilizing Hugging Face fashions.
        """
    )

    gr.Markdown("## Resume")
    gr.Markdown(
        "[Download my resume](https://instance.com/resume.pdf)"
    )

    gr.Markdown("## Contact Me")
    identify = gr.Textbox(label="Your Title")
    message = gr.Textbox(label="Your Message", traces=3)
    output = gr.Textbox(label="Response")
    submit = gr.Button("Ship Message")
    submit.click on(contact_message, inputs=[name, message], outputs=output)

    gr.Markdown(
        """
        ---
        🔗 **GitHub:** https://github.com/yourusername  
        🔗 **LinkedIn:** https://linkedin.com/in/yourprofile  
        """
    )

demo.launch()

After enhancing the app.py file, click on on Commit new file to predominant:
 

# Step 5: Your Portfolio is Reside

 
Now, on the identical web page, click on on App to view your portfolio.
 

 
Upon clicking, you possibly can see your portfolio:
 

 
Alternatively, you may as well go to https://–.hf.house to view your portfolio. That is your dwell, shareable portfolio hyperlink. A portfolio doesn’t should be static. You’ll be able to embrace:

• About Me part
• Initiatives with dwell demos
• Resume obtain
• Contact hyperlinks
• GitHub and LinkedIn

With Gradio, you possibly can flip this into an interactive expertise.

# Tricks to Make Your Portfolio Stand Out

1. Add Reside Demos:
   • ML fashions
   • Chatbots
   • NLP instruments
   • Knowledge visualizations
2. Maintain It Light-weight: Free Areas have useful resource limits, so optimise belongings
3. Use a Clear UI: Minimal design over flashy animations
4. Add a README.md: Your House web page exhibits README content material, so use it correctly

# Closing Ideas

 
Hugging Face Areas is greater than a demo platform. It’s a free, trendy, and highly effective internet hosting answer for portfolios. In case your work includes code, knowledge, or AI, internet hosting your portfolio on Areas immediately differentiates you from conventional static websites. Your portfolio shouldn’t simply say what you are able to do. It ought to present it dwell.
 
 

Kanwal Mehreen is a machine studying engineer and a technical author with a profound ardour for knowledge science and the intersection of AI with drugs. She co-authored the e book “Maximizing Productiveness with ChatGPT”. As a Google Era Scholar 2022 for APAC, she champions range and tutorial excellence. She’s additionally acknowledged as a Teradata Variety in Tech Scholar, Mitacs Globalink Analysis Scholar, and Harvard WeCode Scholar. Kanwal is an ardent advocate for change, having based FEMCodes to empower girls in STEM fields.