Introductie
Ik denk dat elke programmeur deze situatie wel herkend. Je bent net aan het programmeer avontuur begonnen en plots krijg je hét idee voor de aller beste website ooit. Je gaat aan de slag en na een paar intensieve dagen programmeren bedenk je je dat het tijd is om de website publiekelijk beschikbaar te maken, maar hoe doe je dit? En hoe zorg je er bovendien voor dat de kosten beperkt blijven? In dit blog leg ik je uit hoe je een website met een eigen domein live zet. In dit voorbeeld wordt nuxt gebruikt, maar dit kan natuurlijk ook voor elke andere statische website.
Trouwens, wil je meer lezen over home autamations? Neem dan een kijkje op mijn andere site MoreHue.com lijkt me leuk je daar te zien :).
Het plan
Om een website te hosten zijn er een aantal zaken die je moet regelen
- Het kopen van een eigen domein
- Bepalen waar je de website wilt hosten
- De website uploaden naar de hosting server
Al deze onderdelen komen in de volgende hoofdstukken aan bod.
Je eigen domein
Er bestaan een talloze websites waar je een eigen domein kan registreren. Denk hierbij aan grote internationale bedrijven als godaddy en domain.com. Maar het is ook mogelijk om een domein bij een Nederlands bedrijf te kopen, dit kan bijvoorbeeld bij TransIP of Mijndomein.
Met zowel TransIP als Mijndomein heb ik ondertussen al enige ervaring opgedaan. Mijn persoonlijke voorkeur gaat uit naar TransIP aangezien je hier alles precies kan instellen hoe jij dat zelf wil.
Via de TransIP zoekpagina kun je controleren of het domein waar jij naar opzoek bent nog beschikbaar is. Een .nl domein kost het eerste jaar slechts €3,99 excl. BTW.
Maar na het kopen van een domein ben je er natuurlijk nog niet. Echter, voordat ik je uitleg hoe je dit domein moet configureren zullen we eerst moeten bepalen waar we de website gaan hosten.
Hosting bepalen
Net als voor het kopen van een domein zijn er ook weer allerlei opties voor het hosten van je website. Zo bestaat bijvoorbeeld de mogelijkheid om de hosting door TransIP of Mijndomein af te laten handelen. Het hosten van een statische website bij TransIP kost €5,99 excl. BTW per maand. Wil je een statische website bij Mijndomein hosten dan kost dit je €49,59 excl. BTW per jaar. Maar zoals in de introductie al geschetst werd wil je de kosten voor je nieuwe idee graag beperken, gezien je niet zeker weet of het gaat lopen.
Wat nou als ik je vertel dat je een website ook gratis kan hosten!
Netlify
Na ervaring te hebben opgedaan met TransIP en Mijndomein ben ik gaan kijken naar andere mogelijkheden. Ik vroeg me af of het mogelijk was om een website ergens anders goedkoper te laten hosten. Hierdoor ben ik bij Netlify terecht gekomen. Zoals aangegeven in mijn blog 'Hoe ik een blog heb gemaakt met Vue en Nuxt Content' was ik van plan dit blog te hosten op Netlify. Netlify biedt gebruikers de mogelijkheid om statische websites gratis te hosten. Maar kan dat wel? Daar moet toch wat achter zitten?
De catch
Wanneer een bedrijf iets gratis aanbiedt doen ze dit meestal met een achterliggende gedachte. Bijvoorbeeld dat jij later een ander product bij hen afneemt waar je wel voor moet betalen. Dit is natuurlijk ook het geval bij Netlify, maar het opmerkelijke is de functionaliteit die ze bieden voor gratis gebruikers. Zo mag je oneindig veel websites bij ze aanmaken, krijg je 300 build minuten per maand om je website automatisch te updaten via bijvoorbeeld github en krijg je gratis 100 formulieren per maand.
Wel zijn er limieten gesteld aan verschillende opties. Zo mag je tot 100GB aan bandbreedte per maand gebruiken en mag je maar 1 build tegelijk uitvoeren. Al met al biedt Netlify de perfectie mogelijkheden voor hobby programmeurs.
Binnen enkele minuten heb je een account aangemaakt en kun je beginnen met het uploaden van je website.
Website uploaden
Binnen het Netlify portaal is het zeer gemakkelijk om een website te uploaden. Maar let goed op! Voor je een website upload is het van belang dat je niet een development omgeving uploadt maar de productie omgeving.
In het geval van een nuxt blog dien je het volgende commando uit te voeren in project map npm run generate. Dit maakt voor jou een dist folder aan waarin de productie omgeving van je project komt te staan.
Heb je geen nuxt project? Geen probleem je kan ook een voorbeeld website downloaden via free-css.com.
Het enige wat je nu nog hoeft te doen is de folder te slepen naar de Netlify website en tada! Je hebt je website online staan.
Netlify maakt voor jou een x.netlify.app website aan welke je kan aanpassen in de website-instellingen naar jouwvoorkeur.netlify.app. Dit is echter nog niet het domein wat we zojuist gekocht hebben. Het instellen hiervan leg ik uit in het volgende hoofdstuk.
Het configureren
Na het kopen van een domein en het aanmaken van een Netlify website dienen deze 2 services alleen nog aan elkaar gekoppeld te worden. Binnen Netlify ga je naar 'Domain settings' en druk je op 'Add custom domain'. Hier vul je je .nl domein in die je eerder hebt gekocht en geef je aan dat je het domein wilt toevoegen. Vervolgens druk je op 'DNS configuratie' om te zien naar welk IP-adres jouw pas gekochte domein moet wijzen, hier vind je ook de nameservers.
Vervolgens hoef je deze alleen nog in te vullen bij de door jou gekozen domein registrar. Hieronder geef ik het voorbeeld van koenvanzeijl.nl.
Let wel op het kan tot 24 uur duren totdat de DNS juist is ingesteld.
Conclusie
Het is dus zeker mogelijk om een website met eigen domein te hosten voor minder dan €5. Je moet alleen even uitzoeken hoe je dit het beste kan doen. Ik hoop dat ik iemand hiermee heb kunnen helpen om zijn of haar hobby project publiekelijk beschikbaar te maken, want wie weet waar het tot uitgroeit.
Heb jij nou een website op deze manier gemaakt of heb je nog andere tips? Laat het even weten in de comments.
