Du kan bruge Github som testserver for dine web-prototyper. Serveren gør din webside tilgængelig med et link. Her er en trinvis guide med Github Desktop.
Trin 1) Opret et nyt repository
Først skal du oprette et nyt repository i Github.
Hvis du allerede har et repository kan dette trin med fordel skippes.
- Opret en mappe til dit repo.
- I Github Desktop “> File > New Repo”.
- Giv dit repo navn og beskrivelse.
- Marker at README.md skal laves.
- Klik på “Publish Repository”.
- Åbn din mappe med dit webprojekt. Du skal stå dér hvor du ser index.html.
- Kopier alle filer og mapper herfra til mappen med dit repository.
- Github Desktop ser ændringerne i mappen.
- Skriv en “Commit message” (en besked til gruppen om, hvad du har ændret).
- Klik på den blå “Commit” knap.
- Push til github
Trin 2) Tjek om dit repo ser korrekt ud
Efter push til Github bør dit online repo ligne det du ser herunder. Læg mærke til at index.html ligger i rodmappen.
Filen README.md bør ideelt redigeres til en kortfattet beskrivelse af dit projekt.
Github Pages
Med Github Pages kan du få din webside online og danne et test-link til siden. Gør sådan:
- Klik på “Settings”
- I menuen som kommer til syne klikker du på “Pages”
- Under branch (= “forgrening”) vælger du “main” (eller en alternativ gren, hvis du har flere).
- Klik på “Save”,
Vent nogle øjeblikke. Opdater siden. Når du ser linket er siden aktiv. Min side fik dette link:
https://asathoor.github.io/eaa25-landingpage
Test siden
Nu er din webside klar. Efter et klik på linket kan du afprøve og teste din webside.
Tekniske tests
Hvis der er fejl i koden, kan der ske meget mærkelige ting. Derfor bør du altid afprøve om der er fejl i din kode. Som regel gør Visual Studio Code opmærksom på fejl; men vi kan jo overse noget. Her hjælper en validator.
- HTML Validator: https://validator.w3.org/
- CSS Validator: https://jigsaw.w3.org/css-validator/
Når din side er online kan du teste ved at kopiere linket fra Github Pages ind i “Validate by URI”.
Og ja, så må vi lige afsløre, at en URI er det samme som en URL, der er det samme som linket til en side. Om du siger det ene eller det andet afhænger af, hvem du vil imponere …
Hvis der er fejl – så prøv at rette dem.
Og hvis du ikke forstår en fejlmeddelelse, så spørg gerne AI, hvad fejlen mon betyder.
Husk, at “fejl” i denne sammenhæng er dine venner. Når du retter dem bliver dit arbejde bedre.
Fordele og ulemper
Der er både fordele og ulemper ved at bruge Github pages. Løsningen er mest af alt tænkt som en “sandkasse” eller et “test-miljø”. Hvis du får brug for et rigtigt website til en kunde, så skal din kode lægges på en server og du får brug for et domæne.
| Fordele | Ulemper |
|---|---|
| Du kan afprøve et website i flere browsere | Du har ikke dit eget domæne. Her kræves en webserver. |
| Du kan validere din kode i browsere | Databaser er ikke tilgængelige, så du kan ikke sætte fx en WordPress-løsning op. |
| Du får en god fornemmelse for hvordan dit site fungerer | Serverside scripting er ikke mulig på nuværende tidspunkt. |