Vertiefung · Deine eigene Web-App · Lektion W.7 · 20 Min.

Online stellen: GitHub, Netlify und was rechtlich dazugehört

Danach ist deine App im Internet erreichbar, jede Änderung geht nach deinem Okay automatisch online, und du weißt, welcher kostenlose Anbieter für dein Projekt erlaubt ist und wann Impressum und Datenschutzerklärung Pflicht sind.

Stand 24. Oktober 2026 · Wir prüfen die Inhalte regelmäßig gegen die aktuellen Programme. Was ist neu?

Bisher läuft deine App nur auf deinem Rechner. Jetzt kommt sie ins Internet. Der übliche Weg: Dein Programmcode liegt in einem privaten Archiv bei GitHub, und ein Hosting-Dienst holt ihn von dort und stellt die App online. Ändert Claude etwas und du gibst es frei, ist die neue Version nach ein, zwei Minuten live.

Aus Stufe 3 kennst du Netlify Drop. Für eine App mit Datenbank nehmen wir den Weg über GitHub, damit Updates automatisch klappen. Und wir schauen genau hin, welcher kostenlose Tarif was erlaubt – das wird oft übersehen.

Schritt für Schritt

Wähl den Anbieter, der für dich erlaubt ist.

Netlify (kostenlos) Vercel Hobby (kostenlos) Cloudflare Pages (kostenlos)
Geschäftlich erlaubt ja nein, nur privat und nicht-kommerziell offiziell nicht eindeutig
Grenze 300 Credits im Monat (Bandbreite kostet 20 Credits je GB) großzügig für Privates 100.000 Aufrufe von Funktionen am Tag
Bezahlt ab 20 $ im Monat 20 $ im Monat je Platz 5 $ im Monat

Für den Einstieg und für Geschäftliches empfehlen wir Netlify. Vercel Hobby nur, wenn es wirklich privat bleibt: Als kommerziell zählt dort schon, wenn irgendwer daran verdient, auch durch Werbung oder bezahlte Programmierung.

Leg ein GitHub-Konto an auf github.com, falls du noch keins hast. Private Archive (englisch „Repositories“) sind kostenlos.

Sag Claude:Hilf mir, mein Projekt in ein neues, privates GitHub-Repository hochzuladen. Prüf vorher, dass .env.local und keine Schlüssel mit hochgeladen werden. Erklär mir jeden Schritt, den ich im Browser machen muss.

Verbinde Netlify mit GitHub. Auf netlify.com anmelden (am einfachsten mit deinem GitHub-Konto), „Add new project“ → „Import an existing project“ → GitHub wählen, Zugriff erlauben und dein Archiv auswählen, am Ende „Publish“. Claude sagt dir, welche Einstellungen für deine App richtig sind.

Trag die Verbindung zu Supabase bei Netlify ein. Die Werte aus deiner .env.local (Adresse und öffentlicher Schlüssel) trägst du in den Einstellungen deines Netlify-Projekts als Umgebungsvariablen ein (englisch „Environment variables“). Selbst, nicht über den Chat. Danach neu veröffentlichen lassen.

Sag Supabase die neue Adresse. Damit die Mail-Links nach der Anmeldung auf deine Online-App zeigen statt auf deinen Rechner, trägst du die Netlify-Adresse in Supabase bei den Anmelde-Einstellungen als erlaubte Adresse ein.

Sag Claude:Meine App ist jetzt unter [Adresse] online. Was muss ich in Supabase bei der Anmeldung umstellen, damit die Mail-Links dorthin führen? Schritt für Schritt.

Mach den Test aus W.6 noch einmal online. Mit zwei Konten, alle vier Prüfungen. Online kann sich etwas anders verhalten als auf deinem Rechner.

Kläre das Rechtliche.

  • Impressum: Pflicht für geschäftsmäßige Angebote, die in der Regel gegen Entgelt angeboten werden (§ 5 Digitale-Dienste-Gesetz). Eine rein private Helferliste im Verein braucht meist keins; eine App für dein Geschäft schon.
  • Datenschutzerklärung: Sobald deine App Daten von Menschen erhebt, etwa Mail-Adressen bei der Anmeldung, musst du sie beim Erheben informieren (Art. 13 DSGVO). Nenne Supabase, Netlify und deinen Mail-Dienst.
  • Auftragsverarbeitungsverträge: Bei Daten anderer Menschen brauchst du sie mit den Diensten (Supabase bietet einen an; bei Netlify und Vercel prüfen – bei Vercel gibt es ihn erst ab Pro).
Sag Claude:Meine App: [kurz beschreiben], genutzt von [wem], Dienste: Supabase (Frankfurt), Netlify, [Mail-Dienst]. Brauche ich ein Impressum? Schreib mir einen Entwurf für die Datenschutzerklärung und sag mir, wo ich lieber Fachleute frage.
Hängst du irgendwo fest? Frag deinen Claude – so oft du willst, auch zu jedem einzelnen Schritt.
Sag Claude:Ich mache gerade die Lektion „W.7 Online stellen: GitHub, Netlify und was rechtlich dazugehört“ im AWA Campus und hänge bei diesem Schritt: … Erklär ihn mir bitte einfacher, Schritt für Schritt. Ich bin Anfänger.
Geschafft, wenn …
  • dein Code in einem privaten GitHub-Archiv liegt, ohne Schlüssel,
  • deine App über Netlify online ist und mit Supabase verbunden,
  • die Mail-Links auf die Online-Adresse führen,
  • der Test mit zwei Konten auch online bestanden ist,
  • du weißt, ob du Impressum und Datenschutzerklärung brauchst, und sie gegebenenfalls eingebaut hast.
Wörter erklärt
  • GitHub: ein Dienst, der Programmcode mit seinem Sicherungsbuch speichert, privat oder öffentlich.
  • Repository: ein Projekt-Archiv bei GitHub.
  • Hosting: einen Dienst nutzen, der deine App im Internet bereitstellt.
  • Umgebungsvariable: eine Einstellung, die beim Hosting-Dienst hinterlegt wird statt im Code, zum Beispiel die Supabase-Adresse.
  • Deploy: eine neue Version online stellen.