Een HTML-export van je AI-design online zetten

Je hebt een map met een index.html uit Claude Design, Google Stitch of een andere AI-tool. Dat is genoeg voor een website, maar alleen het begin. Hieronder staan de stappen in de volgorde waarin je ze doet, met de instellingen erbij: hosting, je domein, HTTPS, een formulier dat aankomt, statistieken en Google.

Herken je dit?

Een export is af als site, niet als website

Een HTML-export is een statische site: losse bestanden die de server ongewijzigd doorgeeft. Er draait geen PHP en geen database. Daardoor is hosting goedkoop, laadt de site snel en valt er weinig te patchen. Een PHP-lek raakt je niet, want er draait geen PHP. Het verschil met WordPress staat in statische website of WordPress.

Wat een export mist, is alles buiten de pagina. Een adres. Een certificaat voor HTTPS. Een plek waar een formulier zijn bericht afgeeft. Een manier om bezoekers te tellen. Die vier regel je bij de host en met een paar regels code.

Zo zet je hem online

1. Maak de map klaar

Zet index.html bovenin de map, niet in een submap. Gebruik in bestandsnamen kleine letters en geen spaties. Op je eigen computer werkt Logo.PNG ook als de HTML om logo.png vraagt, op de meeste servers niet. Zoek in de HTML naar http://: elke afbeelding of script via gewoon HTTP geeft straks een waarschuwing.

2. Kies een statische host

Drie diensten waar je de map direct in sleept:

Een nieuwe versie zet je online door de map opnieuw te uploaden naar hetzelfde project. Het adres blijft gelijk.

3. Koppel je domein

In het dashboard van je host voeg je je domein toe. De host toont dan welke DNS-records je bij je domeinregistrar zet. Meestal is dat een CNAME voor www en een A- of ALIAS-record voor het domein zonder www.

Type    Naam   Waarde
CNAME   www    jouw-site.netlify.app
A       @      het IP-adres dat je host opgeeft
MX      @      (niet aanraken: hier loopt je e-mail)

Zet de TTL van de records een dag van tevoren laag, bijvoorbeeld op 300 seconden. Dan is een fout binnen vijf minuten hersteld in plaats van binnen een dag.

4. Zet HTTPS aan

Wijst je domein naar de host, dan maakt die zelf een certificaat aan. Dat duurt meestal minuten. Zet daarna de optie aan die elk bezoek via HTTP doorstuurt naar HTTPS. Krijg je toch “Niet veilig” te zien, open dan de console van je browser: daar staat welk bestand nog via HTTP laadt.

5. Laat het formulier echt mailen

Een formulier uit een export stuurt zijn gegevens nergens heen. Je kiest een van drie routes. Host je bij Netlify, dan zet je twee attributen op het formulier en schakel je in het dashboard formulierdetectie en een melding per mail in.

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="faxnummer">
  <p hidden><label>Niet invullen <input name="faxnummer"></label></p>
  <label>Naam <input name="naam" autocomplete="name" required></label>
  <label>E-mail <input type="email" name="email" autocomplete="email" required></label>
  <label>Bericht <textarea name="bericht" required></textarea></label>
  <button type="submit">Versturen</button>
</form>

Bij Cloudflare of Vercel gebruik je een formulierdienst: je zet het adres van die dienst in het action-attribuut en zij mailen het bericht door. De derde route is een eigen serverfunctie die via je mailprovider verstuurt. Welke je ook kiest: stuur na de livegang een echte aanvraag en kijk ook in je spammap. Een formulier verzamelt persoonsgegevens, dus noem in je privacyverklaring waar de berichten terechtkomen. Waar je op let bij diensten buiten de EU, staat in AI-tools, de AVG en hosting.

6. Meet bezoekers, met of zonder cookies

Er zijn twee routes. Je meet zonder cookies, met een dienst die geen bezoekers volgt, zoals Cloudflare Web Analytics of Plausible. Of je gebruikt Google Analytics en laadt het pas na toestemming. De Autoriteit Persoonsgegevens legt op haar pagina over cookies uit wanneer statistieken zonder toestemming mogen: als ze geen of weinig gevolgen hebben voor de privacy. Of jouw opzet daaronder valt, beoordeelt een jurist.

Kies je voor toestemming, laad het script dan niet in de head. Laad het pas als iemand op Akkoord klikt, en maak Weigeren net zo makkelijk. Zo werkt het op deze site ook.

<script>
  function laadAnalytics() {
    var s = document.createElement('script');
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-JOUWCODE';
    s.async = true;
    document.head.appendChild(s);
    window.dataLayer = window.dataLayer || [];
    window.gtag = function () { dataLayer.push(arguments); };
    gtag('js', new Date());
    gtag('config', 'G-JOUWCODE');
  }
  if (localStorage.getItem('statistieken') === 'ja') laadAnalytics();
</script>
<button onclick="localStorage.setItem('statistieken', 'ja'); laadAnalytics()">Akkoord</button>
<button onclick="localStorage.setItem('statistieken', 'nee')">Weigeren</button>

7. Vertel Google dat je er bent

Zet een robots.txt en een sitemap.xml in de map, naast index.html. Voeg je domein toe in Search Console en dien daar de sitemap in. Geef elke pagina een eigen titel en beschrijving in de head.

# robots.txt
User-agent: *
Allow: /
Sitemap: https://www.jouwdomein.nl/sitemap.xml

<!-- sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://www.jouwdomein.nl/</loc></url>
  <url><loc>https://www.jouwdomein.nl/contact.html</loc></url>
</urlset>

Veelgemaakte fouten

Wanneer je hulp nodig hebt

Heeft je site meer pagina’s, moeten teksten aangepast kunnen worden zonder HTML, of wil je dat iemand anders de hosting bijhoudt, dan bouwen wij het om: AI-design omzetten naar een echte website. Staat de site online en vindt Google hem niet, lees dan AI-website niet gevonden in Google. Wil je je domein en hosting bij ons onderbrengen, dan is hosting en domein overzetten gratis bij een beheercontract. Meer gidsen staan bij van AI-design naar een echte website.