¶ Starta blogg med Gitlab Pages
I den här guiden ska du få lära dig att starta en gratisblogg på Gitlab Pages och med "Static Site Generatorn" (SSG) Hugo.
Resultatet kan du se här: https://annabloggar.gitlab.io.
¶ Målgrupp
Den här guiden är något teknisk så om man "bara vill dra igång en blogg" och inte är speciellt teknisk så är det nog bra att få hjälp av någon som pysslar med programmering eller nåt. Men när man väl fått den på plats är det inte så svårt. Det är inte lika enkelt som Wordpress men ändå rätt bra.
Om man är programmerare och har använt git så är det här guiden nog enkel.
¶ Varför Static Site Generators (SSG)
När man surfar in på en hemsida på internet så hämtar webbläsaren hem html-filer, css, javascript och bilder. I internets barndom var alla sidor så. Men i och med utvecklingen så utvecklades sidorna så att de kunde göra en massa grejer: de hade formulär, möjlighet att söka på grejer, skapa konto och kommentera och en massa spännande saker som vi är glada att ha. Men för en vanlig hemsida med statiskt innehåll så behöver många sidor inte kunna göra allt det.
De flesta bloggarna och hemsidorna på Internet nu för tiden består av en webbserver med en webbbackend (t.ex. i PHP, Python, Java eller C#/.NET), en databas och designfiler. Wordpress, Drupal och Joomla är några exempel på sådana sidor. För varje gång man surfar in på en sådan sida så genereras html-koden även om personen bakom bloggen inte ändrat på sidan. Det kan ju tyckas vara lite onödigt eftersom ingenting ändras.
Fördelen med att ha en hemsida som Wordpress som genererar html-koden varje gång är om jag t.ex. vill ändra bakgrundsfärgen till blå, ändra typsnitt eller lägga till något i menyn så behöver jag bara ändra på ett ställe. I internets början var man tvungen att ändra på alla html-filer manuellt. Väldigt störigt.
Men då kanske någon tänker: men är det inte bättre att spara undan html-koden när man har kör direkt efter man har ändrat i filerna? Det är väl dumt att genererar html-koden varje gång någon besöker hemsidan? Och svaret på det är: exakt! Och det är det som "Static Site Generators" (SSG) drar nytta av.
Det finns några fördelar med SSG:s:
- De är snabbare för man behöver inte vänta på att html-koden ska genereras
- Man slipper ha en webbserver med en webbbackend, det räcker att kunna servera html-filer (och bilder och sånt också)
- De är säkrare för man har färre attackytor
- Man skriver blogginlägg med Markdown-filer vilket är väldigt snabbt och smidigt
Det finns dock några nackdelar:
- Eftersom det inte finns någon webbackend kan man inte ha t.ex. formulär på hemsidan eller kommentarer. (Man kan dock lösa en del med tredjepartslösningar)
- Eftersom det inte finns någon webbackend finns det inte heller något admin-webbgränssnitt (som det finns med t.ex. Wordpress) som gör det enkelt att peka och klicka så man behöver lösa skapandet av sidor på ett annat sätt
¶ Gitlab, Github, Codeberg
Gitlab är ett ställe där man kan spara sin källkod och köra en massa automatiska grejer när man trycker upp ändringar i sin källkod. De har också en bra Web IDE så att man kan ändra koden direkt i webbläsaren. Gitlab har också Gitlab Pages, dvs de erbjuder gratis webbserver för statiska html-filer. Och man kan koppla sin egen domän till. Det är vad vi har gjort med https://konstellationen.org.
Jag valde Gitlab för den här guiden eftersom det finns som öppen källkod och eftersom de har bra stöd för CI så att saker körs automatiskt. Github är stängd källkod så det skippar jag. Codeberg har ännu inte inbyggt med CI. Det finns Woodpecker CI men det är inte inbyggt på samma sätt. Men någon annan får gärna skriva en guide om hur man kommer igång med det.
¶ Bloggen annabloggar.gitlab.io
Jag har skapat bloggen https://annabloggar.gitlab.io som är en blogg för den fiktiva politikern Anna Andersson. Den är skapad med mitt privata konto https://gitlab.com/samuelskanberg.
Källkoden för hemsidan finns här: https://gitlab.com/annabloggar/annabloggar.gitlab.io
¶ Skapa användare, grupp, repo för gruppen
Först och främst måste man starta en användare på Gitlab. Jag använde min privata. Men jag behövde skapa en grupp och ett repo med ett visst namn för att få url:en https://gitlab.com/annabloggar/annabloggar.gitlab.io
Här kan man läsa om url:er kopplade till användarnamn, grupper och projekt genereras av Gitlab.
Jag ville alltså ha url:en https://gitlab.com/annabloggar/annabloggar.gitlab.io. För det behövde jag:
- Skapa en grupp som heter
annabloggar(eller Annabloggar, allt blir till gemener ändå). - Skapa ett repo i gruppen
annabloggarmen namnetannabloggar.gitlab.io
¶ Hugo
Hugo är en av många "Static Site Generators" (SSG). Jag tog den eftersom det är den är mest populär enligt Jamstack. Den har också väldigt många färdiga teman så att man enkelt kan byta tema om man vill.
Jag följde sedan guiden quick start för att komma igång med Hugo. (Jag hade strul med att installera Hugo lokalt på min Ubuntu-maskin med den inbyggda pakethanteraren så jag fick följa Hugos guide som går ut på att installera med snap).
Därefter följde jag Gitlabs guide för att fixa byggsteget på Gitlab med hjälp av filen .gitlab.ci.yml.
Jag lade också till filen content/om.md där det står om "Anna Andersson" (en vanlig sida) och sen ett blogginlägg under content/posts/utslapp-bilar.md där jag skrev ett kort påhittat blogginlägg.
När man sedan gör ändringar lokalt i sitt repo och pushar till remote så ska det kickas igång ett bygge. Det syns under Build -> Pipelines.
Sen får man gå till Deploy -> Pages för att se att sidan dyker upp:
Det är för övrigt under Deploy -> Pages som man gör inställningarna om man vill lägga på sin egen domän och inte använda gratisdomännamnet annabloggar.gitlab.io.
Så nu när jag klickar på https://annabloggar.gitlab.io så ser jag sidan:
Sådär! Så enkelt var det att skapa en ny gratisblogg. Nästa steg blir:
- Skapa blogginlägg med Gitlab Pages och Web IDE
- Köpa ett domännamn (eller skapa en subdomän under Kamratdataföreningen Konstellationens domän fritext.org)