Een website maken met ChatGPT: drie werkwijzen die werken

Om met ChatGPT een website te maken, kun je het vragen om de HTML en CSS van de site te schrijven en die bestanden daarna zelf op een hostingdienst zetten. Je kunt het ook gebruiken om de pagina’s te plannen en de tekst te schrijven voordat je in een websitebouwer aan de slag gaat. Of je koppelt een AI-builder zoals Mythex aan ChatGPT, zodat die de site vanuit dezelfde chat kan bouwen, hosten en publiceren. De eerste methode is gratis en prima voor een site van één pagina; de derde heb je nodig zodra de site formulieren nodig heeft die gegevens opslaan, logins, of regelmatige updates. Deze gids laat elke methode zien met prompts en is duidelijk over waar elke methode ophoudt.

Wat ChatGPT wel en niet zelf kan

ChatGPT is erg goed in schrijven: code, koppen, paginatekst en plannen. Zonder hulpmiddelen is het geen hostingbedrijf. Het geeft je site geen publiek adres, het draait geen database, en het bewaart de bestanden van je site niet tussen projecten zoals een builder dat doet. Elke methode hieronder is een ander antwoord op die kloof.

Methode 1: ChatGPT schrijft de code, jij hostt hem

Dit is de klassieke aanpak en werkt goed voor een eenvoudige, statische site: een portfolio, een landingspagina, een bruiloftspagina.

Stap 1: Vraag om een complete pagina in één bestand

Wees specifiek over inhoud en lay-out:

Schrijf een complete website van één pagina als één HTML-bestand, met de CSS in een style-tag. Hij is voor Maya Haddad, een freelance illustrator in Amman. Secties: een header met haar naam en “Illustratie voor boeken en merken”, een raster van zes portfolioafbeeldingen (gebruik plaatsaanduidingen voor afbeeldingspaden die ik kan vervangen), een korte alinea over haar, een lijst met drie diensten met startprijzen, en een contactsectie met haar e-mailadres als mailto-link. Strak, modern, veel witruimte, werkt op telefoons. Geen JavaScript-frameworks.

Eén bestand houdt het simpel om op te slaan en te uploaden.

Stap 2: Opslaan en openen

Kopieer de code naar een teksteditor, sla hem op als index.html en open hem in je browser. Ziet iets er verkeerd uit, beschrijf het dan aan ChatGPT: “het afbeeldingsraster is op desktop één kolom; maak er drie kolommen van boven de 900 pixels breed.”

Stap 3: Vervang de plaatsaanduidingen

Vervang de plaatsaanduidingen door je eigen afbeeldingen en vervang tekst die ChatGPT heeft verzonnen. Controleer prijzen, e-mailadressen en namen zorgvuldig; AI vult gaten met grote zekerheid in.

Stap 4: Zet hem online

Upload het bestand naar een gratis statische host zoals GitHub Pages, of naar een webhost waarvoor je al betaalt. Dan krijg je een publiek adres. Wil je je eigen domein gebruiken, volg dan de instructies van je host; onze gids over een eigen domein koppelen legt het DNS-deel uit.

Waar methode 1 ophoudt

• Formulieren die gegevens opslaan. Een contactformulier heeft een plek nodig waar de inzendingen naartoe gaan. Je hebt een formulierdienst of een server nodig.
• Logins en ledengedeelten. Die hebben een backend en een database nodig.
• Veel pagina’s. Koppen en menu’s consistent houden over tien met de hand geplakte bestanden wordt vervelend.
• Updates. Elke wijziging betekent nieuwe code vragen, die erin plakken en opnieuw uploaden.

Methode 2: ChatGPT plant, een builder bouwt

Hier doet ChatGPT het denkwerk en het schrijven, en een websitebouwer het bouwen en hosten.

Stap 1: Plan de site met ChatGPT

Ik run een kleine familiebakkerij in Manchester die taartbestellingen aanneemt. Stel voor welke pagina’s mijn website nodig heeft, wat elke pagina moet zeggen en de ene actie die ik op elke pagina van bezoekers wil. Houd het bij vijf pagina’s of minder.

Stap 2: Schrijf de tekst

Vraag om de tekst per pagina en herschrijf die daarna in je eigen stem. Voeg echte details toe die ChatGPT niet kan weten: openingstijden, prijzen, bezorggebieden, wat je taarten anders maakt.

Stap 3: Bouw het in een builder

Plak het plan en de tekst in een websitebouwer. In een drag-and-drop-tool plaats je de tekst in een sjabloon. In een AI-builder kun je het hele plan als één bericht geven en bouwt hij de pagina’s; bijvoorbeeld in de Mythex-websitebouwer:

Bouw een website voor een familiebakkerij in Manchester op basis van dit plan en deze tekst: [plak]. Neem een bestelformulier op dat elke aanvraag opslaat (naam, telefoon, taarttype, gewenste datum, bericht), zodat ik ze kan bekijken op een beheerpagina waar alleen ik op kan inloggen. Warm, huiselijk ontwerp dat op telefoons werkt.

Het bestelformulier slaat hier op in een echte database, wat een geplakt HTML-bestand niet kan. Voor meer over deze route, zie hoe je een website met AI bouwt.

Methode 3: Bouw en publiceer vanuit ChatGPT

De nieuwste optie is een builder aan ChatGPT koppelen, zodat ChatGPT de tools van de builder rechtstreeks kan gebruiken. Je blijft in het ChatGPT-gesprek; de builder levert het project, de preview, de database en de hosting.

Mythex werkt zo via zijn ChatGPT-app (een MCP-connector). Je koppelt hem via Accountinstellingen in Mythex. Koppelen werkt op elk abonnement, en de tools die de sandbox van je project draaien vragen Pro. Eenmaal gekoppeld kun je ChatGPT zoiets vragen:

Maak met Mythex een nieuwe website voor mijn bakkerij met een homepagina, een menupagina met taarten en prijzen, en een bestelformulier dat in een database wordt opgeslagen. Laat me de preview zien, en publiceer hem als ik zeg dat het goed is.

ChatGPT maakt dan het project, schrijft de code, draait die en publiceert hem op een publieke URL zodra jij goedkeurt. Wijzigingen zijn gewoon meer berichten in dezelfde chat. Dezelfde connectoraanpak werkt ook vanuit Claude, Cursor en Codex. Voor achtergrond over hoe dit werkt en welke builders het ondersteunen, zie AI-app-builders met MCP.

Welke methode kies je?

Prompttips die voor elke methode werken

• Geef echte feiten vooraf. Naam, locatie, diensten, prijzen en contactgegevens. Minder verzonnen details betekent minder opruimwerk.
• Beschrijf de bezoeker en het doel. “Een ouder die een verjaardagstaart zoekt, die uiteindelijk een bestelaanvraag moet sturen.”
• Vraag om lay-outs die eerst voor telefoons werken. De meeste bezoekers gebruiken een telefoon.
• Verander één ding per bericht zodra de eerste versie er is.
• Vraag expliciet om SEO-basics: een unieke titel en beschrijving per pagina, echte koppen, alt-tekst bij afbeeldingen. Zie SEO voor met AI gebouwde websites.

Onze gids over prompts schrijven voor AI-app-builders bevat meer patronen.

Veelvoorkomende problemen en oplossingen

• Het ontwerp ziet er generiek uit. Geef een referentie: “zoals een rustig Scandinavisch café, veel wit en één gedempt groen”.
• De code is afgekapt. Vraag ChatGPT om verder te gaan vanaf de laatste regel, of om de pagina in secties te splitsen en je ze één voor één te geven.
• Het heeft testimonials of statistieken verzonnen. Verwijder ze. Nep-reviews schaden het vertrouwen, en op veel plaatsen zijn ze in strijd met consumentenbeschermingsregels.
• De site breekt na een wijziging. Bewaar een kopie van de laatste werkende versie voordat je nieuwe code plakt. Builders zoals Mythex bewaren checkpoints, zodat je kunt terugdraaien.

Voordat je publiceert

Lees elk woord op elke pagina. Controleer of de contactgegevens werken. Open de site op een telefoon. Zorg dat afbeeldingen van jou zijn of correct gelicentieerd. Publiceer daarna en deel hem waar je bezoekers al zijn. Wil je dat het hele project niets kost, dan behandelt hoe maak je gratis een website de gratis hostingopties in meer detail.

Veelgestelde vragen