Hoe je een met Gemini gemaakte website publiceert

Inleiding

Veel mensen gebruiken Gemini om websites te maken. Wanneer je de Canvas-tool inschakelt, geeft Gemini je één enkel HTML- of React-bestand met een voorbeeldweergave ernaast. Maar zodra je de code hebt, is de volgende stap niet vanzelfsprekend. Je moet het ergens laten hosten, een domein koppelen, ervoor zorgen dat het op mobiel werkt, en uitzoeken hoe je het later kunt blijven bewerken.

Traditionele ontwikkelaarstools zoals GitHub en Netlify kunnen het bestand online hosten, maar dan vereist elke bewerking het beheren van codebestanden, deployments en technische details. De meeste mensen hebben daar liever niets mee te maken.

In deze handleiding laat ik je zien hoe je een website die je met Gemini hebt gemaakt, omzet in een echte, gepubliceerde website met behulp van een nieuw AI-hulpmiddel genaamd Repaint. Hiermee kun je beginnen vanuit je code, de site publiceren en bewerkingen aanbrengen door met AI te chatten.

Waarom publiceren vanuit Gemini lastig is

Gemini kan code genereren, maar het is geen volledige websitebouwer. Het verwijst je naar andere platforms als je vraagt hoe je op je eigen domein moet publiceren. Meestal raadt het ontwikkelaarstools aan zoals GitHub, Netlify en Vercel, of het stelt voor om de site opnieuw op te bouwen in een traditionele websitebouwer zoals Framer, Wix of Squarespace. Geen van beide is ideaal.

Ontwikkelaarstools zijn fijn omdat ze de code die Gemini genereert rechtstreeks 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 gedeployde code moeten slepen, alleen om eenvoudige aanpassingen met AI te kunnen maken.

De meeste mensen vermijden codecomplexiteit door een websitebouwer zoals Wix, Squarespace of Webflow te gebruiken. Deze platforms maken het publiceren van bewerkingen soepeler. Het probleem is dat ze door Gemini gegenereerde sites niet kunnen draaien, dus moet je alles handmatig opnieuw opbouwen. En daarna moet je alles met de hand blijven bewerken.

Daarom moet je een AI-websitebouwer zoals Repaint gebruiken. Die biedt je de flexibiliteit van het draaien van maatwerkcode én het gemak van bewerken en publiceren op één plek.

Wat is Repaint?

Repaint is een AI-platform voor het maken van websites. Het is gebouwd rond dezelfde chatgebaseerde werkwijze die Gemini zo bruikbaar maakt. Je kunt in gewone taal om wijzigingen vragen, het resultaat beoordelen en blijven 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 een website draaien afhandelt die Gemini niet afhandelt:

• Het publiceert je site zodat mensen die ook echt online kunnen bezoeken.
• Het stelt je in staat om een eigen domein te 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 als je site moet groeien.

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

Stap 1: Importeer code uit Gemini

Wanneer Gemini een website maakt, toont het de code en een live preview in een Canvas-paneel. Standaard is de uitvoer HTML, maar je kunt in plaats daarvan om React vragen. Een eigenaardigheid om te kennen: Gemini opent Canvas niet automatisch wanneer je om een website vraagt. Je moet de Canvas-tool inschakelen via de dropdown naast het berichtvak, en daarna opnieuw vragen.

Om de code te krijgen, klik je bovenaan de Canvas op de knop Share en vervolgens op Copy contents. Ga naar de Repaint code importer en plak het daar in. Dit start het bouwproces van de website. Repaint gebruikt je code om een volledige website te maken die je kunt publiceren en blijven bewerken.

Als je nog geen website in Gemini hebt gemaakt, raad ik aan om React te vragen. Dat ligt dichter bij het formaat dat Repaint gebruikt, dus is de kans kleiner dat kleine ontwerpdetails verloren gaan in de vertaling. HTML werkt ook, al kunnen eventuele problemen later worden opgelost door met Repaint te chatten.

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 de Gemini-versie precies wilt gebruiken, het als losse inspiratie wilt nemen, of het wilt omzetten in een grotere site met meer pagina's.

Plan de inhoud

Gemini maakt vaak één-paginasites waarbij de links naar secties scrollen in plaats van nieuwe pagina's openen. Maar de meeste bedrijven hebben meer dan één pagina nodig. Dus als je een één-paginasite hebt, overweeg dan om Repaint die als meerdere pagina's te laten bouwen.

Je kunt dit moment ook gebruiken om meer inhoud toe te voegen. Gemini maakt meestal geen grote sets pagina's zoals blogposts. Wanneer je de site in Repaint importeert, kun je de scope uitbreiden met alles wat je wilt.

Nieuwe pagina's zullen passen bij de stijl 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 spacing.

Maar je hoeft de stijl niet te behouden. Als je er niet tevreden mee bent, kun je Repaint vragen om 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 creëren
• Een stijl kiezen uit de stijlbibliotheek van Repaint
• Voor jou kiezen

Maak je er niet te veel zorgen om. Als het resultaat je niet bevalt, 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 de Gemini-versie als bronmateriaal en bouwt vervolgens de site die in je plan beschreven staat. Als je hebt gevraagd om een exacte recreatie, zal het proberen het origineel zo dicht mogelijk te benaderen. Als je hebt gevraagd om meer pagina's of een andere stijl, gebruikt het de Gemini-versie als uitgangspunt.

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

Stap 4: Bewerk je website met AI

Zodra Repaint de eerste versie genereert, zie je die aan de rechterkant van je scherm. Nu kun je wijzigingen maken op dezelfde manier als in Gemini. Je typt wat je veranderd wilt zien, Repaint werkt de site bij, en daarna beoordeel je het resultaat.

Je kunt Repaint bijvoorbeeld vragen om:

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

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

Stap 5: Publiceer je website

Wanneer de site klaar is, klik je op de knop Publish. 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

Dit is het moment waarop je werk een echte website op het internet wordt. 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 aanbrengen, kun je Repaint vragen om 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 Gemini en 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 je domeinprovider bij, zodat het domein naar je Repaint-site wijst.

Als je dit nog nooit hebt gedaan, geen zorgen. Vraag Repaint om je er stap voor stap doorheen te leiden. Het vertelt je precies 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

Met Gemini is het eenvoudig om een eerste versie van een website te maken, maar die code online krijgen en onderhouden blijft lastig. Repaint biedt je een manier om die code om te zetten in een echte website die je kunt publiceren, met een domein kunt verbinden en met AI kunt blijven bewerken. Repaint maakt het eenvoudiger dan ooit om gegenereerde code om te zetten in een gepubliceerde site.

Veelgestelde Vragen

Hoe lang duurt het om een Gemini-website met Repaint te publiceren?

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

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 verwijdering van de Repaint-badge.

Waarom niet gewoon GitHub Pages, Netlify of Vercel gebruiken?

Dat kan, vooral als je vertrouwd bent met het beheren van code. Die tools zijn goed in het online zetten van bestanden. Maar elke betekenisvolle wijziging stuurt je terug naar de code, wat betekent dat je vastzit aan het kopiëren van bestanden tussen Gemini, je editor en je hostingtool.

Repaint is anders omdat het een volledig websiteplatform is, niet alleen een plek om bestanden aan te bieden. Dat betekent dat je kunt blijven bewerken met AI, wijzigingen vanaf 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 kunnen coderen. Nadat je je code uit Gemini hebt geïmporteerd, hoef je nooit meer code te beheren. Als er iets verkeerd lijkt, kun je het oplossen door met AI te chatten. Kennis van code kan helpen als je heel specifiek wilt zijn, maar het is niet vereist.

Zal de site er precies hetzelfde uitzien als de Gemini-versie?

Als je Repaint vertelt het origineel te recreëren, zou het er bijna exact hetzelfde uit moeten zien. Soms gaan er details verloren omdat Repaint de code vertaalt naar zijn eigen websiteformaat. Vertalingsproblemen komen vaker voor als het origineel uit Gemini HTML was. Als dat gebeurt, zou je alles binnen een paar prompts moeten kunnen herstellen.

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 elke eerdere versie handmatig herstellen. Zo kun je vrij wijzigingen maken zonder het risico je site te verpesten.

Werken formulieren en knoppen na het importeren?

Ja. Contactformulieren werkten waarschijnlijk niet in je oorspronkelijke Gemini-site. 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 naar echte pagina's of secties linken. Als een knop nergens naar wijst, kun je Repaint vragen die te verbinden.

Kan Repaint afbeeldingen, iconen en andere assets van mijn Gemini-site verwerken?

Gemini haalt afbeeldingen vaak op uit bronnen zoals Unsplash en linkt ze via URL in plaats van ze op te slaan in je code. 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 die 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 embeds van andere platforms toevoegen. Om Google Analytics toe te voegen, deel je gewoon je GA-ID.

Vervangt Repaint hosting, of heb ik nog 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.