Een website publiceren die je met ChatGPT of Claude hebt gemaakt

Om een website te publiceren die ChatGPT of Claude voor je heeft geschreven, sla je de code op in een bestand met de naam index.html, upload je dat bestand naar GitHub, selecteer je de repository in het Coolify-paneel op je server en publiceer je hem. Je site komt op een openbaar HTTPS-adres te staan en je kunt je eigen domein koppelen als je er een hebt. Deze gids gaat ervan uit dat het je eerste keer is en loopt elke fase vanaf het begin door.

Controleer eerst wat je hebt. Een site die in een chat is geschreven, is meestal één HTML-bestand zonder iets te bouwen, en daar gaat deze gids over. Noemt het antwoord npm install, package.json of Next.js, dan heb je een app, en dan ben je beter af met onze gids voor codeertools.

1. Vraag om één bestand

Stuur dit in de chat, zodat je niet met meerdere bestanden hoeft te jongleren:

Give me this site as one index.html file. Keep the CSS and JavaScript inside that file. If you use images, tell me their file names.

2. Sla het bestand op je computer op

• ChatGPT: De code komt meestal in een codeblok in de chat, dus kopieer het blok. Zie je een downloadknop, dan kun je die ook gebruiken.
• Claude: De site opent vaak als artifact naast de chat. De documentatie van Anthropic beschrijft bovenaan het artifact knoppen om de code te bekijken, te kopiëren of te downloaden. Ontwerpen die uit een sjabloon zijn gemaakt, hebben Export, dat je zelfstandige HTML of een .zip geeft.

Heb je de code gekopieerd, plak hem dan in een teksteditor en sla hem op als index.html. Stel in Kladblok van Windows het bestandstype in op Alle bestanden, anders eindigt de naam op .txt. Schakel in TextEdit op een Mac eerst over naar platte tekst. Dubbelklik op het bestand en je site hoort in de browser te openen. Zet eventuele afbeeldingen in dezelfde map.

3. Upload de bestanden naar GitHub

De server haalt je site op uit een repository op GitHub, die werkt als een map voor je bestanden.

1. Maak een GitHub-account aan. Kies rechtsboven New repository.
2. Geef hem een korte naam, stel de zichtbaarheid in op Public, zet Add README aan en druk op Create repository.
3. Open boven de bestandslijst het menu Add file, kies Upload files, sleep index.html en je afbeeldingen erheen en druk op Commit changes.

Iedereen kan een openbare repository zien, en een HTML-pagina is sowieso zichtbaar voor elke bezoeker. Zet er dus nooit een wachtwoord of API-sleutel in.

4. Bestel de server

Bestel via de pagina Next.js VPS of de pagina Coolify VPS. Beide worden met het publicatiepaneel Coolify geleverd. Een gewone HTML-site heeft geen buildstap, dus hij heeft niet het geheugen nodig dat Next.js nodig heeft, en op de Coolify-pagina kun je een kleinere grootte kiezen. Open na de betaling in je Seturack-paneel je server via Mijn servers en wacht tot de rij App op het tabblad Overzicht zegt dat hij klaar is.

5. Publiceer vanuit het paneel

1. Open op het tabblad Overzicht de link bij Paneeladres en log in bij Coolify met de rijen E-mail en Wachtwoord.
2. Open op de pagina Projects My first project en production en druk op New resource.
3. Kies Public Git Repository, voer het adres van je GitHub-repository in en druk op Check repository.
4. Kies onder Build pack Static, laat Base Directory op / staan en druk op Continue. Deze optie publiceert de bestanden zoals ze zijn, zonder build.
5. Druk op Deploy. Is het klaar, open dan het HTTPS-adres op de pagina Domains.

Dat is alles, je site is live. Je hebt root-toegang en je kunt alles vanuit het paneel beheren als je dat liever hebt.

Een codeertool kan dit voor je doen

Ga je de site vaak wijzigen, dan maakt een codeertool zoals Claude Code of Cursor het leven makkelijker. Open de map met index.html in de tool, kopieer de rij Plak in je AI-tool uit je Seturack-paneel en plak die erin. De tool maakt de repository aan, publiceert de site en geeft je het adres. Onze gids voor codeertools heeft de details. De chatvensters van ChatGPT en Claude kunnen geen opdrachten naar een server sturen, dus plak die tekst daar niet.

Vier dingen om te weten

• Formulieren: Een contactformulier in gewone HTML kan zelf geen e-mail versturen. Om berichten te ontvangen moet het met een formulierdienst of servercode worden verbonden.
• Accounts en betalingen: Inloggen, opgeslagen records en betalingen vragen om servercode en een database. Op dat moment is je site een app.
• Bestandsnamen: De server behandelt hoofdletters en kleine letters als verschillend. Staat in de code logo.png en heet het bestand Logo.PNG, dan verschijnt de afbeelding niet.
• Back-ups: Dagelijkse back-ups zijn bij de prijs inbegrepen en het hoofdexemplaar van je site blijft op GitHub staan.

Veelgestelde vragen

Hoeveel RAM heeft een eenvoudige HTML-site nodig?

Zonder build vraagt de site zelf heel weinig, dus Coolify bepaalt de ondergrens. De documentatie ervan vraagt minimaal 2 cores en 2 GB RAM. De Next.js-optie raadt meer aan vanwege de builds: minimaal 4 GB RAM, 2 vCores en 40 GB schijf.

Wat kost het per maand?

Het aanbevolen minimum voor de Next.js-optie is ongeveer $6 per maand (inclusief btw), en buiten Turkije betaal je in Amerikaanse dollars. Kleinere groottes vind je op de prijzenpagina. Dagelijkse back-ups zijn bij de prijs inbegrepen en het verkeer is onbeperkt. Een domein is een aparte kostenpost en dat koop je elders.

Hoe koppel ik mijn eigen domein?

Laat bij je domeinprovider een A-record naar het IP-adres van de server wijzen. Druk in Coolify op de pagina Domains op Add domain, voer je domein in met https, sla op en druk op Redeploy. Het certificaat wordt automatisch uitgegeven. Ons domeinartikel legt het A-record uit.

Hoe werk ik de site later bij?

Vraag ChatGPT of Claude om de wijziging, upload de nieuwe index.html onder dezelfde naam naar GitHub en druk in Coolify op Redeploy. Om bij elke upload te publiceren voeg je het adres van de pagina Webhooks van de app toe op GitHub, zoals onze Next.js-gids uitlegt.

Heb ik een database nodig?

Niet voor een gewone HTML-site. Om bezoekersgegevens op te slaan kun je in Coolify op dezelfde server PostgreSQL aanmaken, maar je hebt ook servercode nodig om hem te gebruiken. Ga in dat stadium verder met onze gids voor het publiceren van apps.

Kant-en-klaar bij Seturack: Next.js, Coolify.