🚀 Deploy & Share

Lesson 7 · Lección 7 · Publicar Tu Proyecto en Internet

You've built something real. Now let's put it on the internet so anyone in Oakland — or anywhere in the world — can see it. We'll use GitHub Pages: free, instant, no server needed.

Has construido algo real. Ahora vamos a ponerlo en internet usando GitHub Pages — gratis, instantáneo, sin servidor.

🚀
click to launch →
1

Test Locally First · Prueba Primero en Local

Always test locally before deploying. Open a terminal, navigate to the project folder, and run a local web server: 

# Option A: Python (built into macOS and most Linux)
cd /path/to/SudoRoomOaklandData/docs
python3 -m http.server 8000

# Option B: Node.js
npx serve docs

# Then open this URL in your browser:
http://localhost:8000
⚠️

Always use a local server, not file:// Opening index.html directly (double-click) won't work — the browser blocks fetch() requests from file:// URLs for security reasons.
Siempre usa un servidor local. El doble clic no funcionará.

2

Push to GitHub · Subir a GitHub

Make sure all your changes are committed and pushed: 

# See what files changed
git status

# Stage your changes
git add docs/

# Commit with a descriptive message
git commit -m "Add Vietnamese language data and colors"

# Push to GitHub
git push origin main
💡

Good commit messages say what and why, not just "update". "Add Vietnamese language data" is much better than "fix stuff". Future you (and teammates!) will thank you.

3

Enable GitHub Pages · Activar GitHub Pages

Do this once — GitHub remembers the setting forever:

Your site will be live at: https://yourusername.github.io/SudoRoomOaklandData/
⚡

After the first setup, every git push automatically updates your live site in 1–2 minutes. No manual deploy steps!
Después de la primera configuración, cada git push actualiza tu sitio automáticamente.

4

Common Problems · Problemas Comunes

Problem / ProblemaSolution / Solución
CSV not loading Check the path in main.js. On GitHub Pages the path must be relative (start with ./ or ../).
3D canvas is blank Open the browser console (F12). Look for red error messages. Most likely a JavaScript import or path error.
Works locally, not on GitHub File paths are case-sensitive on GitHub servers. Data/file.csv ≠ data/file.csv.
Page not updating Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows). GitHub Pages can take up to 3 minutes.
Fonts look wrong Google Fonts needs internet access. Works on GitHub Pages, not on offline local files.
3D model not showing Check docs/models/manifest.json and that the .glb file is in docs/models/.
5

Opening the Browser Console · La Consola del Navegador

The browser console is your debugging superpower. It shows errors, logs, and lets you run JavaScript live: 

// How to open the console:
// Mac:     Cmd + Option + I → click "Console"
// Windows: F12 → click "Console"

// Our code logs helpful messages:
console.log("CSV loaded:", data);
// → CSV loaded: [{label: "Spanish Total", population: 87798, ...}]

// Red messages = errors. Fix these first!
// Yellow = warnings. Usually safe to ignore.

🎉 You Did It! · ¡Lo Lograste!

You've completed all 7 lessons. Here's what you now know:

HTML structure ES Modules CSV data parsing Three.js basics Hex colors 3D coordinates Lighting & camera Animation loops Raycasting GitHub Pages Git workflow

These are real industry skills. The same Three.js you used here powers Google Maps, product configurators, and game engines.

Estas son habilidades reales de la industria. ¡Comparte tu proyecto!

👁 See Your Visualization 📚 Revisit Lessons
← Lesson 6 🏠 Tutorial Home