Hur GitHub Pages fungerar

GitHub Pages Àr en gratis hosting-tjÀnst frÄn GitHub som lÄter dig publicera webbsidor direkt frÄn ditt GitHub-repository. Det Àr perfekt för projekt-dokumentation, portfolios, och interaktiva applikationer som vÄra fredagsquiz!

🎯 Vad Ă€r GitHub Pages?

GitHub Pages Àr en statisk webbplatshosting-tjÀnst som tar HTML, CSS och JavaScript-filer direkt frÄn ett repository pÄ GitHub och publicerar dem som en webbplats. TjÀnsten Àr:

🔧 Hur aktiverar man GitHub Pages?

För fredagsquiz-projektet aktiverades GitHub Pages sÄ hÀr:

  1. GÄ till ditt repository pÄ GitHub: https://github.com/kentlundgren/quiz
  2. Klicka pÄ Settings (InstÀllningar)
  3. Scrolla ner till Pages i vÀnstermenyn
  4. Under Source vÀlj:
    • Branch: main (eller master)
    • Folder: / (root) eller /docs
  5. Klicka pÄ Save
  6. Efter nÄgra minuter blir din webbplats tillgÀnglig pÄ:
    https://anvÀndarnamn.github.io/repository-namn/

✅ För detta projekt:

GitHub Pages URL: https://kentlundgren.github.io/quiz/

Huvudsajt URL: https://kentlundgren.se/program/quiz/0/

📂 Hur fungerar filstrukturen?

GitHub Pages letar efter dessa filer i prioritetsordning:

  1. index.html - Startsidan för webbplatsen
  2. README.md - Om ingen index.html finns, konverteras denna till HTML

För fredagsquiz-projektet betyder detta:

/quiz/ → https://kentlundgren.github.io/quiz/
/quiz/index.html → Startsida
/quiz/0/index.html → https://kentlundgren.github.io/quiz/0/
/quiz/1/index.html → https://kentlundgren.github.io/quiz/1/
/quiz/2/index.html → https://kentlundgren.github.io/quiz/2/
...och sÄ vidare

🔄 Redirect vs Dubbla versioner

📌 Nuvarande situation:

Just nu redirectar GitHub Pages (kentlundgren.github.io/quiz/) till huvudsajten (kentlundgren.se/program/quiz/0/). Detta sker troligen genom:

📊 Fördelar och nackdelar med redirect:

FÖRDELAR med redirect:

NACKDELAR med redirect:

🎯 Alternativa lösningar:

ALTERNATIV 1: BehÄll redirect (rekommenderat om huvudsajten Àr viktigast)

Om kentlundgren.se Àr din primÀra webbplats och du vill att alla besökare hamnar dÀr, Àr redirect bra!

LÀgg bara till en tydlig förklaring i GitHub README.md att den aktiva versionen finns pÄ kentlundgren.se

ALTERNATIV 2: Ta bort redirect och anvÀnd bÄda

LÄt GitHub Pages vara en "live demo" direkt frÄn kÀllkoden:

Detta Àr bra om du vill visa utvecklare hur projektet fungerar direkt frÄn Git!

ALTERNATIV 3: Skapa en special "GitHub-version"

Gör GitHub Pages-versionen till en "meta-sida" som:

⚙ Tekniska detaljer

📡 Deployment Process:

  1. Du gör Àndringar lokalt i dina filer
  2. Du commitar och pushar till GitHub: git push origin main
  3. GitHub Pages upptÀcker Àndringen automatiskt
  4. Efter ~1-5 minuter Àr Àndringarna live pÄ github.io-adressen

🌐 Custom Domain (om du vill):

Du kan koppla en egen domÀn till GitHub Pages:

  1. Skapa en fil som heter CNAME i repository root
  2. LÀgg till din domÀn i filen, t.ex.: quiz.kentlundgren.se
  3. Konfigurera DNS hos din domÀnleverantör att peka pÄ GitHub Pages

💡 Tips för Fredagsquiz-projektet:

Om du skapar en subdomÀn som quiz.kentlundgren.se som pekar pÄ GitHub Pages fÄr du:

🔍 Vanliga problem och lösningar

Problem: 404 pÄ lÀnkar

Orsak: Relativa sökvÀgar fungerar olika pÄ GitHub Pages vs lokal utveckling

Lösning: AnvÀnd alltid relativa sökvÀgar som börjar med ./ eller ../

Problem: Ändringar syns inte

Orsak: GitHub Pages cachar sidor i 10 minuter

Lösning: VÀnta 10 minuter, eller force-refresha webblÀsaren (Ctrl+F5)

Problem: CSS/JS laddas inte

Orsak: Absoluta sökvÀgar frÄn root fungerar inte alltid

Lösning: AnvÀnd relativa sökvÀgar eller konfigurera base i HTML

🔀 FörstĂ„ Git och GitHub

📘 Vill du lĂ€ra dig mer om Git och GitHub?

GitHub Pages Àr en del av GitHub, men vad Àr egentligen skillnaden mellan Git och GitHub?

LÀs vÄr pedagogiska guide: Git och GitHub - En pedagogisk guide

I guiden lÀr du dig:

Perfekt för: Nybörjare som vill förstÄ versionshantering och hur det kopplar ihop med GitHub Pages!

📚 Resurser

Skapad 2026-01-09 för Fredagsquiz-projektet

Del av Fredagsquiz - Kent Lundgren