Gratis een website online zetten: stap voor stap

Wat heb je nodig?

• Een website: een map met HTML-, CSS- en JavaScript-bestanden, of een project dat je bouwt met npm run build (React, Vue, Vite, Astro en dergelijke).
• Een gratis account op zeno-innovations.com.
• Geen creditcard, geen server en geen domeinnaam. Je krijgt een gratis adres als jouw-naam.zeno-innovations.com.

Stap 1: zorg dat je website klaarstaat

Zet alle bestanden van je website in één map. De startpagina moet index.html heten (met kleine letters) en in de hoofdmap staan, niet in een submap. Dat is de pagina die bezoekers zien als ze je adres openen.

mijn-website/
├── index.html
├── over.html
├── style.css
└── images/
    └── logo.png

Gebruik in je HTML relatieve paden, zoals images/logo.png, en geen paden naar je eigen computer zoals C:\Users\.... Die werken online niet.

Werk je met React, Vue, Vite of Astro? Dan hoef je zelf niets te bouwen. Lever de projectmap met package.json aan: het platform voert npm run build uit en zet de map dist, build of out online.

Stap 2: maak een gratis account

Ga naar zeno-innovations.com/dashboard en meld je aan. Dat kan met je e-mailadres of in één klik met GitHub, Google of Discord. Het gratis Hobby-plan is meteen actief.

Stap 3: maak een nieuw project

Klik in het dashboard op New project en kies Website. Geef je project een naam, bijvoorbeeld mijn-portfolio. Die naam wordt je adres: https://mijn-portfolio.zeno-innovations.com. Kies dus iets korts en herkenbaars, met kleine letters en streepjes in plaats van spaties.

Stap 4: voeg je code toe

Je hebt drie mogelijkheden. Kies wat het beste bij je past:

A. Uploaden (het makkelijkst)

Sleep je bestanden, je hele map of een .zip-bestand in het uploadvak. Mappen als node_modules en .git worden automatisch overgeslagen.

B. GitHub koppelen (handig als je vaak iets aanpast)

Staat je code op GitHub, koppel dan de repository. Wil je dat elke git push automatisch live gaat? Kopieer dan de Deploy hook-URL uit de instellingen van je project en plak die in GitHub bij Settings → Webhooks, met content type application/json.

C. De terminal (voor developers)

Installeer de Zeno CLI, typ zeno login en daarna in de map van je website zeno --prod. Meer hoef je niet te doen.

npm install -g https://zeno-innovations.com/dashboard/zeno-cli.tgz
zeno login
cd mijn-website
zeno --prod

Stap 5: deploy en controleer

Klik op Deploy. Je ziet de bouwstappen live voorbijkomen. Na een paar seconden staat je website online op https://jouw-naam.zeno-innovations.com. Open het adres op je computer én op je telefoon, en klik even door alle pagina's om te controleren of plaatjes en links werken.

Je website bijwerken

Iets aangepast? Upload de nieuwe versie, push naar GitHub of typ opnieuw zeno --prod. Je oude versie blijft online tot de nieuwe klaar is, dus je site is nooit even onbereikbaar. Elke versie krijgt een eigen preview-link, en gaat er toch iets mis, dan zet je met één klik de vorige versie terug.

Veelgemaakte fouten

• Je ziet een 404-pagina. Er staat geen index.html in de hoofdmap. Misschien heet je startpagina home.html of Index.html, of staat hij in een submap. Hernoem hem naar index.html en zet hem bovenaan in je map.
• Plaatjes laden niet. Controleer hoofdletters: online is Logo.png iets anders dan logo.png. En gebruik relatieve paden.
• Je React-app toont een lege pagina na verversen. Zet in de instellingen van je project de single-page-app-modus aan, zodat elk adres bij je app uitkomt.
• Je wilt een eigen foutpagina. Zet een 404.html in de hoofdmap; die wordt automatisch gebruikt.

En daarna?

In het dashboard zie je hoeveel bezoekers je site krijgt, uit welke landen en op welke apparaten, zonder cookies. Wil je meer, zoals een server, API of Discord-bot, dan kun je overstappen op Pro. En wil je liever dat iemand de website voor je maakt? Kijk dan bij website laten maken.