Fra WordPress til GitHub

Websiden til «Far & Sønn Brygger Hjemme» har nå blitt flyttet over fra WordPress på egen server til statiske sider på GitHub. Hva måtte til for å få det i orden?

Først… så hva er GitHub?

For å forstå hva det er må vi forstå hva Git er. Git er et system for versjonskontroll som er laget på åpen kildekode og er startet av Linus Torvalds. Samme fyren som lagde Linux.

Men hva er så et versjonskontrollsystem? Når utviklere lager noe, f.eks. en applikasjon, så gjør de endringer på koden, gir ut nye versjoner, osv. For å ha kontroll på alle endringene lagres de i et sentralt system hvor utviklere kan se, endre og laste opp og ned.

GitHub er et sted på Internett som tilbyr nettopp et sentralt versjonskontrollsystem. Ikke bare for utviklere men også for andre. Det at de også tilbyr et sted til statiske nettsider, drar vi nytte av.

Fra ekstern server til lokal datamaskin

Nettsiden brukte WordPress til å vise informasjonen vi hadde lagt ut. Dataene lå lagret i en MySQL-database som WordPress leste fra og opprettet nettsidene dynamisk, dvs. nettsidene var ikke statiske. Løsningen var fin i seg selv, men man måtte passe på at man kjørte siste versjon av programvaren. Det oppdages hele tiden nye sikkerhetshull, og det er relativt ressurskrevende.

WordPress er godt egnet til å lage, redigere og publisere informasjon. For å slippe å måtte gjøre alt dette på et lavere nivå, ble en lokal installasjon av WordPress med NGINX som webserver, MariaDB som database og PHP som skriptspråk lagt inn på laptopen. At man kjører Linux gjør at det var relativt enkelt å få det på plass.

Det finnes mange gode utvidelser til WordPress. En utvidelse kalt «Duplicator» ble så brukt til å eksporter alle dataene fra den eksterne serveren og deretter importert inn på den lokale datamaskinen.

For å få eksportert dynamiske WordPress-sider til statiske HTML-sider, bruker vi en utvidelse kalt «WP Static HTML Output». Bruken av den vil bli vist mer senere.

GitHub-repository

Et sted hvor filene tilhørende et prosjekt ligger lagret på GitHub, kalles for et oppbevaringssted, eller repository på engelsk. Vi opprettet et slikt sted for «Far & Sønn Brygger Hjemme». På forhånd hadde vi opprettet en bruker slik at vi fikk tilgang til nettsidene.

Opprettet et prosjekt ved å klikk på «Start a project» på hovedsiden til GitHub.

Satte navnet på oppbevaringsstedet til «FSBH» (Forkortelse av Far & Sønn Brygger Hjemme), og la inn beskrivelsen «Far & Sønn Brygger Hjemme».

Lot det være åpen for alle, altså «Public«, og satte hake ved «Initialize this repository with a README«.

Klikket deretter på «Create repository«.

Da oppbevaringsstedet ble opprettet, opprettet vi en gren, eller branch på engelsk, som vi kalte for «gh-pages». Vi gjorde det fordi GitHub viser dataene under en slik gren som websider, ikke som bare filer.

Klikket på «Branch: master» og skrev inn navnet «gh-pages«. Klikket deretter på «Create branch: gh-pages«.

Vi ønsket kun å bruke den nye grenen. Klikket på «Settings«-fanen slik at innstillingene for dette prosjektet vises. Klikket deretter på «Branches» på venstre side.

Satte så «gh-pages» som «default branch».

Gikk tilbake ved å klikke «Code«-fanen. Ønsket så å fjerne hele «Master«-grenen da vi kun skal jobbe med «gh-pages«.

Klikket på linken som viste antall grener det finnes. I dette tilfellet stod det «2 branches«.

Klikket på søppelbøtte-ikonet til høyre for «master» for å fjerne denne grenen.

Alle offentlige oppvaringssteder har sin egen nettadresse, i dette tilfellet var det http://danlil.github.io/FSBH/. Vi ønsket å bruke vårt eget domene i tillegg.

Klikket på «Settings«-fanen. «Options» var allerede valgt på venstre side, slik at vi kun måtte scrolle ned til innstillingene til «GitHub Pages«.

Skrev inn vårt eget domene, lillegrend.no, i «Custom domain«-feltet, og klikket på «Save«-knappen.

Hvordan kommunisere med GitHub?

Bruker man en Windows- eller en MacOS-basert datamaskin, kan man laste ned GitHub Desktop. For Linux-baserte datamaskiner må man bruke noe annet. Vi gikk for Gitkraken.

Lastet ned installasjonsfilen for Ubuntu og la den inn. Da vi startet programmet logget vi inn med GitHub-brukeren vi hadde opprettet og godkjente at Gitkraken skulle kunne snakke med GitHub.

Klonet deretter oppbevaringsstedet på GitHub ned på lokal datamaskin. Opprettet en egen mappe, /home/dan/Repo, for dette.

Klikk på mappe-ikonet øverst til venstre. Klikket deretter på «Clone«-valget i dialogboksen og valgte «GitHub.com». Siden vi allerede var logget inn mot GitHub, var det bare å velge hvor oppbevaringstedet skulle lagres, hvilket oppbevaringssted som skulle klones og klikk på «Clone this repo!«.

Etter endt kloning til lokal datamaskin, så Gitkraken ut slik.

Tilbake i WordPress klikket vi på utvidelsen «WP Static HTML Output» under «Utvidelser». Kjørte utvidelsen og lastet deretter ned en ZIP-fil som inneholdt websiden i form av statiske HTML-filer.

Åpnet ZIP-fila og pakket ut alt innholdet til /home/danl/Repo/FSBH. Byttet deretter tilbake til Gitkraken og så at den hadde oppdaget at det var lagt til filer.

Klikket på filene som hadde blitt lagt til.

Siden alle filene skal importeres til GitHub, klikket vi på «Stage all changes«. Dette er for å godkjenne alle filene som ble lagt til, eller «endringer» som det kalles i Gitkraken.

For å kunne legge til alle filene må man legge inn en kommentar som beskriver hva slags endring man legger til. I dette tilfellet var kommentaren kun «Initial deployment». Klikket så på «Commit changes …«.

Etter at endringene var lagt til, så Gitkraken slik ut. Endringene måtte så dyttes opp til GitHub. Klikket på «Push«-knappen.

Oppbevaringsstedet på GitHub vil etter endt synkronisering vise filene som har blitt lastet opp.

Husk DNS!

Hvis det er ønskelig å bruke eget domene, må IP-adressen som domenet skal peke til, endres i DNS.

La derfor inn www.lillgrend.no som et CNAME som peker til lillegrend.no og lillegrend.no som peker til 192.30.252.153 og 192.30.252.154.