Hjem GitHub og VS Code HTML CSS

GitHub og VS Code

Hva er GitHub?

GitHub er en skybasert tjeneste som hjelper utviklere med å lagre og administrere koden sin, samt spore og kontrollere endringer i koden. For å forstå nøyaktig hva GitHub er, må man kjenne til to prinsipper som henger sammen: Versjonskontrollsystem og Git.

Versjonskontrollsystemer innebærer at når nye filer blir endret eller oppdatert, vil ikke den gamle versjonen bli slettet, men heller lagres, kan bli hentet frem og endres etter behov. Prosjektutviklerene har også mulighet til å skaffe seg en kopi av kildekoden (respository). Denne prosessen kalles “branching” og gjør at utvikleren trygt kan gjøre endringer på den delen av koden uten at det har påvirkning på resten av prosjektet. Når utvikleren har ferdigstilt koden sin, kan hen gjennom “merging” slå den sammen med hovedkildekoden for å gjøre den offisiell, som skjer gjennom godkjenning med den originale eieren. Git er spesifikt programvare som går under distribuert versjonskontroll. Dette betyr at hele kodedatabasen, inkludert tidligere endringer og historie, befinner seg på hver utviklers datamaskin, som gjør at “merging” og “branching” prosessen blir lett som et plett.

GitHub er en platform som gjør det mye enklere for enkeltpersoner og team å bruke Git til versjonskontroll og samarbeid. GitHubs grensesnitt er brukervennlig nok til at selv nybegynnere kan dra nytte av Git. Uten GitHub krever bruk av Git vanligvis nemlig litt mer teknisk kunnskap og bruk av kommandoer og kommandolinjer. Platformen kan også bli sett på som et sosialt nettverk for utviklere der medlemmer kan følge hverandre, vurdere hverandres arbeid, kommunisere offentlig eller privat, og så videre. Samtidig har GitHub flere andre forskjellige fuksjoner, slik som GitHub Gist og GitHub Pages. GitHub Gist lar utviklere dele koder og notater mellom hverandre, mens GitHub Pages lar utviklere hoste prosjektene deres på nettet og bruker informasjon rett fra utviklerens respository. GitHub Pages er skrevet mer om lenger ned, men nå skal vi se mer på hvordan man generelt bruker GitHub:

Hvordan bruker man GitHub?

Steg en er å lage seg en bruker ved å trykke på “Sign Up” knappen øverst til høyre på nettsiden https://github.com/. Her blir man blant annet bedt om å skrive inn en email og å lage seg et passord, som er vanlig på mange nettsider. Dermed blir man bedt om å skrive inn et brukernavn, som er hva andre kan søke etter for å finne deg og det navnet koden din publiseres under. Så må du gjennom verifisering av emailen din, som også er ganske standard. Du får da en kode du må oppgi. Etter at du har oppgitt koden får du spørsmål om personalisering, men dette er bare å hoppe over. Nå har du kommet til hovedsiden og er klar til å bruke GitHub! Det er også mulig å bruke den nedlastbare versjonen av GitHub, men man fulger samme steg.

Steg to er å trykke på “create respository” knappen helt til venstre på siden. Først blir du bedt om å gi det et navn. Dette kan være nesten alt, men det er lurt å ha et navn som sier litt om hva slags prosjekt du skal lage, slik at det er lettere å finne fram og blir mindre sjangs for forvirring. Det er også mulig å legge til en beskrivelse av prosjektet i feltet under navngivningen eller en lengere beskrivelse ved hjelp av en egen fil, men dette er valgfritt. Dermed kan du velge mellom privat og offentlig. Offentlig betyr at det er synlig for alle på nettet, mens eieren velger de som direkte kan gjøre endringer. Privat betyr at eieren både velger hvem det er synlig for og hvem som kan gjøre endringer. For å benytte seg av GitHub Pages, må man velge offentlig, eller så koster det dessverre penger.

Steg tre er å legge til filene som trengs i prosjektet. Dette kan enten gjøres ved å lage en ny fil (creating a new file) eller å laste opp en eksisterende (uploading an existing file). Her tar vi utgangspunkt i at man ikke har noen fil fra før av. Man ender uansett opp med det samme resultatet. Etter å ha trykket på knappen blir man bedt om å navngi filen. Siden vi skal holde på med HTML og CSS, kan vi starte med å gi filen navnet “index.html”, som er et standard navn på HTML-filer, men du kan kalle den hva du vil så lenge den slutter på “.html”. Vi har mulighet til å legge til en CSS-fil senere. Det er også mulig å legge inn kode allerede i dette steget ved hjelp av boksen under navngivningsfeltet hvis det er ønskelig. Etterpå trykker man på “commit changes” knappen. Her får man mulighet til å legge til en frivillig beskrivelse, men hvis det ikke er ønskelig så er det bare å trykke på den samme knappen igjen. Du har nå laget en HTML-fil i ditt repository! For å lage en CSS-fil går man tilbake til hovedsiden av repositoriet og trykker på “add file”. Hvis man ikke har en eksisterende CSS-fil, kan man lage en ny, som følger akkurat samme prosedyre som ved HTML-filen. Her må filen istedet for å ende med “.html”, ende med “.css”.

Hva er VS Code?

VS Code er en editor, som enkelt er et program der man kan skrive tekst, som dermed gjør at man skrive kode! VS Code har i forhold til enkle editorer som Notepad, funksjoner som blant annet feilsøking, syntaksfremheving ved å fargelegge koden eller utheve den, forslag til forbedring av kode ved for eksempel vanlige feil og tilgang til såkalte snippets, som er småe gjenbrukbare utdrag av koder. Brukeren har også mulighet til å forandre temaet, snarveier på tastaturet, preferanser og installere en rekke med unike programvareutvidelser som er utviklet for å gi ekstra funksjonalitet. Samtidig er det fult mulig å bruke GitHub sammen med VS Code. Editorer som Visual Studio Code gir altså brukeren mulighet til å til å justere funksjonaliteten som allerede er der eller legge til tilleggsfunksjoner! Det er nemlig mye enklere og effektivt å skrive koder i editorer som VS Code enn editorer som Notepad som har minimalt med funksjoner og gjør prosessen både mer vanskelig og tidskrevende.

Hvordan bruker man VS Code?

Steg en er å finne ut om du vil bruke den nedlastbare versjonen eller nettleserversjonen av VS Code. Dette er selvfølgelig et valg som har stort preg av personlig preferanse, men jeg mener at å bruke nettleserversjonen er bedre når man skal lage nettsider. Da kan man ha både nettsiden og editoren rett ved siden av hverandre i nettleseren som gjør det enkelt å bytte mellom de og at man sparer mye tid. Nettleserversjonen til VS Code finner du her: https://vscode.dev/. Dette valget har mye mer å si enn å velge mellom nettleserversjonen eller den nedlastbare versjonen av GitHub, da man kommer til å bruke langt mye mer tid på å skrive inn kode i VS Code.

Trinn to i prosessen involverer å logge inn med GitHub-brukeren din, slik at VS Code får nødvendig tilgang til dine eksisterende repositories og deretter kan åpne dem for deg. For å gjøre dette, naviger til "Open Remote Repository" i VS Code-menyen, og deretter velger du alternativet "Open Remote Repository from GitHub". På dette punktet vil du motta en forespørsel fra den innebygde GitHub-programvareutvidelsen som ber deg om å logge inn. Ved å trykke på "allow" gir du VS Code autorisasjon til å koble seg til GitHub-kontoen din. Når du har fullført godkjenningsprosessen, får du muligheten til å logge inn med GitHub-brukeren din. Deretter, gjennom søkefeltet plassert øverst på grensesnittet, kan du navigere og finne det ønskede repositoriet du ønsker å jobbe med, både gamle og ny!

Steg tre er å begynne å kode og lagre det. Du kan nå skrive inn hva du vil og lagre det slik at det også vises på GitHub. For å bare starte med noe, kan vi bare skrive inn et utropstegn og trykke på “enter” knappen. Du har nå skrevet 12 linjer med kode bare ved å trykke på tre tastetrykk! Denne snippeten lager “grunnmuren” til HTML-koden og er en god mal å ta utgangspunkt i for videre arbeid med den. Nå som du har prøvd deg på å redigere filen, har du sikkert sett at det har dukket opp en blå boble til venstre på nettsiden. Dette har nemlig med lagringen av endringene å gjøre! Trykker du på ikonet blir du bedt om å skrive en melding og dermed trykke på “Commit & Push”. Meldingen kan være hva som helst, men det er best å skrive litt om hva endringen handler om for å hindre forvirring. Deretter får du muligheten til å trykke på “Commit & Push”, som betyr at oppdateringer og endringer av koden blir lagret lokalt og dermed sendt direkte til den eksterne repositorien hos GitHub. Filen har nå blitt redigert!

Hvordan kan man hoste en nettside ved hjelp av GitHub?

En av de kuleste funksjonene som GitHub tilbyr er GitHub Pages, som faktisk lar deg publisere nettsider på nettet. For å benytte seg av denne går man først inn på GitHub og velger repositoriet som man vil bruke funksjonen på. Dermed går man inn på innstillinger og velger “Pages” fra seksjonen som heter “Code and automation”. Fra før av er denne funksjonen deaktivert, men for å starte den velger man en “branch” og trykker på “Save”. Ved måten vi bruker GitHub på, får vi bare en “branch” å velge mellom, som er “main”. Velg denne og trykk deretter på “Save”. Å få nettsiden oppe tar litt tid, men etter å ha lastet inn siden på nytt noen ganger, kommer det snart opp en boks på toppen av siden som forteller at siden ligger på nettet og viser til lenken dens. Da er det bare å trykke på den og du vil se og ha resultatet fra HTML- og CSS-koden tilgjengelig i nettleseren så lenge du ønsker å ha den oppe. Den oppdateres også etter hver endring. Hvis du imidlertid vil fjerne nettsiden fra nettet er det mulig å trykke på de tre dottene i boksen, som gjør at du kan trykke på “Unpublish site”.


Laget av Christina | Her finner du HTML og CSS til nettsiden 🔗