Welche Website eignet sich für den ersten Versuch?
Beginne mit einer kleinen Informationswebsite: eine Angebotsseite, ein Portfolio oder ein einfacher Auftritt für deine Selbstständigkeit. Replit verbindet Entwicklung im Browser, KI-Unterstützung und Veröffentlichung. Du musst nicht erst einen lokalen Code-Editor installieren, aber die Ergebnisse selbst kontrollieren.
Unser fiktives Übungsprojekt ist die Website einer selbstständigen Illustratorin. Sie zeigt drei Leistungsbereiche, einige freigegebene Arbeitsproben und einen E-Mail-Kontakt. Kundenkonto, Upload, Shop und Zahlungsabwicklung gehören nicht in diesen ersten Versuch. So bleibt klar, was du prüfen musst.
Die allgemeine Einstiegsanleitung beruht auf der verlinkten offiziellen Dokumentation. Ein eigener, gesondert gekennzeichneter Demo-Praxistest ergänzt sie unten; er prüft einen Entwurf im bestehenden Projekt, nicht Kontoerstellung, Publish oder Domain. Die Oberfläche kann sich ändern. Beschriebene Bezeichnungen und Funktionen wurden am 7. Oktober 2026 anhand der Quellen geprüft; dein Konto oder Tarif kann anders aussehen.
1. Lege Inhalte und ein kleines Budget bereit
Du brauchst ein Replit-Konto, einen Browser und einen überschaubaren Auftrag. Bereite Angebotstexte und zulässige Bilder vor oder verwende deutlich gekennzeichnete Testinhalte. Du brauchst für den ersten Entwurf keine gekaufte Domain und keine externe KI-API.
Prüfe vor dem Start den aktuellen Tarif und die enthaltene Nutzung. Erstellung mit Agent, veröffentlichter Betrieb und Zusatzdienste sind unterschiedliche Kostenarten. Replit beschreibt auf seiner Nutzungsseite Verbrauch und Budgetkontrollen. Informiere dich, welche Limits für dein Konto gelten und welche Dienste beim Erreichen einer Grenze ausgesetzt werden.
Eine Ausgabengrenze kann Betrieb unterbrechen; eine Warnung ist kein Ersatz für eine Grenze. Prüfe Zusatzkosten separat, insbesondere Domainverlängerung und externe Dienste. Dieser Artikel nennt bewusst keinen festen Replit-Preis, weil Tarife und enthaltene Leistungen sich ändern können.
2. Starte eine Website und beschreibe dein Ziel
Die offizielle Einstiegsanleitung beschreibt einen neuen Chat mit „Website“ als ausgewähltem Artefakt, erreichbar über „New“ oder die Erstellen-Auswahl im Eingabefeld. Alternativ kannst du ausdrücklich um eine Website bitten. Wähle den für dein Konto verfügbaren Modus bewusst und prüfe die angezeigten Bedingungen, statt kostenpflichtige Empfehlungen ungeprüft zu übernehmen.
Sende einen kleinen, eindeutigen Auftrag. Der folgende Prompt ist ein eigenständiges fiktives Beispiel, das du anpassen kannst. Die Kontaktadresse bleibt zunächst ein Platzhalter; ein nicht funktionierender Platzhalter darf später nicht als echter Anfrageweg veröffentlicht werden.
Falls du zuerst die Architektur oder Kosten verstehen möchtest, bitte um eine Erklärung vor der Umsetzung. In einem bestehenden Replit-Projekt ist dafür laut Dokumentation auch Plan Mode vorgesehen. Verlasse dich nicht allein auf den Satz „fertig“: Das Ergebnis muss deine Kriterien erfüllen.
Baue eine kleine Website für eine fiktive selbstständige Illustratorin.
Ziel: Besucher verstehen die Leistungen und finden einen E-Mail-Kontakt.
Abschnitte: Start, Leistungen, Arbeitsproben, Über mich, Kontakt.
Leistungen: redaktionelle Illustration, Buchcover, einfache Infografiken.
Design: ruhig, weißer Hintergrund, klare Schrift, gut lesbar auf dem Handy.
Nutze deutlich markierte Testtexte und Bildplatzhalter.
Keine erfundenen Kunden, Referenzen, Bewertungen oder Preise.
Keine Konten, Formulare, Zahlungen, Tracker oder externen Einbettungen.
Kontaktadresse: als „vor Veröffentlichung ersetzen“ markieren.
Alle Menüpunkte sollen zu den passenden Abschnitten führen.
Erkläre, wie die Website aufgebaut ist und welche Dienste sie benötigt.
Erstelle einen Entwurf in der Vorschau, veröffentliche noch nichts.3. Benutze Preview wie eine Besucherin
Wenn Agent einen Entwurf zeigt, öffne die Website-Vorschau und gehe den Besucherweg durch. Klicke jeden Menüpunkt an. Lies Angebote und Kontaktbereich. Prüfe, ob die Arbeitsproben Platzhalter sind und ob eine Aussage erfunden wurde. Schau dir das Ergebnis auch bei schmaler Bildschirmbreite an.
Für unser Beispiel ist ein sinnvoller Prüffall: „Ich komme über die Startseite, finde Buchcover, sehe eine passende Arbeitsprobe und erkenne den Kontaktweg.“ Prüfe mit der Tastatur, ob Links erreichbar sind und der Fokus sichtbar bleibt. Teste Neuladen und gegebenenfalls direkte Unterseitenaufrufe.
Ein E-Mail-Link öffnet das eingerichtete Mailprogramm, versendet aber selbst keine Nachricht. Falls du später ein Formular ergänzt, muss dessen tatsächlicher Versand und Empfang gesondert geprüft werden. Ein erfolgreicher Bildschirm ist kein Nachweis für eine angekommene Nachricht.
- Überschrift und Leistung passen zu den gelieferten Angaben.
- Navigation führt zum richtigen Abschnitt, nicht zu leeren Zielen.
- Bilder und Text passen auf den Handybildschirm.
- Keine sensiblen Daten, unbestätigten Behauptungen oder unerwarteten Dienste sind eingebaut.
- Kontaktplatzhalter sind erkannt und noch nicht als echte Funktion freigegeben.
Eigener Praxistest: Ergebnis, Prüfkriterien und offene Punkte
Testdatum: 7. Oktober 2026. Der Betreiber hat vor Beginn die Demo und die Verwendung ihrer Screenshots in den kostenlosen Leitartikeln freigegeben. Getestet wurde eine tatsächlich neu gebaute Astro-Seite für eine fiktive Sprachtrainerin innerhalb des bestehenden Replit-Projekts, kein neuer Replit-Account und kein unabhängiges Projekt von null. Replit Agent setzte den Entwurf mit Unterstützung einer Design-Arbeitsinstanz um; anschließend wurden Quellen, Vorschau und Build geprüft. Das ist kein beobachteter Anfängertest.
Testbedingungen: Astro 7.3.5, Node.js 24.13.0, bestehendes pnpm-Projekt, Replit-Entwicklungsvorschau ohne Anmeldung an der Demo. Desktop: 1280 × 900 CSS-Pixel; schmale Browseransicht: 390 × 844 CSS-Pixel mit Ganzseitenaufnahme. Browsername und Browserversion wurden bei der Aufnahme nicht erfasst. Die Aufnahmen zeigen die Website, nicht die vollständige Replit-Editoroberfläche. Keine privaten Daten, Kundenbilder oder Kursentwürfe wurden verwendet.
Ergebnis der Sichtprüfung: Die Demo ist als fiktiv gekennzeichnet. Desktopüberschrift und Hauptaktion sind lesbar; in der schmalen Ganzseitenaufnahme sind alle vier Abschnitte ohne sichtbar abgeschnittene Texte zu sehen. Das ist eine visuelle Stichprobe bei zwei Breiten, keine Messung jeder möglichen Überbreite und keine Zertifizierung der Barrierefreiheit.
Ergebnis der technischen Basisprüfung: Der direkte Vorschauaufruf und ein zweiter HTTP-Abruf lieferten jeweils Status 200. Die HTML-Prüfung bestätigt, dass alle vier Navigationslinks vorhandene Abschnitts-IDs adressieren und die Hauptaktion auf den Kontaktabschnitt zeigt. Diese Zielprüfung ist kein protokollierter Klick- oder Tastaturtest. Im erzeugten Demo-HTML gibt es kein Formular, keinen mailto-Link, keine externen Schriften oder Einbettungen; die Demo benötigt keine eigene Datenbank.
Tatsächliche Nacharbeit vor den finalen Aufnahmen: Der erste Entwurf importierte das gemeinsame Stylesheet mit externen Google-Schriften. Wir ersetzten diesen Import in der Demo durch lokale Gestaltung und Systemschriften. Die erste Desktopaufnahme meldete außerdem einen fehlenden favicon.ico-Aufruf; ein eingebettetes Favicon wurde ergänzt. Die abschließenden Aufnahmen meldeten keine Browserfehler. Astros Entwicklungsleiste bleibt in den Vorschauaufnahmen sichtbar; sie ist kein Teil der angebotenen Leistung.
Kostenbeobachtung: Für diese Demo wurden keine Domain gekauft, keine Produktionsveröffentlichung ausgelöst und keine zusätzlichen externen Dienste eingerichtet. Die tatsächlichen Agent-Kosten und der Verbrauch dieses Kontos waren für diesen Test nicht einsehbar; ein Eurobetrag oder eine Aussage „kostenlos“ wäre daher unbelegt. Kosten bestehender Dienste, des Kontotarifs und späteren Hostings sind nicht aus diesen Screenshots abzulesen. Es wurde weder eine genaue Arbeitsdauer noch ein Kostenvergleich erhoben.
Einordnung: Der kleine Entwurf erfüllt die unten genannten Basisprüfungen. Er ist ausdrücklich nicht für echte Anfragen freigegeben. Aus diesem einzelnen Versuch leiten wir keine Erfolgsquote, kein Werkzeugranking, keine Zeitersparnis und keine Zusage für andere Projekte ab. Die allgemeinen Schritte zu Publish und Domain in diesem Artikel beruhen weiterhin auf Dokumentation, nicht auf diesem Test. Die kostenlose Ergänzung verwendet keine privaten Kursunterlagen und ersetzt keine geplanten Video-Lektionen.
- Erfüllt – Start, Angebot, Über mich und Kontakt vorhanden; fiktive Inhalte und fehlende Angaben sichtbar markiert (HTML und Aufnahmen).
- Erfüllt – vier native Navigationslinks und Hauptaktion mit vorhandenen Abschnittszielen (HTML-Prüfung; keine Klickaufzeichnung).
- Erfüllt – Seite bei direktem Aufruf zweimal mit HTTP 200 erreichbar; kein Nachweis eines veröffentlichten Produktionsbetriebs.
- Erfüllt als Sichtprüfung – lesbare Darstellung bei 1280 und 390 Pixeln; kein Test aller Geräte, Zoomstufen oder Orientierungen.
- Nachgebessert – externe Schriftabhängigkeit aus der Demo entfernt und fehlendes Favicon ergänzt.
- Offen vor echtem Einsatz – belegte Anbieterangaben, echte Kontaktadresse, tatsächlicher Versand und Empfang, Impressum und Datenschutzprüfung.
- Nicht getestet – Tastaturablauf, Screenreader, echte Smartphones, vollständige Barrierefreiheit, Publish, eigene Domain, Suchmaschinenindexierung und dauerhafter Betrieb.
- Nicht erhoben – Agent-Verbrauch in Euro, Hostingkosten, genaue Arbeitsdauer und Vergleich mit anderen Tools.
4. Beauftrage genau eine Verbesserung
Angenommen, die Arbeitsproben erscheinen auf dem Handy in drei winzigen Spalten. Ein konkreter Auftrag lautet: „Zeige die Arbeitsproben auf kleinen Bildschirmen untereinander. Ändere nur diesen Bereich; Navigation und Texte bleiben unverändert.“ Danach kontrollierst du sowohl die Änderung als auch die bisher funktionierenden Links.
Wenn etwas kaputt ist, beschreibe die Schritte: „Ich tippe auf Leistungen; der Bereich liegt hinter dem festen Menü und die Überschrift ist verdeckt.“ Nenne erwartetes und tatsächliches Ergebnis. Füge keine Zugangsdaten oder privaten Kundendaten in Fehlermeldungen ein.
Halte einen funktionierenden Stand vor größeren Änderungen fest. Lass dir die Rücknahme erklären und prüfe bei Projekten mit Daten separat deren Sicherung. Für die kleine Informationswebsite ist der Umfang bewusst enger als bei einer App mit Konten.
5. Bereite Publish vor – Vorschau ist nicht Veröffentlichung
Ersetze alle Testinhalte, kläre Bildrechte und prüfe Impressum und Datenschutz für deinen tatsächlichen Auftritt. Bitte Agent, notwendige Dienste und offene Punkte zu erklären, ohne bereits zu veröffentlichen. Kontrolliere dabei selbst, welche Punkte wirklich getestet und welche nur angenommen wurden.
Die offizielle Dokumentation beschreibt „Publish“ im Editor beziehungsweise „Publish your app“ in der Vorschau. Dort prüfst du Domain, Zugriffseinstellung und Sicherheitsprüfung, bevor du die Veröffentlichung bestätigst. Eine normale öffentlich erreichbare Informationswebsite braucht eine passende öffentliche Zugriffseinstellung; vertrauliche Entwürfe gehören dort nicht hinein.
Die Betriebsart muss zu deinem tatsächlichen Projekt passen. Replit nennt Autoscale als Standard für Webanwendungen und APIs. Static liefert Dateien ohne Backend aus; die Dokumentation weist zugleich darauf hin, dass Static nicht mit den dort beschriebenen von Agent erstellten Apps kompatibel ist. Wähle daher nicht allein wegen des Wortes „Website“ pauschal Static. Prüfe die für dein konkretes Projekt verfügbaren Optionen und die benötigten Dienste.
Nach erfolgreicher Veröffentlichung erhältst du die Besucheradresse. Öffne genau diese Adresse ohne Betreiberanmeldung und prüfe erneut Navigation, Inhalte, HTTPS und Kontaktweg. Eine temporäre Entwicklungsadresse ist nicht der Link, den du dauerhaft verteilst.
6. Verbinde bei Bedarf deine eigene Domain
Für das erste Prüfen reicht die veröffentlichte Replit-Adresse. Wenn du eine eigene Domain einsetzen möchtest, beschreibt Replit den Bereich „Domains“ im Publishing-Werkzeug nach erfolgreichem Deployment. Du kannst eine vorhandene Domain verbinden oder dort eine neue erwerben; prüfe vorher Preise und Verlängerung.
DNS-Einträge zeigen dem Internet, wohin deine Domain führt. Verwende nur die für dein Projekt angezeigten Werte, keine erfundenen IP-Adressen aus einem Beispiel. Replit bietet eine geführte Verbindung und eine manuelle Alternative. Wenn du die geführte Variante nutzt, prüfe die Berechtigungen für den beteiligten Dienst.
Bei manueller Verbindung beschreibt die Dokumentation A- und TXT-Einträge; der replit-verify-TXT-Eintrag muss für die Zertifikatserneuerung dauerhaft bleiben. DNS-Änderungen können bis zu 48 Stunden brauchen. Eine www-Subdomain wird nicht automatisch durch die Verbindung der Hauptdomain eingerichtet. Prüfe, welche Adressen du wirklich anbieten willst, und öffne sie anschließend im Browser.
Nach dem Start: bewusst pflegen und erneut veröffentlichen
Änderungen im Editor ersetzen die veröffentlichte Fassung nicht automatisch. Teste zuerst in Preview und nutze danach „Republish“, wenn die Änderung bereit ist. Kontrolliere anschließend die öffentliche Website, nicht nur den Entwurf.
Für die Illustratorin heißt Pflege: neue freigegebene Arbeitsproben ergänzen, Leistungen und Kontakt aktuell halten sowie die mobile Ansicht nach Änderungen prüfen. Beobachte die tatsächliche Nutzung und laufenden Kosten. Füge Buchung, Formulare oder Zahlungen erst hinzu, wenn du deren Datenverarbeitung und Fehlerfälle gesondert prüfen kannst.
Der erste Erfolg ist eine kleine, nachvollziehbare Informationswebsite – kein ungeprüftes Geschäftssystem. Wenn dir Begriffe oder Abläufe noch unklar sind, lass sie am konkreten Projekt erklären und begrenze den nächsten Auftrag.
Häufige Fragen
Kann ich mit Replit eine Website ohne Programmierkenntnisse erstellen?
Du kannst einen kleinen Website-Entwurf in normaler Sprache beauftragen. Prüfe Inhalte, Navigation, mobile Darstellung und Veröffentlichung selbst. Für sensible Daten oder komplexe Funktionen brauchst du mehr Verständnis oder fachliche Unterstützung.
Ist meine Replit-Vorschau schon eine veröffentlichte Website?
Nein. Preview ist die Entwicklungsfassung. Publish erstellt eine getrennte Besucherfassung mit eigener Adresse. Spätere Änderungen werden nach Prüfung mit Republish veröffentlicht.
Ist eine Website mit Replit dauerhaft kostenlos?
Das lässt sich nicht allgemein zusagen. Prüfe deinen aktuellen Tarif, enthaltene Agent-Nutzung, Veröffentlichung, Betrieb und Zusatzdienste. Domainverlängerung und externe Anbieter können gesonderte Kosten verursachen.
Kann ich meine eigene Domain mit Replit verbinden?
Ja. Nach erfolgreicher Veröffentlichung beschreibt Replit die Verbindung im Domains-Bereich des Publishing-Werkzeugs. Verwende die dort angezeigten DNS-Werte und prüfe die Domain nach der Verifizierung im Browser.
Muss ich für eine einfache Website eine Datenbank anlegen?
Nicht zwingend. Eine reine Informationsseite ohne gespeicherte Eingaben braucht inhaltlich keine Datenbank. Lass dir trotzdem erklären, was dein konkretes Projekt tatsächlich verwendet und weshalb.
Quellen
- Replit: Build your first app – Projektstart, Kriterien und Vorschau
- Replit: Managing Your Spend – Nutzung, Limits und Budgets
- Replit: Publish your app – Vorschau, Veröffentlichung und erneute Veröffentlichung
- Replit: Deployment types – Betriebsarten und Einschränkungen
- Replit: Custom domains – eigene Domain verbinden
- Replit: Plan Mode – Ablauf und Verfügbarkeit