Kodekurs: Lag din første nettside

Publisering

For å publisere nettsiden på internett trenger man to ting:
– en server (også kalt et webhotell) der filene kan bo
– en adresse (domene) som peker til webhotellet/serveren, slik at andre kan besøke nettsiden

Server

Det finnes mange ulike webhotell å velge mellom, som nettsidefilene kan "serveres" fra.

Som vanlige hoteller finnes webhoteller i ulike prisklasser og av ulik kvalitet. Firmaer som selger domener, selger ofte også webhotell. Noen velger også å eie eller leie sin egen server, der de kan sette opp sitt eget webhotell som de serverer filene fra.

For enkle nettsider som de vi lager her, finnes det gratis løsninger for webhotell der man kan laste opp nettsidefilene på internett i løpet av sekunder. Jeg bruker Netlify!

  1. Lag en konto på Netlify

    Gå inn på Netlify.app og registrer deg. Når du har opprettet en konto og bekreftet e-postadressen din, kan du logge inn. Du vil da bli møtt av dette:

  2. Last opp nettsidemappa

    Dra nettsidemappa fra skrivebordet (eller hvor du har lagret den) og inn i ruta som vises i Netlify.

    Du vil se at rammen der du skal slippe mappa utheves når du holder den over.

  3. Vent mens nettsiden lastes opp

    Det tar vanligvis ikke mer enn fem sekunder.

    Før nettsiden er klar vil det stå "Site has not yet been deployed".
    Når nettsiden er klar dukker det opp en klikkbar URL.

  4. Besøk nettsiden din!

    Klikk på URLen som dukket opp, og se nettsiden live på internett! Nå kan alle som har denne URLen komme inn på nettsiden din.

  5. Bytt navn på siden

    URLen som ble generert automatisk er som regel en rar kombinasjon av ord og tall. Du kan selv endre navn ved å gi siden et navn i Netlify sitt kontrollpanel.

    Klikk på "Site settings".
    Under "Site details" -> "Site information" finner du "Change site name".
    Bytt navnet til det du vil at adressen til nettsiden skal være, og lagre.
    Vakkert.
    Når adressa er oppdatert, kan du besøke nettsiden din via den nye URLen, og sende den til alle du kjenner :) Den automatisk genererte adressen vil slutte å funke.

Sjekk den ut selv! min-fete-nettside.netlify.app

Adressen min-fete-nettside.netlify.app er helt ok. Den er gratis, den er sikker, og det er egentlig alt man trenger. Men hva om jeg at adressen skal være ⭐min-fete-nettside.com⭐ istedenfor?

Domene

For å lage en egen adresse til nettsiden, må man kjøpe et domene. Domener koster ca 100 kroner i året og oppover.

Alle utgifter teller når man lever på studentbudsjett. Det er helt innafor å bruke domenet man lager på Netlify istedenfor å kjøpe et eget, og det går alltids an å legge til senere.

Som med webhotell finnes det mange ulike leverandører og ulike prisnivåer for domener. Jeg pleier å bruke Domeneshop. De er norske, og det er nyttig å ha både kundeservice og kontrollpanel på norsk, særlig når man er ny i gamet. Hvis du vet hva du vil at adressa til nettsiden din skal være, kan du gå inn der nå og søke opp domenet du ønsker deg. Da vil du få opp informasjon om det er ledig eller ikke.

Ok, nettsiden til domeneshop er kanskje litt stygg, men jeg føler meg hjemme her.
Domenet jeg ønsker meg er ledig! Nedover i prislista finner du også flere domeneendelser man kan velge mellom. Vet du om du vil ha .no eller .com? Hva med .studio eller .design? Kanskje .pizza?

For å registrere et .no-domene, må man enten ha et norsk organisasjonsnummer, eller registrere seg med personnummer. Kun norske personer og bedrifter har lov til å ha .no-domener.
Hos NORID kan du bruke personnummeret ditt for å få generert en person-ID, som du deretter bruker til å registrere et .no-domene.

Vil du ha flere domener, kan du enten krysse av i forrige steg, eller skrive de inn her. Ellers er det bare å klikke videre.
Når du bruker Netlify sitt gratis webhotell, trenger du ikke å kjøpe dette av Domeneshop. Derfor gjør vi ingen endringer her, men lar standardvalget stå.
Registrer deg hos Domeneshop med navn og adresse.

Etter å ha registrert deg hos Domeneshop, vil du motta en faktura, enten på mail eller Vipps, avhengig av hva du har valgt. Når denne er betalt, vil det kunne ta litt tid før domenet er klar til bruk.

Koble domene til server

For å få domenet til å fungere som adresse til webhotellet, må vi koble de to sammen.

Gå til "Domain settings" i Netlify.
Scroll ned til der du ser "Custom domains", og klikk på "Add custom domain".
Skriv inn ditt domene som du kjøpte hos Domeneshop, og klikk "Verify". (Jeg bruker ett av mine kuleste domener som eksempel, nbd)
Netlify vil fortelle deg at domenet allerede har en eier. Yes, det er deg! :D
Domenet vil dukke opp i lista, sammen med en egen linje for domenet med www foran.

Man trenger vanligvis ikke å skrive www foran når man skriver inn en URL i adressefeltet, så den siste der er kun for å sørge for at de som gjør det også kommer til riktig sted.

Det er to ulike måter å koble domenet til webhotellet på; den raske måten, og den sikre måten. Den raske måten er for deg som har dårlig tid og vil at koblingen skal begynne å funke fortest mulig, mens den sikre måten er for deg som er tålmodig, vil ha en URL som begynner med https, hengelåssymbol ved siden av domenenavnet i adressefeltet, og masse cred.

Den raske måten

Klikk på "Check DNS" ved domenet som ikke har www foran.

Her er det en del info, men vi trenger kun IP-adressa til webhotellet, som vi skal bruke til å fortelle domenet hvor det skal peke hen. Markér og kopiér IP-adressen.
Logg inn i Domeneshop og gå til oversikten over dine domener.
Klikk på domenet du vil koble til Netlify, og gå deretter til "DNS-pekere", fane nummer fire fra venstre.
I feltet til høyre skal du lime inn IP-adressen du kopierte fra Netlify.
Klikk på plusstegnet ved siden av feltet for å lagre det. Nå vet domenet hvor webhotellet er! Det kan ta litt tid før endringene trer i kraft og koblingen begynner å funke.
Sørg for at adressen med www foran funker ved å legge inn den samme IP-adressen for denne også. Husk å skrive www i feltet til venstre.
Når koblingen har begynt å funke vil domenet lede til nettsiden der den bor på Netlify!

Den sikre måten

Klikk på "Options" ved domenet uten www foran og velg "Set up Netlify DNS".
Her må du verifye domenet på nytt, for den sikre måten er veldig sikker!!
Minn Netlify på at det er du som eier domenet og legg det til.
Dette steget er valgfritt, så det hopper vi naturligvis over.

Dette er for deg som bruker domenet ditt til noe annet i tillegg, slik som for eksempel e-post. Det vil kunne slutte å funke når du sier at domenet skal peke til Netlify. Hvis du ikke bruker domenet ditt til noe annet enn denne nettsiden, bare fortsett :)

Netlify vil så presentere deg for noen rare adresser. Disse skal du lime inn i Domeneshop for å si til domenet hvor webhotellet er. Behold dette vinduet åpent, og gå inn på Domeneshop i et annet nettleservindu.
Logg inn i Domeneshop og gå til oversikten over dine domener.
Klikk på domenet du vil koble til Netlify, og gå deretter til "Navnetjenere", fane nummer tre fra venstre.
Lim inn adressene du fikk av Netlify, én og én, og i rekkefølge. Deretter klikker du "Endre" på knappen nederst som er alt for liten.
Domeneshop vil så fortelle deg at det kan ta litt tid før koblingen vil fungere. Det er tross alt den sikre måten, ikke den raske måten. Klikk "Fortsett".
I Netlify vil du nå kunne se at domenet er koblet til ved at det står "Netlify DNS" bak!
Det kan hende du må vente noen timer, men snart vil domenet ditt peke til webhotellet, og du vil få en fin liten hengelås ved siden av adressen som bevis på at du har benyttet deg av Den Sikre Måten.

Gratulerer med publiseringen!

→ Send meg nettsiden din a!