Hoe je door AI gegenereerde code omzet in een website

Inleiding

Veel mensen gebruiken AI om websites te maken. Hulpmiddelen als ChatGPT, Claude en Gemini genereren met plezier een enkel codebestand met een voorbeeld van de site die je hebt beschreven. Maar zodra je die code hebt, is de volgende stap niet vanzelfsprekend. Je moet het ergens hosten, een domein verbinden, het op mobiel laten werken, en uitzoeken hoe je het later kunt blijven bewerken.

Traditionele ontwikkelaarstools als GitHub en Netlify kunnen het bestand online hosten, maar elke bewerking vereist het beheren van codebestanden, deployments en technische details. De meeste mensen hebben daar liever niets mee te maken, vooral omdat AI de enige reden is dat ze de code überhaupt hebben.

In deze handleiding laat ik je zien hoe je door AI gegenereerde code omzet in een echte, gepubliceerde website met een nieuw AI-hulpmiddel genaamd Repaint. Je begint met je code, publiceert de site en maakt bewerkingen door te chatten met AI.

Waarom het publiceren van door AI gegenereerde code lastig is

Dankzij AI is het makkelijker dan ooit om een werkend codebestand voor een website te krijgen. Het probleem is dat AI-chatbots als ChatGPT, Claude en Gemini niet gebouwd zijn om die code als echte website te hosten. Ze geven je het bestand en laten de rest aan jou over. Vanaf daar is de enige echte weg vooruit een ontwikkelaarstool als GitHub, Netlify of Vercel. Die werken wel, maar ze zijn gemaakt voor ontwikkelaars.

Ontwikkelaarstools zijn fijn omdat ze de code die AI genereert direct kunnen draaien. Het nadeel is dat elke wijziging het bewerken van specifieke codebestanden vereist. Voor mensen die niet kunnen coderen, betekent dit dat ze voortdurend bestanden in en uit hun deployed code moeten halen om simpele bewerkingen met AI te maken.

Daarom kun je beter een AI-websitebouwer als Repaint gebruiken. Het geeft je de flexibiliteit om aangepaste code te draaien én het gemak van bewerken en publiceren op één plek.

Wat is Repaint?

Repaint is een AI-platform voor het maken van websites. Alles gebeurt in een chat. Je beschrijft wat je wilt, bekijkt het resultaat en blijft itereren totdat de site er goed uitziet.

Maar Repaint is een volledig websiteplatform, niet alleen een plek om code te genereren. Dat betekent dat het de aspecten van het runnen van een website afhandelt die een AI-chatbot niet kan:

• Het publiceert je site zodat mensen die online kunnen bezoeken.
• Het laat je een eigen domein verbinden, zodat de site op je echte URL kan staan.
• Het houdt de site bewerkbaar met AI, zodat je later wijzigingen kunt maken.
• Het helpt bij het beheren van SEO-details zoals paginatitels, beschrijvingen en sitestructuur.
• Het kan nieuwe pagina's aanmaken wanneer je site moet groeien.

Dat is het verschil tussen een codebestand bezitten en een echte plek hebben om je site in de loop van de tijd te beheren.

Stap 1: Importeer je code

Wanneer een chatbot als ChatGPT, Claude of Gemini een website voor je maakt, is het resultaat meestal een enkel codebestand, ofwel HTML of React, afhankelijk van wat je hebt gevraagd. Al deze chatbots laten je het bestand uit hun interface kopiëren.

Begin met het kopiëren van de code vanaf waar deze is gegenereerd. Ga vervolgens naar de Repaint code-importer en plak het erin. Hiermee start je het websitebouwproces. Repaint gebruikt je code om een volledige website te maken die je kunt publiceren en blijven bewerken.

Als je de keuze hebt, raad ik aan om React te vragen. Het ligt dichter bij het formaat dat Repaint gebruikt, dus is er minder kans dat kleine ontwerpdetails verloren gaan in de vertaling. HTML werkt ook, hoewel eventuele problemen later kunnen worden opgelost door met Repaint te chatten.

Als je code afkomstig is van een specifieke chatbot, kun je ook een van de handleidingen volgen die daarop zijn afgestemd: ChatGPT, Claude of Gemini.

Stap 2: Plan wat Repaint moet bouwen

Nadat je je code hebt geplakt, stelt Repaint een paar vragen voordat het de website bouwt. Dit geeft je de kans om te beslissen of je het origineel exact wilt gebruiken, het als losse inspiratie wilt gebruiken, of er een grotere site met meer pagina's van wilt maken.

Plan de inhoud

Sites gemaakt van een enkel codebestand zijn meestal one-pagers, waar de links naar secties scrollen in plaats van nieuwe pagina's te openen. Maar de meeste bedrijven hebben meer dan één pagina nodig. Dus als je een one-pager hebt, kun je overwegen Repaint deze als meerdere pagina's te laten bouwen.

Je kunt dit moment ook gebruiken om meer inhoud toe te voegen. Een enkel codebestand dekt zelden een volledige website met onderdelen zoals blogposts. Wanneer je de code in Repaint importeert, kun je de reikwijdte uitbreiden zodat alles wat je wilt erin zit.

Nieuwe pagina's krijgen dezelfde stijl als die je al hebt.

Plan de stijl

Standaard kopieert Repaint de stijl van je origineel. Dat betekent dat het dezelfde uitstraling behoudt: kleuren, indeling, typografie en spatiëring.

Maar je hoeft de stijl niet te behouden. Als je er niet tevreden mee bent, kun je Repaint vragen je website opnieuw te ontwerpen. Repaint kan:

• Het origineel zo nauwkeurig mogelijk recreëren
• De stijl van een andere website die je leuk vindt overnemen
• Een aangepaste stijl voor je inhoud maken
• Een stijl kiezen uit de Repaint stijlbibliotheek
• Voor jou kiezen

Maak je er niet te druk om. Als je niet tevreden bent met wat het maakt, kun je later om nieuwe versies vragen.

Bekijk het plan

Voordat er iets wordt gegenereerd, schrijft Repaint precies op wat het gaat bouwen: welke pagina's, welke inhoud en welke stijl. Bekijk het goed en breng eventuele laatste wijzigingen aan. Het is veel sneller om het plan aan te passen dan de hele site opnieuw te genereren.

Zodra je bevestigt, bouwt Repaint je nieuwe website!

Stap 3: Genereer je website

Zodra je het plan bevestigt, begint Repaint met het bouwen van je site. Je ziet voortgangsberichten terwijl het elke pagina verwerkt. Een eenvoudige startpagina kan een minuut of twee duren. Een grotere website met meer pagina's kan langer duren.

Repaint host niet alleen de code die je hebt geplakt. Het gebruikt het origineel als bronmateriaal en bouwt vervolgens de site die in je plan is beschreven. Als je hebt gevraagd om een exacte herhaling, zal het proberen het origineel zo dicht mogelijk te benaderen. Als je hebt gevraagd om meer pagina's of een andere stijl, gebruikt het het origineel als startpunt.

Soms gaan details verloren in de vertaling tijdens het genereren. Dat gebeurt vaker als je oorspronkelijke bestand HTML is, omdat React dichter bij staat bij wat Repaint gebruikt. Als er belangrijke details verloren gaan, kun je ze in de volgende stap herstellen.

Stap 4: Bewerk je website met AI

Zodra Repaint de eerste versie genereert, zie je deze aan de rechterkant van je scherm. Nu kun je wijzigingen aanbrengen op dezelfde manier als in een chatbot. Je typt wat je veranderd wilt hebben, Repaint werkt de site bij en daarna bekijk je het resultaat.

Je kunt Repaint bijvoorbeeld vragen om:

• Een nieuwe pagina toe te voegen
• De kleuren of lettertypen te veranderen
• Een contactformulier toe te voegen
• Afbeeldingen te genereren
• De tekst te herschrijven

Je kunt wijzigingen blijven maken totdat de site klaar voelt om te publiceren.

Stap 5: Publiceer je website

Als de site klaar is, klik je op de knop Publiceren. Repaint zet de site online en geeft je een live URL die je met iedereen kunt delen. Die ziet er ongeveer zo uit: https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

Op dit punt wordt je werk een echte website op internet. Je kunt het openen op je telefoon, naar iemand sturen of testen in een echte browser.

Je hoeft ook geen code te exporteren of bestanden ergens anders te deployen. Vanaf nu is Repaint de plek waar je de site bewerkt en publiceert. Als je later wijzigingen wilt maken, kun je Repaint vragen de website bij te werken en vervolgens de nieuwe versie publiceren met dezelfde knop.

Stap 6: Verbind je domein

Wanneer je klaar bent om je eigen URL te gebruiken, ga je naar Website-instellingen > Domeinen en klik je op Verbind een eigen domein. Dit vereist een betaald abonnement. Je kunt de prijsdetails hier bekijken.

Je domein wordt beheerd op een platform buiten Repaint. Het is geregistreerd bij een domeinprovider zoals GoDaddy, Namecheap of Cloudflare. Je hoeft het nergens naartoe te verplaatsen. Je werkt alleen de instellingen bij bij je domeinprovider, zodat het domein naar je Repaint-site wijst.

Als je dit nog nooit eerder hebt gedaan, geen zorgen. Vraag Repaint om je er stap voor stap doorheen te leiden. Het zal je precies vertellen wat je moet doen.

De wijziging kan een paar uur duren voordat deze van kracht wordt. Zodra Repaint je domein als geverifieerd toont, is je website live op je eigen domein.

Conclusie

Dankzij AI is het eenvoudig om een eerste versie van een website te genereren, maar die code online krijgen en onderhouden is nog steeds lastig. Repaint biedt je een manier om die code om te zetten in een echte website die je kunt publiceren, verbinden met een domein en blijven bewerken met AI. Repaint maakt het makkelijker dan ooit om door AI gegenereerde code in een gepubliceerde site te veranderen.

Veelgestelde Vragen

Maakt het uit welk AI-hulpmiddel ik heb gebruikt om de code te genereren?

Niet echt. Zolang je het codebestand hebt, kan Repaint het gebruiken. De meest voorkomende hulpmiddelen waaruit mensen importeren zijn ChatGPT, Claude en Gemini. Als je specifiek een van deze hebt gebruikt, is er een handleiding op maat: ChatGPT, Claude en Gemini.

Maakt het uit of de code HTML of React is?

Nee, maar React vertaalt iets beter. Repaint kan beide aan. Als je de keuze hebt bij het genereren van de code, vraag dan om React. Als je al een HTML-bestand hebt, werkt dat ook, en kun je eventuele kleine problemen oplossen door na het importeren met Repaint te chatten.

Hoe lang duurt het om door AI gegenereerde code om te zetten in een website met Repaint?

Als je code al af is, hoeft het maar een paar minuten te duren. Het delen van je code, het plannen van de site en het genereren van de website duurt meestal 2-5 minuten. Daarna hangt de tijd tot publicatie af van hoeveel aanpassingen je maakt.

Hoeveel kost het om met Repaint te publiceren?

Het is gratis om je code in Repaint te importeren, een site te genereren, bewerkingen te maken en te publiceren. De belangrijkste beperkingen op het gratis abonnement zijn beperkt gebruik, geen eigen domein en een Repaint-badge op de site. Betaalde abonnementen beginnen vanaf $20 per maand bij jaarlijkse facturering, of $25 per maand bij maandelijkse facturering. Dat omvat uitgebreid gebruik, ondersteuning voor een eigen domein en verwijdert de Repaint-badge.

Waarom niet gewoon GitHub Pages, Netlify of Vercel gebruiken?

Dat kan, vooral als je je prettig voelt bij het beheren van code. Die hulpmiddelen zijn goed in het online plaatsen van bestanden. Maar elke betekenisvolle wijziging stuurt je terug naar de code, wat betekent dat je vastzit aan het kopiëren van bestanden tussen waar je de code vandaan hebt, je editor en je hosting-tool.

Repaint is anders omdat het een volledig websiteplatform is, niet alleen een plek om bestanden te serveren. Dat betekent dat je kunt blijven bewerken met AI, wijzigingen vanuit dezelfde plek kunt publiceren, pagina's kunt beheren, SEO-instellingen kunt bijwerken, afbeeldingen kunt optimaliseren, formulieren kunt verbinden en je eigen domein kunt gebruiken. Het is gebouwd voor langdurig websitebeheer, niet alleen voor de eerste deployment.

Moet ik kunnen coderen om problemen op te lossen?

Nee. Repaint is gemaakt voor mensen die niet coderen. Nadat je je code hebt geïmporteerd, hoef je nooit meer code te beheren. Als iets er verkeerd uitziet, kun je het oplossen door te chatten met AI. Kunnen coderen kan helpen als je heel specifiek wilt zijn, maar het is niet vereist.

Zal de site er precies hetzelfde uitzien als mijn origineel?

Als je Repaint vertelt het origineel te recreëren, moet het er bijna precies hetzelfde uitzien. Af en toe gaan sommige details verloren omdat Repaint de code omzet naar zijn eigen websiteformaat. Vertaalproblemen komen vaker voor als het origineel HTML was. Als dat gebeurt, zou je alles binnen een paar prompts moeten kunnen oplossen.

Wat gebeurt er als de AI een fout maakt?

Terwijl je updates maakt, slaat Repaint elke versie van je site op. Je kunt Repaint vragen terug te gaan, en het keert dan terug naar een eerdere versie. Of als je naar een specifiek moment in de tijd wilt teruggaan, kun je handmatig een eerdere versie herstellen. Je kunt dus vrij wijzigingen maken zonder risico om je site te ruïneren.

Werken formulieren en knoppen na het importeren?

Ja. Contactformulieren werkten waarschijnlijk niet in de originele code. Maar wanneer je de site naar Repaint verplaatst, kan het het formulier omzetten in een echt contactformulier dat e-mailmeldingen verstuurt wanneer je inzendingen ontvangt. Knoppen zouden moeten werken als ze linken naar echte pagina's of secties. Als een knop nergens heen wijst, kun je Repaint vragen het te verbinden.

Kan Repaint afbeeldingen, iconen en andere middelen uit mijn code verwerken?

Door AI gegenereerde code slaat doorgaans geen afbeeldingsbestanden in zichzelf op. Het linkt meestal naar afbeeldingen die ergens anders worden gehost, zoals op Unsplash. Wanneer je je code importeert, kan Repaint kopieën van die afbeeldingen ophalen en opslaan zodat ze permanent beschikbaar blijven voor je nieuwe site. Repaint kan ook afbeeldingen genereren als je er nog moet toevoegen.

Kan ik SEO-instellingen, analytics en metadata toevoegen?

Ja. Je kunt aangepaste code, analytics en metadata toevoegen door het simpelweg aan Repaint te vragen. Het kan technische SEO voor je instellen en het kan scripts en insluitingen van andere platforms toevoegen. Om Google Analytics toe te voegen, deel je gewoon je GA-ID.

Vervangt Repaint hosting, of heb ik nog steeds een aparte host nodig?

Repaint is een hostingplatform. Het draait je website. Je hebt geen apart hostingplatform nodig zoals GitHub Pages, Netlify, Vercel of een andere websitebouwer.