Publicera på webben

Att spara är inte att publicera

Git och GitHub är verktyg som används av i princip alla utvecklare. De löser två olika problem:

Git är ett versionshanteringssystem som körs lokalt på din dator. Det sparar hela historiken av ditt projekt som en serie snapshots, du kan alltid gå tillbaka till en tidigare version.
GitHub är en molnplattform där din kod lever online. Det är också här vi aktiverar GitHub Pages, tjänsten som gör din kod till en levande webbsida.

Vi arbetar med Git direkt i VS Code, via Source Control-panelen.

Snapshots, inte “spara som”

Den vanliga “Spara”-knappen skriver bara över den gamla filen, du kan aldrig gå tillbaka. Git fungerar annorlunda: varje gång du gör en commit är det som att ta ett foto av hela projektet. Fotot sparas med ett meddelande du skriver. Rotar du till något kan du alltid gå tillbaka till ett äldre foto.

GitHub är inte samma som GitHub Pages

Det är lätt att blanda ihop dem:

	Vad det är	Vad det gör
GitHub-repo	En förvaringslåda för din kod	Lagrar historik, möjliggör samarbete
GitHub Pages	En webbserver som GitHub erbjuder	Gör din kod tillgänglig som en live-länk

Att ladda upp kod till GitHub är inte samma sak som att publicera en webbsida. Pages är en separat tjänst som måste aktiveras, mer om det nedan.

Förberedelser

Tre saker behöver vara på plats innan du kan publicera.

GitHub-konto

Allt börjar med ett konto på github.com, det är gratis. Registrera dig med en e-postadress du har tillgång till, du behöver verifiera den.

Git installerat?

Öppna Source Control-panelen i VS Code (Ctrl+Shift+G, samma kortkommando på Mac). Om du ser meddelandet “Git not found”, installera Git från git-scm.com och starta om VS Code.

Konfigurera namn och e-post

Git kräver att du identifierar dig innan du kan committa. Öppna terminalen i VS Code (Ctrl+Ö på svenskt tangentbord, även på Mac är det Ctrl) och kör dessa två kommandon:

git config --global user.name "Ditt Namn"
git config --global user.email "din@epost.se"

Använd samma e-postadress som du registrerade GitHub-kontot med. Det här behöver du bara göra en gång per dator.

Från lokal mapp till repo på GitHub

Nu ska din projektmapp bli ett repo och hamna på GitHub. Hela flödet sker i Source Control-panelen (Ctrl+Shift+G):

Initialize Repository. Klicka på knappen. Git börjar bevaka mappen du har öppen i VS Code. Det här gör du en gång per projekt.
Stagea dina filer. Under “Changes” listas alla filer som ändrats. Klicka på + bredvid rubriken för att ta med allt i nästa snapshot.
Commit. Skriv ett kort meddelande i textfältet (till exempel Initial commit) och klicka Commit. Snapshoten är nu sparad, men bara lokalt på din dator.
Publish Branch. Klicka på knappen. Första gången öppnas webbläsaren och du loggar in på ditt GitHub-konto. Välj sedan ett namn på repot och Public (GitHub Pages kräver ett publikt repo på gratiskontot). VS Code skapar repot på GitHub åt dig och skickar upp din kod, du behöver inte skapa något manuellt på github.com.

Kontrollera att det fungerade: gå till github.com, öppna din profil och klicka på Repositories. Där ska ditt nya repo ligga, med dina filer i.

Efter första publiceringen ersätts Publish Branch av Sync. Arbetsflödet framåt är alltid detsamma: ändra filer, stagea, committa, synka.

Aktivera GitHub Pages

Koden är uppe på GitHub, men repot är fortfarande bara en förvaringslåda. Sista steget är att slå på Pages-tjänsten:

Gå till ditt repo på github.com.
Klicka på fliken Settings, välj Pages i vänstermenyn.
Under Build and deployment: välj Deploy from a branch, sätt branchen till main och klicka Save.
Vänta 1-2 minuter. Ladda om sidan, en grön ruta med din live-länk dyker upp.

Hur en URL hittar din sida

Sidan är live. Men vad händer egentligen när någon skriver in din länk? Följande sker på millisekunder:

DNS: Domännamnet (dittnamn.github.io) slås upp och översätts till en IP-adress, adressen till servern där dina filer ligger.
Request: Webbläsaren skickar en förfrågan till den servern.
Response: Servern skickar tillbaka dina filer (HTML, CSS).
Rendering: Webbläsaren bygger ihop koden till det du ser på skärmen.

Uppgift: Ta din sida live

Startfiler

Skapa en ny mapp (t.ex. min-sida) och lägg in dessa två filer:

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Min sida</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <main class="container">
            <h1>Hej världen</h1>
            <p>Min första publicerade sida.</p>
        </main>
    </body>
</html>

.container {
    max-width: 800px;
    margin-inline: auto;
    padding: 2rem;
    font-family: sans-serif;
}

Publicera

Öppna mappen i VS Code.
Kontrollera att git config är gjort (se Förberedelser ovan).
Öppna Source Control-panelen (Ctrl+Shift+G).
Klicka Initialize Repository.
Klicka + bredvid “Changes” för att stagea alla filer.
Skriv Initial commit i textfältet, klicka Commit.
Klicka Publish Branch, välj Public, välj ett namn, bekräfta.
Gå till ditt repo på github.com, Settings -> Pages -> Deploy from branch -> main -> Save.
Vänta 1-2 minuter och öppna din live-länk. Ser du “Hej världen”?

Vad händer om…

Ändra texten i <h1>. Gör en ny commit med meddelandet update heading, klicka Sync (pushar till GitHub). Gör en Hard Refresh på live-länken. Syns ändringen?

Motivera & reflektera

Skapa en README.md i ditt repo och skriv tre meningar: vad projektet är, vilken din live-länk är, och en sak som strulade under publiceringen och hur du löste det. Från och med nu är README din projektdagbok, den följer med i varje repo du bygger.