Spaces:
Running
Running
File size: 2,931 Bytes
a0300f8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
# 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](https://huggingface.co/) account
2. Git installed on your machine
---
## Step 1: Create a New Space
1. Go to [https://huggingface.co/new-space](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
```bash
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
```bash
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`:
```python
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! 🎉
|