Hur du pushar ändringar till din hemsida som ett proffs med Git

Vill du snabbt och enkelt kunna publicera uppdateringar på din hemsida med Git? Då behöver du sätta upp ett Bare Git Repository. I den här guiden får du lära dig hur du gör – steg för steg.

Kom igång

Om du vill ha en snabbguide kan du gå direkt till sammanfattningen. I annat fall kan du läsa vidare så tar vi det ett steg i taget.

För att kunna följa med i denna guide behöver du

• ha tillgång till en webbserver
• kunna SSH:a in på webbservern
• ha Git installerat på webbservern
• ha grundläggande kunskaper om Git
• ha grundläggande kunskaper om att jobba i terminalen.

En notis om webbservern

Om du har din server på ett webbhotell så kan du vanligtvis inte installera egna saker via terminalen. Istället kommer Git förhoppningsvis redan vara installerat.

För att verifiera att Git är installerat kan du köra kommandot git --version på servern.

Om du får en output som säger något i stil med git version 2.17.1 så har du Git installerat. I annat fall har du inte Git installerat. Prata då med supporten för ditt webbhotell och se om det går att lösa.

Nu hoppar vi in i guiden.

Steg 1: Skapa ett bare repository

Grunden i att kunna pusha ändringar till din hemsida är att skapa ett s.k. bare repository, så det ska vi göra nu.

Låt oss börja på servern.

Steg 1.1: Skapa en mapp för ditt bare repository

Vi kommer skapa en mapp på servern som huserar ditt bare repository och i den nya mappen kommer vi sedan skapa en till mapp som kommer vara själva repot.

Notera att vi i denna guide bara kommer skapa ett bare repository men om du i framtiden vill skapa flera så har du redan ett hem åt de.

För att göra det enkelt kommer vi skapa mapparna i din hemmapp på servern. Kör följande kommando för att skapa mapparna:

mkdir -p ~/repos/project.git

project.git är namnet på ditt bare repository. Du kan byta ut det till något namn som passar dig bättre – exempelvis namnet på din hemsida.

Bra att veta: Det kanske ser ut som att project.git är en fil men det är faktiskt en mapp. Att använda .git i slutet för bare repositories är en standard men inget måste. Jag skulle dock rekommendera dig att följa standarden.

Steg 1.2: Initiera ditt bare git repository

Hittills har vi bara skapat en mapp för ditt blivande bare repository och för att det ska bli ett bare repository på riktigt så måste vi initiera Git i mappen.

Du initierar Git med följande kommando:

git init --bare ~/repos/project.git

Om allt gick bra, kommer du se ett meddelande i terminalen som ser ut ungefär så här:

Initialized empty Git repository in ~/repos/project.git

Nu har du skapat ett bare repository 👏🏻.

Nyckelkommandot här är alltså git init --bare i den mapp som du vill göra till ett bare repository – precis på samma sätt som du skapar ett vanligt Git-repo, fast med ett lite annorlunda kommando.

För att ditt bare repository ska bli användbart behöver vi göra några fler steg. Låt oss kika på det.

Steg 2: Lägg till en remote URL i ditt lokala Git repo

Nu hoppar vi från servern till din dator.

När du kör git push från ditt lokala Git repo så vill vi att ändringarna ska skickas till servern, och för att Git ska veta vart ändringarna ska skickas behöver vi lägga till en s.k. remote URL i konfigurationen.

Om du inte har lagt till en remote URL och försöker pusha skulle du få ett felmeddelande som säger något i stil med No upstream url – så låt oss fixa det.

Steg 2.1: Sätt remote URL för ett befintligt repot

För att lägga till en remote URL i ett befintligt repo kan du köra följande kommando i ditt lokala git repo.

git remote add origin ssh://username@server_address/repos/project.git

• username är ditt användarnamn på servern som du använder för att SSH:a in.
• server_address är antingen IP-adressen eller domännamnet till din server (också samma som du använder när du SSH:ar in på servern).
• /repos/project.git är sökvägen till ditt bare repository som du skapade i steg 1.2.

Steg 2.2: Sätt remote URL för ett nytt repo

Om du inte har ett lokalt Git repo sedan tidigare kan du istället klona ner repot från servern med följande kommando:

git clone username@server_address:repos/project.git

Det du klonar är alltså ditt bare repository som du skapade i steg 1.2.

När du klonar ett repo behöver du inte tänka på att sätta en remote URL i konfigurationen eftersom Git redan har fixat detta åt dig – förutsatt att du inte vill pusha till någon annan servern än den du klonade ifrån. I detta fall vill vi pusha till samma server.

Steg 2.3: Pusha till servern

Nu när du har en remote URL i ditt lokala repo kan du pusha upp din kod till servern med det vanliga push-kommandot:

git push

Om du får ett felmeddelande som ser ut typ så här

fatal: The current branch main has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin main

så kan du testa att pusha igen med det föreslagna kommandon. I detta exempel är det

git push --set-upstream origin main

När du har lyckats pusha upp din kod så kommer det inte hända så mycket – men vi ska fixa det i nästa steg.

Steg 3: Publicera hemsidan på servern

Hittills har vi skapat ett bare repository och lagt till en remote URL i vårt lokala git repo.

När du pushar ändringar till servern kommer ändringarna just nu bara lagras i ditt bare repository men inget kommer att synas på hemsidan.

För att ändringarna ska synas behöver vi klona ditt bare repository till en mapp på servern där hemsidan ska bo, i en s.k. rotkatalog.

Låt oss hoppa tillbaka till servern igen så kikar vi på det.

Steg 3.1: Hitta hemsidans rotkatalog

Rotkatalogen (även kallad den publika mappen) är den mapp på servern där du lägger koden för hemsidan. Sökvägen till rotkatalogen varierar beroende på hur din server är konfigurerad.

• Om du har en linuxserver brukar rotkatalogen som standard vara /var/www/html.
• Om du använder ett webbhotell brukar rotkatalogen ligga i en mapp med samma namn som ditt domännamn, exempelvis ~/dindoman.se/public_html. Du kan alltid fråga ditt webbhotell om du är osäker på var rotkatalogen ligger.

För enkelhetens skull kommer jag använda ~/dindoman.se/public_html som exempel.

Steg 3.2: Spara en kopia av befintlig rotkatalog

Innan vi börjar mecka med din rotkatalog, vill vi säkerställa att vi kan återgå till hur det såg ut innan ifall vi skulle sabba något. Enklast är att byta namn på den befintliga mappen och inte jobba med den alls.

Du byter namn på mappen med följande kommando:

mv ~/dindoman.se/public_html ~/dindoman.se/public_html_old

OBS: När du byter namn på rotkatalogen som ovan så kommer din hemsidan sluta fungera – men det är lugnt, vi kommer fixa det i nästa steg.

Steg 3.3: Klona projektet till rotkatalogen

Nu ska vi klona ner projektet från ditt bare repository. I samma kommando kommer vi även namnge den nya mappen som skapas.

Du klonar projektet och namnger mappen med följande kommando:

git clone ~/repos/project.git ~/dindoman.se/public_html

Om du får ett felmeddelande så kan du läsa vidare för att få hjälp att lösa problemet. Annars kan du hoppa direkt till steg 3.5.

Steg 3.4: Gick något fel när du klonade projektet?

Om du har döpt din huvudbranch – i ditt lokala Git repo – till något annat än master, så kommer du troligtvis få ett felmeddelande som säger något i stil med; warning: remote HEAD refers to nonexistent ref, unable to checkout.

Detta beror på att Git försöker checka ut ett branch som inte finns. Som tur är, är detta enkelt att fixa.

1. Se till att du är på servern och kör följande kommando för att öppna HEAD-filen i ditt bare repository:

   nano ~/repos/project.git/HEAD
   

2. I filen kommer du se något i stil med ref: refs/heads/master.

   För att fixa problemet behöver du ändra master till namnet på din huvudbranch. Jag brukar kalla min huvudbranch för main, så i mitt fall skulle jag behöva ändra till följande:

   ref: refs/heads/main
   

3. När du har gjort ändringen är det bara att spara filen. (Med nano sparar du filen genom att trycka CTRL + x, y och sedan enter.)

4. Testa att klona projektet igen.

Steg 3.5: Kontrollera att hemsidan fungerar

Om allt fungerade korrekt när du klonade repot så borde nu din hemsida vara uppdaterad. Gå till din domän i en webbläsare och kolla.

Fungerar det? – Grattis 🥳.

Som det ser ut nu på, så kommer du behöva logga in på servern och manuellt köra git pull i din rotkatalog varje gång du pushar ändringar från ditt lokala repo.

I längden kan detta bli ganska drygt och därför kan vi skapa en Git hook som automatiserar denna process – det är dock valfritt.

Om du känner dig nöjd så kan du hoppa direkt till det avslutande kapitlet med en vänlig varning. I annat fall kan du läsa vidare så får du lära dig hur du skapar en hook.

Steg 4: Skapa en Git Hook

Om du vill att dina ändringar automatiskt ska dyka upp på hemsidan när du kör git push, så behöver du skapa en s.k. Git hook.

Vad är en Git hook? – En Git hook är ett litet script som kan köras vid olika tillfällen när det händer saker med ditt bare repository.

Det finns olika hooks för olika typer av event. Den hook vi ska kika på heter post-receive och körs efter att ditt bare repository tar emot en uppdatering, d.v.s. när du har kört git push från ditt lokala repo.

Bra att veta: I ditt bare repository skapas det automatiskt en mapp som heter hooks. I den mappen finns fler exempelfiler som slutar på .sample. Du kan kika på dessa om du vill. Filerna kommer dock aldrig att köras av Git, utan finns bara där som just exempel.

Vi hoppar till server så ska vi kika på hur du skapar din Git Hook.

Steg 4.1: Skapa filen post-receive

Börja med att skapa en ny fil som heter post-receive, med följande kommando:

nano ~/repos/project.git/hooks/post-receive

Notera att vi inte lägger till någon filändelse på filen. Den ska rätt och slätt heta post-receive.

Kopiera följande kodsnutt och lägg in den i filen:

#!/bin/sh

WEBSITE_DIR="~/dindoman.se/public_html/"
GIT_DIR="~/repos/project.git"
BRANCH="master"

git --work-tree=$WEBSITE_DIR --git-dir=$GIT_DIR checkout -f $BRANCH

Kom ihåg att sätta WEBSITE_DIR och GIT_DIR till dina egna sökvägar.

Om du har döpt din huvudbranch till något annat än master så behöver du ange det i variabeln BRANCH.

Spara nu filen. (Med nano kör du CTRL + x, y och sedan enter).

Steg 4.2: Gör filen exekverbar

Det sista steget för vår hook är att göra filen exekverbar. Detta innebär kort och gott att Git måste kunna köra filen för att utföra de instruktioner som står där.

För att göra filen exekverbar kör du följande kommando:

chmod +x ~/repos/project.git/hooks/post-receive

chmod står för “change mode” och talar om att du vill ändra filrättigheter. +x betyder att du lägger till exekveringsrättigheter på filen.

Steg 4.3: Pusha

Testa nu att pusha upp en ändring från ditt lokala git repo. När du gör det så kommer ändringarna publiceras på din hemsidan automatiskt.

Bra jobbat. Nu är du klar!

En vänlig varning: Exponera aldrig .git

Innan jag avslutar vill jag lämna dig med en varning.

Exponera aldrig din .git-mapp publikt.

Din .git-mapp innehåller all historik om ditt projekt. Om en illasinnad person får tag på den så kan hen också få tag på hela din källkod samt eventuell känslig data som du har checkat in – exempelvis API-nycklar, tokens och andra hemligheter.

Nu ska du förvisso aldrig checka in känsliga uppgifter i Git, men oavsett om du har gjort det eller inte så är det en dålig praxis att exponera sin .git-mapp publikt.

Vad menas med att exponera sin .git-mapp publikt? – Det innebär att mappen går att nå via dindoman.se/.git och det möjliggörs med din filstruktur.

Här är ett exempel på en filstruktur där .git-mappen ligger innuti den publika mappen och därmed blir exponerad:

~/dindoman.se/
├─ public_html/
│  ├─ .git/
│  ├─ .gitignore
│  ├─ config.txt
│  ├─ index.html

En praxis som jag följer är att istället lägga alla kritiska filer utanför den publika mappen, d.v.s. utanför den mapp som vanligtvis heter public_html, public, eller html (kärt barn har många namn).

Här är ett exempel på en filstruktur där .git-mappen och andra känsliga filer ligger utanför den publika mappen:

~/dindoman.se/
├─ .git/
├─ .gitignore
├─ config.txt
├─ public_html/
│  ├─ index.html

Om du inte har möjlighet att lägga din .git-mapp utanför den publika mappen så kan du med hjälp av din serverkonfiguration låta returnera 404 för .git-mappen. Exakt hur du gör detta beror på vilken webbserver du använder så vi kommer inte gå in på det här.

Jag uppmuntrar dig att söka vidare på detta. Det finns massor av information ute på vilda webben 🤓.

Sammanfattning

Här är en snabb sammanfattning av de steg vi har gått igenom:

1. Skapa ett bare repository.

   mkdir -p ~/repos/project.git
   git init --bare ~/repos/project.git
   

2. Lägg till en remote URL i ditt lokala git-repo.

   git remote add origin ssh://usernamne@server_address:repos/project.git
   

3. Pusha till servern från ditt lokala Git-repo och kontrollera att du inte får några felmeddelanden.

4. Publicera hemsidan på servern genom att klona ner repot i den mapp på servern där hemsidan ska bo.

   git clone ~/repos/project.git ~/dindoman.se/public_html
   

   Om du får ett felmeddelande kan du kika i hjälpsektionen.

5. Skapa en git hook (valfritt):

   Lägg in följande i filen ~/repos/project.git/hooks/post-receive:

   #!/bin/sh
   
   WEBSITE_DIR="~/dindoman.se/public_html"
   GIT_DIR="~/repos/project.git"
   BRANCH="master"
   
   git --work-tree=$WEBSITE_DIR --git-dir=$GIT_DIR checkout -f $BRANCH
   

   Gör filen exekverbar:

   chmod +x ~/repos/project.git/hooks/post-receive
   

Lycka till!