Modul 1

Kap 1.6 - Miniuppgift: publicera med GitHub Pages

Nu gör du profilsidan tillgänglig via en webbadress.

Mål

  • Skapa ett repository på GitHub.
  • Ladda upp webbplatsens filer.
  • Publicera sidan med GitHub Pages.

Filmgenomgång

Följ gärna filmen Hur man läger upp en webbplats på GitHub och publicerar den på internet. Filmen visar arbetsflödet visuellt.

Vad GitHub Pages gör

GitHub Pages kan publicera statiska webbsidor direkt från ett repository. Det passar för webbplatser som består av HTML, CSS, JavaScript, bilder och andra vanliga filer.

GitHub Pages kör däremot inte egen serverkod som PHP, Python eller databaser. I den här kursen räcker det bra, eftersom profilsidan är en statisk webbplats.

Innan du publicerar

  • Din startsida ska heta index.html.
  • Alla bilder och andra filer som sidan använder måste följa med.
  • Filvägarna måste fungera lokalt innan du laddar upp.
  • Sökvägar till CSS, JavaScript och bilder måste stämma även efter publicering.
  • Filnamn måste matcha exakt. Logo.png och logo.png kan räknas som olika filer på en publicerad webbplats.
  • HTML-koden bör vara validerad.

Enkelt sätt: dra in filerna

I början är det oftast enklast att ladda upp filerna direkt i GitHubs webbgränssnitt genom att dra in dem.

  1. Gå till github.com och logga in.
  2. Klicka på New repository.
  3. Ge projektet ett namn, till exempel profil-sida.
  4. Skapa repositoryt.
  5. Klicka på Add file och sedan Upload files.
  6. Dra in index.html, styles.css och eventuella mappar, till exempel images.
  7. Klicka på Commit changes.

Aktivera GitHub Pages

  1. Öppna fliken Settings i repositoryt.
  2. Gå till Pages.
  3. Välj grenen main.
  4. Välj mappen / (root).
  5. Spara.
  6. Vänta någon minut och öppna länken som GitHub visar.

Kontrollera publiceringen

  • Öppna den publicerade länken i webbläsaren.
  • Kontrollera att text, bild och länk fungerar.
  • Om bilden saknas: kontrollera att bildmappen följde med och att filnamnet stämmer exakt.
  • Om designen saknas: kontrollera sökvägen till din CSS-fil.
  • Om interaktioner inte fungerar: kontrollera sökvägen till din JavaScript-fil.
  • Om sidan inte öppnas: kontrollera att filen heter index.html.

Exit ticket

Lämna in länken till din publicerade sida och skriv kort vad du behövde rätta efter publiceringen.