Level 3HTML: Publiser nettsiden din

Skrevet av: Lars Klingenberg

Kurs: Web
Tema: Tekstbasert, Nettside
Fag: Programmering, Teknologi
Klassetrinn: 8.-10. klasse, Videregående skole

Publiser nettsiden din på Internett

Nå har du laget ditt eget nettsted. Du ønsker vel å vise det frem, gjør du ikke?

Husker du servere fra den første økten? Servere er datamaskiner som alltid er på og koblet til Internett, og de er satt opp slik at folk kan besøke nettsteder som lever på disse datamaskinene.

For å legge nettsiden vår på internett skal vi nå bruke Github Pages. Det er det Kodeklubben bruker: kodeklubben.github.io. For at du skal kunne gjøre dette må du ha en epost-adresse. Du kan enten lage din egen (Gmail), bruk den du har på skolen eller spørre om å låne foreldrene dine sin. Det er viktig her at du husker hvilken epost du har brukt, du må også ha tilgang til eposten slik at du får godkjent brukeren på Github.

Github

Github er en samarbeidsplattform for oss som driver med programmering. Her kan vi legge ut prosjekter som andre kan hjelpe til med, eller vi kan finne et prosjekt vi kan bidra på. På denne måten kan vi enkelt hjelpe, samarbeide og dele med alle som driver med programmering i verden. Vi skal nå lage en GitHub-bruker.

  • Bilde av github nettsiden

Brukernavn.github.io

Nå som vi har en Github-bruker kan vi registrere en github.io-side.

  • bilde av hvordan opprette repository
  • bilde av hvordan velge navn på repository'et
  • Nå skal vi laste ned repository-et eller repo-et vårt, altså oppbevaringsstedet for koden til nettsiden vår. Denne koden legges i en mappe lokalt på datamaskinen vår. I denne mappen legger vi inn alle filene som skal brukes til nettsiden og bruker programmet eller kommandolinjen til Github for å laste opp kode til ditt-brukernavn.github.io-siden vår.

  • bilde av hvordan laste ned repository'et

    Hvis du er vant til å bruke kommandolinjen til Linux eller Mac OS X, så kan du gjøre det som står under ...or create a new repository on the command line.

  • Bilde av tillatelsesboks for GitHub
  • For å ikke ødelegge det vi har på kodeklubben.github.io skal jeg videre vise med brukeren larsfk.github.io.

    Bilde av hvordan clone i GitLab

    Da er det på tide å laste opp hjemmesidens første fil!

  • Bilde av GitHub mappen på skrivebordet
  • Bilde av filen index.htm i GitHub mappen
  • <!DOCTYPE html>
    <html>
        <body>
            <h1>Min første hjemmeside!</h1>
            <p>Denne hjemmesiden er laget med Git Pages.</p>
        </body>
    </html>
    

Nå skal vi laste opp denne filen til ditt-brukernavn.github.io.

Oppdater ditt-brukernavn.github.io

  • Hvordan sammenligne endringer med GitHub Desktop

    Når du trykker på Compare begynner Github å sammenligne det som ligger i mappen ditt-brukernavn.github.io med det som ligger på nettsiden ditt-brukernavn.github.io. Alt som er grønt er det som er lagt til og alt som blir rødt er det endringer som er fjernet. Under har jeg kun lagt til ny kode, derfor er koden grønn.

  • Bilde av hvordan laste opp med Github Desktop

NB! Stegene over må du gjøre hver gang du skal oppdatere nettsiden din!

Bilde av den nye nettsiden din!

Gratulerer med ny hjemmeside! Denne kan du dele med hvem du vil ved å sende lenken ditt-brukernavn.github.io.

Vil du lære mer om GitHub?

GitHub er et stort tema og kan være litt komplisert og vrient i starten, men jeg hvis du vil lære mer sjekk ut tipsene under:

Lisens: CC BY-SA 4.0

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!