So stellst du Google AI Studio-Websites und Web-Apps bereit

Stelle deine Google AI-Website oder Web-App Schritt für Schritt mit GitHub und Hostinger bereit. Einfache, klare Anweisungen, um dein Projekt online und vollständig funktionsfähig zu bekommen.

Roadmap & Ressourcen

Wähle einen Hosting-Plan und richte deine Site ein

Wähle deinen Hosting-Plan

Hostinger Business Plan

Wähle den im Video gezeigten Plan und setze dann die Anleitung fort.

RECOMMENDED

https://www.hostg.xyz/SHJ9N

Hol dir deine kostenlose Domain

Zahlung und Kontoeinrichtung abschließen

Erstelle eine neue Site mit Empty PHP/HTML Website

Bereite dein Projekt in Google AI vor

Öffne dein Google AI-Projekt

Klicke auf Save to GitHub

Erstelle ein neues Repository

Klicke auf Add Changes, um das gesamte Projekt hochzuladen

Verbinde dein Projekt mit Hostinger

Zurück zu Hostinger

Node.js Web App auswählen

Klicke auf Continue with GitHub

Wähle dasselbe Repository aus

Hostinger erkennt Vite automatisch (keine Änderungen erforderlich)

Den erforderlichen Gemini-API-Key hinzufügen

Füge den Gemini-API-Key als Umgebungsvariable hinzu

API_KEY GOOGLE_API_KEY GEMINI_API_KEY VITE_GOOGLE_API_KEY VITE_GEMINI_API_KEY

API_KEY

Gemini-API-Schlüssel

GOOGLE_API_KEY

Gemini-API-Schlüssel

GEMINI_API_KEY

Gemini-API-Schlüssel

VITE_GOOGLE_API_KEY

Gemini-API-Schlüssel

VITE_GEMINI_API_KEY

Gemini-API-Schlüssel

Diesen Schlüssel findest du in Google AI Studio

API-Schlüssel öffnen

https://aistudio.google.com/app/apikey

Stelle deine Site bereit + behebe das Problem mit dem weißen Bildschirm

Klicke auf Deploy

Verbinde deine Domain

Wenn ein leerer weißer Bildschirm erscheint, führe den folgenden Prompt in Google AI aus

Prompt zur Behebung des weißen Bildschirms

Es wird ohne Fehler bereitgestellt, aber in der Produktion zeigt es eine leere weiße Seite…

It deploys without errors, but in production, it renders a blank white page. No console errors appear. The issue occurs on multiple hosting providers, so it is not a hosting problem. Please debug the app and fix the root cause so it renders properly in production, without changing the existing UI.

Save → Stage → Commit zu GitHub

Hostinger führt das Re-Deployment des Updates automatisch durch

✨ Finaler Workflow

Zusammenfassung des finalen Workflows

Google AI baut dein Projekt GitHub synchronisiert Änderungen Hostinger stellt alles automatisch bereit Jedes zukünftige Update in Google AI → sofort live auf deiner Site