Guide · Webbutveckling område 1

Kom igång med GitHub och VS Code

Din uppslagsbok för allt som har med inlämningar att göra. Slå upp här när något krånglar i stället för att gissa. Guiden fungerar utan att du varit på lektionen.

1. Orden du behöver

2. Skapa ditt repo från mallen

Varje uppgift börjar med en länk till ett mallrepo i itslearning.

1. Logga in på GitHub. Använd samma konto varje gång.
2. Öppna mallrepot från länken i itslearning.
3. Klicka Use this template → Create a new repository.
4. Namnge repot. Använd uppgiftens namn, gemener och bindestreck: sa-fungerar-webben.
5. Välj Public.
6. Klicka Create repository.

Nu har du en egen kopia av mallen under ditt eget användarnamn. Adressen ser ut så här:

https://github.com/dittanvandarnamn/sa-fungerar-webben

Har du inget GitHub-konto? Skapa ett på github.com först. Välj ett användarnamn du kan tänka dig att visa upp – det syns i adressen till allt du publicerar.

3. Öppna repot i VS Code

Du arbetar i VS Code på din egen dator, inte i webbläsaren. Filerna ligger i en mapp du själv väljer, och du behöver hitta tillbaka till den varje pass.

1. Gå till ditt repo på github.com.
2. Klicka på den gröna knappen Code och kopiera HTTPS-adressen.
3. Öppna VS Code.
4. Tryck Ctrl+Shift+P och skriv Clone. Välj Git: Clone.
5. Klistra in adressen och tryck enter.
6. Välj en mapp du hittar tillbaka till. Lägg den inte i Hämtade filer.
7. Logga in på GitHub när VS Code frågar. Det gör du en gång.
8. Klicka Open när VS Code frågar om du vill öppna det klonade repot.

Förhandsvisa din sida

Du behöver se sidan i en webbläsare medan du arbetar. Vi använder Live Server.

1. Klicka på tilläggsikonen i VS Codes vänstermarginal.
2. Sök på Live Server, välj tillägget av Ritwick Dey och klicka Install.
3. Högerklicka i index.html och välj Open with Live Server. Du kan också klicka Go Live längst ner till höger i VS Code.

Sidan öppnas i din vanliga webbläsare och laddas om av sig själv varje gång du sparar. Adressen ser ut så här:

http://127.0.0.1:5500/index.html

Stänga av: klicka Port: 5500 längst ner i VS Code.

Webbläsarens egna verktyg

Utöver Live Server behöver du inga fler tillägg. Resten sitter redan i webbläsaren:

Nätverksfliken går vi igenom på lektionen om protokoll och adresser. Den beskrivs också i guiden Så växte webben fram.

4. Spara arbete: commit och sync

Det här är det enda i guiden du måste kunna utantill.

1. Spara filen med Ctrl+S. Det räcker inte, men utan det syns ingenting.
2. Klicka på källkontroll i vänstermarginalen – ikonen med tre punkter och streck. Siffran visar hur många filer du ändrat.
3. Skriv ett meddelande i rutan högst upp. Beskriv vad du gjort, inte att du gjort något: Lade till avsnittet om DNS, inte ändringar.
4. Klicka Commit.
5. Klicka Sync Changes (kan heta Push).

Ladda sedan om ditt repo på github.com. Ser du din ändring där är den sparad på riktigt.

Det som inte syns på github.com finns bara på din dator. Läraren tittar på github.com, inte i mappen hos dig.

Hur ofta ska du committa?

Varje gång du blir klar med något som fungerar. En bra tumregel är tre till fem commits per lektion. Många små commits är bättre än en stor, av två skäl: du kan gå tillbaka till en punkt där det fungerade, och din commit-historik visar att du arbetat löpande – det ingår i bedömningen av slutprojektet.

5. Lämna in: länken i itslearning

Att synka räcker inte för att uppgiften ska vara inlämnad. Läraren har ingen lista över era repon – ni skapar dem själva under era egna konton.

https://github.com/dittanvandarnamn/sa-fungerar-webben

Det gör du en gång per uppgift, så snart repot finns. Sedan fortsätter du arbeta och synka som vanligt – läraren följer samma länk och ser dina senaste ändringar. Du behöver inte lämna in igen varje gång du ändrat något.

Har du också publicerat med GitHub Pages: lämna båda adresserna, repot och den publicerade sidan.

6. Publicera med GitHub Pages

1. Gå till ditt repo på github.com.
2. Klicka Settings överst.
3. Välj Pages i vänstermenyn.
4. Under Source, välj Deploy from a branch.
5. Välj grenen main och mappen / (root). Klicka Save.
6. Vänta en till två minuter. Ladda om sidan – adressen visas överst.

Adressen ser ut så här:

https://dittanvandarnamn.github.io/repots-namn/

Publiceringen sker om automatiskt varje gång du synkar. Det tar upp till en minut, så en ändring syns inte direkt.

Krav för att det ska fungera

• Repot måste vara Public.
• Startsidan måste heta index.html och ligga i repots rot.
• Sökvägar måste vara relativa: bilder/logga.png, inte /bilder/logga.png och inte C:\Users\....
• Filnamn måste stämma exakt, inklusive stora och små bokstäver.

Den sista punkten är den vanligaste orsaken till att en bild försvinner vid publicering. Din egen dator bryr sig inte om skillnaden mellan Logga.png och logga.png. Servern gör det.

7. Arbeta över flera pass

Ditt arbete ligger i en mapp på din dator. Bara det du synkat finns på github.com.

Så här återupptar du:

1. Öppna VS Code.
2. File → Open Recent och välj mappen. Eller File → Open Folder och leta upp den.
3. Klona inte igen. Klonar du en gång till får du två mappar och tappar bort vilken som är den riktiga.

Byter du dator – lånedator, hemmadator, ny skoldator – klonar du repot på nytt där enligt avsnitt 3. Allt du synkat följer med. Det du inte synkat gör det inte. Det är därför sista-fem-minuterna-regeln finns.

8. Ta det längre

Det här behöver du inte, men det gör arbetet smidigare.

Läs din historik. På github.com, klicka på commits ovanför fillistan. Du ser varje sparpunkt, vem som gjorde den och exakt vilka rader som ändrades. Klicka på en commit för att se skillnaden rad för rad.

Ångra till en tidigare version. Har du förstört en fil kan du hämta tillbaka den gamla: öppna filen på github.com, klicka History, välj en tidigare version och kopiera innehållet.

Arbeta i terminalen. Allt i källkontrollpanelen går att göra med kommandon. Öppna terminalen i VS Code med Ctrl+ö:

git status                     # vad har ändrats?
git add .                      # ta med alla ändringar
git commit -m "Lade till DNS-avsnittet"
git push                       # skicka till github.com

Du behöver inte kunna det här i kursen, men i slutprojektet går det fortare.

En .gitignore talar om vilka filer som inte ska följa med. Skräpfiler som .DS_Store och Thumbs.db hör inte hemma i ett repo.

9. Felsökning

10. Snabbreferens

Vägen från idé till publicerad sida

mallen  →  ditt repo  →  klona till VS Code  →  skriv kod
                                                   ↓
       publicerad sida  ←  GitHub Pages  ←  commit + sync
                                                   ↓
                                      länken i itslearning

Knappar och var de finns

Kommandon i terminalen

Kursens filkonventioner