ChatGPT website online zetten: stap voor stap

Een website van ChatGPT zet je online door de code uit het gesprek als bestanden op te slaan en die bij een hostingpartij neer te zetten. De chat en Canvas hosten niets, dus de bestanden zet je zelf online. Je werkt in vier korte stappen: bestanden maken, lokaal testen, uploaden en je domein koppelen. Hieronder staat hoe dat gaat, en wat je doet als ChatGPT iets bouwt dat een server nodig heeft.

Van chat naar bestanden

ChatGPT levert code op drie manieren. Het resultaat is altijd tekst die jij nog in een bestand moet zetten.

• In de chat. Je vraagt om een website en krijgt een codeblok met <!DOCTYPE html> bovenaan. Daar kun je de code uit kopiëren.
• In Canvas. De code staat naast het gesprek in een eigen venster. Er zit een downloadknop rechtsboven. Een code-canvas wordt volgens OpenAI opgeslagen met een extensie die bij de taal past. Controleer na het downloaden of het bestand .html heet en compleet is.
• Via Codex. Dat is ChatGPT als programmeerhulp die in een projectmap of een GitHub-repository werkt. Je krijgt dan een heel project, geen losse codeblokken.

Vraag in het begin al om iets wat makkelijk online te zetten is. Een zin als “Maak één index.html met de css in een apart bestand style.css, zonder server en zonder build” scheelt je later het meeste werk.

Code opslaan als bestanden

Zo maak je van de chat een site die je kunt openen:

1. Maak op je computer een nieuwe map, bijvoorbeeld mijn-site.
2. Open een eenvoudige teksteditor (Kladblok, TextEdit in platte tekstmodus of een gratis editor als VS Code).
3. Plak de HTML en sla op als index.html in die map.
4. Heeft ChatGPT de css apart gegeven, plak die dan in style.css in dezelfde map. In index.html moet dan een regel staan als <link rel="stylesheet" href="style.css">.
5. Afbeeldingen zet je in een submap, bijvoorbeeld afbeeldingen, en de verwijzing in de code wordt afbeeldingen/foto.jpg.

Het bestand moet precies index.html heten, met kleine letters. Zo herkent een server de startpagina.

Lokaal testen door te dubbelklikken

Dubbelklik op index.html. Je browser opent de pagina rechtstreeks vanaf je computer. Controleer vijf dingen:

• Zie je de afbeeldingen?
• Hebben de knoppen en menulinks een bestemming?
• Ziet het er op je telefoon goed uit? Maak het browservenster smal om dat te zien.
• Staan er teksten in die niet kloppen, zoals een verzonnen adres of telefoonnummer? ChatGPT vult die soms in. Haal ze weg of vervang ze door je eigen gegevens.
• Staat er ergens een sleutel of wachtwoord in de code? Dat hoort er niet in.

Werkt het lokaal, dan is de kans groot dat het online ook werkt, zolang je de bestanden en mappen in dezelfde opzet uploadt.

Een project bouwen met Codex

Gebruik je Codex, dan werk je in een echte projectmap. Vraag expliciet om een statische site. Een bruikbare opdracht:

Bouw een statische website met Vite. Geen server en geen database.
Zorg dat npm run build een map dist maakt met index.html in de hoofdmap.

Draai daarna in die map:

npm install
npm run build

De inhoud van dist is je website. Bij Next.js is dat de map out, mits het project is ingesteld met output: 'export'. Upload die inhoud, niet de hele projectmap. De details en valkuilen staan in React of Vite website hosten zonder Node-server.

Een project dat je via GitHub krijgt, kun je ons ook sturen. Hoe dat werkt lees je in AI-website exporteren als zip of GitHub.

Als ChatGPT een Node- of Next-app voorstelt

ChatGPT kiest soms zelf voor Node met Express, of voor een Next.js-app met serverfuncties. Dat kan gebeuren als je vraagt om inloggen, een database of een formulier dat berichten opslaat. Je hebt dan twee keuzes.

Terug naar statisch. Vraag ChatGPT: “Maak hier een versie van met alleen HTML, css en javascript. Het formulier mag naar een formulierdienst of een PHP-bestand sturen.” Voor een bedrijfssite met een contactformulier is dat bijna altijd genoeg. Hoe je zo’n formulier laat werken lees je in contactformulier op je AI-website.

Doorgaan met de server. Heb je echt een server of database nodig, dan is dat geen standaardpakket. Een Node-app past bij een aanbod op maat. Stuur ons een appje met wat ChatGPT heeft gebouwd, dan kijken we wat er nodig is en komt er een voorstel.

Wat is ChatGPT Sites?

OpenAI heeft een dienst genaamd ChatGPT Sites, waarmee je een website kunt beschrijven en laten hosten door OpenAI zelf. In de documentatie staat dat je er een eigen domein aan kunt koppelen waar de dienst dat aanbiedt, en dat sommige frameworks en databases niet worden ondersteund. Op het moment van schrijven staat er dat het als preview beschikbaar is voor ChatGPT Business- en Enterprise-workspaces. Of jouw account het heeft, controleer je in de officiële uitleg op learn.chatgpt.com.

Het is een dienst van OpenAI, geen onderdeel van onze hosting. Je site blijft dan binnen het OpenAI-platform. Wil je de bestanden zelf in handen hebben, bij een Nederlandse partij met een vaste maandprijs, dan is een export en eigen hosting de route.

Online zetten op je eigen domein

Je hebt nu een map met een index.html, en eventueel een stylesheet en afbeeldingen. Twee manieren om hem online te krijgen:

Zelf uploaden met SFTP. Log met FileZilla of Cyberduck in met de gegevens uit je portal onder Bestanden en sleep de inhoud van je map naar de hoofdmap van je site.

Wij doen het. Stuur ons de zip of de GitHub-link. We zetten hem online als onderdeel van de gratis verhuizing.

Daarna koppel je het domein met twee nameservers die je eenmalig bij je registrar invult. De stappen staan in domeinnaam koppelen aan je AI-website. Bestond er al een site op dat domein, dan blijft die online totdat jij de nameservers wijzigt.

Je site staat achter Cloudflare, met SSL erbij en een dagelijkse back-up. Het Website-plan kost € 9 per maand, of € 90 per jaar. Zie prijzen of bestel meteen via het bestelformulier. Meer over onze aanpak voor ChatGPT-sites staat op hosting voor ChatGPT-websites. Het volledige overzicht van routes staat in website van AI online zetten.