Voorwoord
Na het maken van een site met AI-tools zoals ChatGPT, Canva, Gemini Canvas, Claude Artifacts of Sider Web Creator, is de volgende grote vraag hoe je webhosting op GitHub Pages kunt regelen, zodat je de site via je eigen domein kunt bezoeken. Deze handleiding leidt je stapsgewijs door het proces—van het exporteren van een project in Sider Web Creator tot het eindigen met een volwaardige website onder je persoonlijke domein—terwijl zowel webhosting als GitHub Pages-configuratie worden gedemystificeerd.
🎯 Wat je zult leren
Hoe je de AI-gegenereerde projectbestanden correct kunt downloaden en begrijpen voordat je een GitHub Pages-webhostingworkflow kiest.
Stapsgewijze instructies om de site gratis op GitHub Pages te implementeren.
Hoe je je eigen aangepaste domein kunt kopen en binden binnen de GitHub Pages-instellingen en het kunt verbinden met best-practice DNS-records.
Pro-tips om de site er volledig professioneel en betrouwbaar uit te laten zien zodra de GitHub Pages-setup live is.
De meeste static-hostingplatforms—waaronder GitHub Pages—verwachten een schone build-map, dus je moet eerst je bestanden verzamelen.
1.1 Download de projectbestanden
Nadat Web Creator klaar is met het genereren van de site, klik je op de knop Download in de rechterbovenhoek.
Wacht terwijl het systeem je project verpakt.
Je ontvangt een .zip-bestand dat klaar is voor GitHub Pages-upload.
Pak de zip uit op een willekeurige plek op je computer.
1.2 Begrijp de bestandsstructuur (belangrijk!)
my‑website/
├── dist/ ⭐ Productiebuild voor **GitHub Pages**
│ ├── index.html → Homepagina
│ ├── assets/ → Stijlen & scripts
│ └── …
├── src/ 📝 Broncode map
├── package.json 📦 Projectconfiguratie
└── …andere bestanden
Belangrijke herinnering: Alleen de inhoud in dist/ wordt gepubliceerd op GitHub Pages.
1.3 Lokale preview-test
Ga naar de map dist/.
Dubbelklik op index.html.
De site opent in je browser.
Controleer of alles werkt voordat je naar GitHub Pages pusht.
🚀 Stap 2: Kies een implementatieplatform
Hoewel GitHub Pages de held van deze handleiding is, hier is een snelle vergelijking:
| |
|---|
🌟 GitHub Pages (focus van deze handleiding) | Volledig gratis • Drag-and-drop of git push implementatie • Gratis HTTPS • Global CDN • Aangepaste domeinen • Native CI met GitHub Actions |
| Globaal edge-netwerk • 100% gratis • Razendsnel |
| Gepolijste UI • Functionaliteit-rijk |
📤 Stap 3: Implementeren op GitHub Pages (gedetailleerde handleiding)
Hoewel GitHub Pages zich binnen een ontwikkelaarsplatform bevindt, beschouw het als ultramoderne webhosting met push-button gemak.
3.1 Aanmelden & een repository maken
Ga naar github.com en meld je aan.
Klik op + New repository.
Noem het my‑website en kies Public (of Private als je een betaald abonnement hebt; GitHub Pages ondersteunt nu private repo's).
Laat Initialize with README uitgeschakeld als je van plan bent later te pushen.
3.2 Je sitebestanden toevoegen
Methode A: Drag-and-drop upload (het beste voor beginners)
Klik in het tabblad Code van de repo op Add file → Upload files.
Sleep alles in dist/.
Scroll naar beneden en klik op Commit changes.
Methode B: Git CLI (het beste voor ontwikkelaars)
# Kloon de lege repo
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Kopieer build-output
cp -r /path/to/dist/* .
# Commit & push
git add .
git commit -m "Initial **GitHub Pages** deploy"
git push origin main
Beide paden laten je achter met statische bestanden in de repo-root—perfect voor GitHub Pages.
3.3 GitHub Pages inschakelen
Ga naar Settings → Pages.
Kies onder Source Deploy from a branch → main (/root).
Klik op Save. GitHub Pages bouwt in ~30 s en retourneert een URL zoals https://<user>.github.io/my‑website/.
3.4 Je standaard-URL ophalen
Bezoek de link om te bevestigen dat alles laadt. GitHub Pages serveert automatisch via global CDN.
🌐 Stap 4: Koop en bind je eigen domein
4.1 Een domein kopen
Aanbevolen registrars (werken allemaal goed met GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Kies waar mogelijk een korte .com.
4.2 Het domein toevoegen in GitHub Pages
Nog steeds in Settings → Pages, zoek Custom domain.
Voer mywebsite.com of www.mywebsite.com in.
Klik op Save. GitHub Pages schrijft automatisch een CNAME-bestand.
4.3 DNS-records configureren
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Wacht 10 min–24 uur op propagatie. Deze IP's zijn constant voor GitHub Pages. |
4.4 HTTPS afdwingen
Nadat DNS is gepropageerd, vernieuw je de Pages-instellingen en schakel je Enforce HTTPS in. Let's Encrypt-certificaten worden automatisch uitgegeven.
✨ Stap 5: Zorg ervoor dat de site er professioneel uitziet
5.1 Een aangepaste favicon toevoegen
Bereid een 32×32 px icoon voor met de naam favicon.ico.
Plaats het in de repo-root.
Commit en push; GitHub Pages serveert het direct.
5.2 Aangepaste meta-info invoegen
Bewerk index.html in de repo-root:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analytics (optioneel)
Plak GA / Plausible snippets in <head>; GitHub Pages respecteert caching headers.
🔧 Probleemoplossing
Blanco pagina? Bevestig dat index.html zich in de repo-root bevindt en dat asset-paden relatief zijn.
Domein loopt naar .github.io? Controleer A/CNAME-records en wacht de volledige TTL af.
HTTPS-schakelaar uitgeschakeld? DNS is nog niet correct; verifieer met dig.
🎉 Samenvatting
Gefeliciteerd! Je hebt nu:
✅ Met succes je AI-gegenereerde website gedownload, klaar voor GitHub Pages-hosting.
✅ Deze gratis geïmplementeerd op GitHub Pages.
✅ Je eigen aangepaste domein beveiligd.
✅ De GitHub Pages-omgeving gepolijst om er volledig professioneel uit te zien.
Je site is nu:
🌐 24/7 online, aangedreven door GitHub Pages CDN.
🏷️ Geserveerd onder een professioneel domein.
🔒 Beschermd door HTTPS-encryptie.
⚡ Globaal snel dankzij GitHub Pages edge nodes.
🗝️ Volledig in eigendom van en beheerd door jou.
💡 Volgende stappen
SEO-optimalisatie: voeg gerichte zoekwoorden en metabeschrijvingen toe om de zoekresultaten voor je GitHub Pages-setup te verbeteren.
Sociaal delen: integreer deelknoppen voor grote platforms.
Continue updates: commit wijzigingen regelmatig; GitHub Pages implementeert automatisch opnieuw.
Backups: schakel GitHub repository-bescherming in of spiegel de repo.
Je bent nu een echte website-eigenaar—deel je GitHub Pages-link en laat je creatie aan de wereld zien!
