HUGGINGFACE_DEPLOY.md

Deploying to Hugging Face Spaces (Static HTML)

This guide explains how to deploy the presentation site to Hugging Face Spaces on port 7860.

---

Prerequisites

1. A Hugging Face account
2. Git installed on your machine

---

Step 1: Create a New Space

1. Go to https://huggingface.co/new-space
2. Enter a Space name (e.g., ai-powered-developer-presentation)
3. Select Static as the Space SDK (or "HTML" if available)
4. Choose visibility (Public or Private)
5. Click Create Space

---

Step 2: Clone the Space Repository

git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME

---

Step 3: Copy Project Files

Copy these files into the cloned repository:

YOUR_SPACE_NAME/
├── index.html
├── style.css
├── main.js
└── icon_assets/          # Copy the entire folder
    ├── chatgpt-3.svg
    ├── Google_Gemini_icon_2025.svg
    ├── Anthropic Symbol SVG.svg
    ├── OpenAI Symbol SVG.svg
    ├── X Symbol SVG.svg
    ├── Vscode.svg
    ├── cursor.svg
    ├── antigravity.png
    ├── Windsurf Icon.png
    ├── kiro.svg
    └── qoder.svg

---

Step 4: Fix Icon Paths for Hugging Face

In index.html, change all icon paths from ../icon_assets/ to ./icon_assets/:

Find and Replace:

• ../icon_assets/ → ./icon_assets/

This is because Hugging Face serves from the root of the space.

---

Step 5: Commit and Push

git add .
git commit -m "Add presentation site files"
git push

---

Step 6: Access Your Site

Your site will be available at:

https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space

Hugging Face Spaces automatically serves static HTML on port 7860 internally.

---

Alternative: Using app.py (Gradio Wrapper)

If you prefer a Python wrapper, create an app.py:

import gradio as gr
from pathlib import Path

# Read the HTML file
html_content = Path("index.html").read_text()

# Simple Gradio app that serves HTML
with gr.Blocks() as demo:
    gr.HTML(html_content)

demo.launch(server_port=7860)

And a requirements.txt:

gradio

---

Troubleshooting

Issue	Solution
Icons not loading	Make sure paths are ./icon_assets/ (relative to root)
CSS/JS not loading	Verify all files are in the same directory
404 errors	Check file names are exactly matching (case-sensitive)

---

Quick Checklist

• Space created on Hugging Face
• Files copied to the space directory
• Icon paths updated to ./icon_assets/
• Icon folder included with all assets
• Pushed to Hugging Face

Your presentation will be live! 🎉