Хостинг портфолио бесплатно в Hugging Face Spaces

Как использовать Hugging Face Spaces для хостинга портфолио бесплатно

Введение

Онлайн-портфолио сегодня обязательно для всех. Потенциальные работодатели или клиенты первым делом смотрят на него, чтобы понять реальные навыки, а не на резюме или профиль в LinkedIn. Разработчики, специалисты по данным, инженеры машинного обучения, дизайнеры или даже те, кто только учится, находят в портфолио идеальное место для своих проектов. И платный хостинг здесь не требуется.

Hugging Face Spaces — инструмент, который часто упускают из виду. Он бесплатный, развертывание проходит легко, а результат подходит для аккуратного личного сайта с рабочими демо. Подойдет как простая версия, так и с интерактивными элементами под вашу деятельность. Далее разберем, что представляет собой Hugging Face Spaces, почему он удобен для портфолио и как запустить свое пошагово.

Что такое Hugging Face Spaces?

Hugging Face Spaces — это платформа для размещения веб-приложений прямо из репозитория GitHub, что делает процесс доступным даже новичкам. Сначала ее создавали для демонстрации примеров машинного обучения, но со временем возможности расширились: теперь поддерживаются статические сайты, приложения на Python, интерфейсы для взаимодействия и полноценные демо с ИИ. Spaces строят с помощью:

статического HTML/CSS/JS;
Gradio (фреймворк для UI на Python);
Streamlit.

Такая гибкость особенно ценна для портфолио. Сейчас разберем, как разместить портфолио на Hugging Face Spaces бесплатно шаг за шагом.

Шаг 1: Создание учетной записи Hugging Face

Перейдите на сайт Hugging Face и зарегистрируйтесь.

Шаг 2: Подготовка портфолио

Выберите один из подходов:

Вариант A: Статический сайт (HTML/CSS/JS)

Папка может выглядеть так:

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

Вариант B: Портфолио на Python (Gradio / Streamlit)

Включает файлы вроде:

app.py
requirements.txt

Шаг 3: Создание нового Space

Нажмите кнопку New Space.
Откроется такая страница.
Укажите:
- Владелец: ваше имя пользователя;
- Название Space: например, my-portfolio;
- Лицензия: MIT (рекомендуется).
Выберите SDK:
- Static — для портфолио на HTML, CSS и JS;
- Gradio — для интерактивных портфолио на Python;
- Streamlit — для дашбордов с данными.
Заполните поля и нажмите Create Space.

Шаг 4: Загрузка или подключение кода

Файлы загружают напрямую или связывают с репозиторием GitHub.

Для Static SDK достаточно загрузить index.html и ресурсы.
Для Gradio или Streamlit проверьте наличие:
- app.py;
- requirements.txt с зависимостями.

Hugging Face сам соберет и запустит Space. К примеру, при выборе Gradio создайте файл app.py:

После этого появится такая страница:

Отредактируйте app.py следующим образом:

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()

После правок в app.py нажмите Commit new file to main:

Шаг 5: Портфолио запущено

На той же странице кликните App, чтобы открыть портфолио.

Появится ваше портфолио:

Также доступно по адресу https://<your-username>-<space-name>.hf.space — это постоянная ссылка для распространения. Портфолио не обязано быть статичным, туда входят:

раздел обо мне;
проекты с живыми демо;
скачивание резюме;
контакты;
ссылки на GitHub и LinkedIn.

Gradio превращает его в интерактивный опыт.

Советы, чтобы портфолио выделялось

Добавьте живые демо:
- модели ML;
- чатботы;
- инструменты NLP;
- визуализации данных.
Сделайте легковесным: бесплатные Spaces имеют ограничения по ресурсам, оптимизируйте файлы.
Выберите чистый интерфейс: минимум дизайна вместо ярких анимаций.
Создайте README.md: содержимое отображается на странице Space, используйте грамотно.

Итоги

Hugging Face Spaces выходит за рамки платформы для демо. Это бесплатный, актуальный и мощный вариант хостинга портфолио. Если ваша работа связана с кодом, данными или ИИ, размещение здесь сразу отличит от обычных статических сайтов. Портфолио должно демонстрировать навыки в действии, а не просто описывать их.

Бесплатный хостинг портфолио на Hugging Face Spaces