Visa taggarTillbaka till Bloggen

Ny hemsida

Av Marcus Kullman, publicerat 2020/11/12

Gatsby & Netlify CMS

Den första versionen av marcuskullman.com byggde jag i React (create-react-app) för några år sedan, men under början av 2020 efter att ha bekantat mig med ramverket Gatsby, byggde jag helt om den (huvudsakligen på grund av SEO-fördelarna gentemot en one-page app).

Nu i november tog jag det ett steg längre, genom att lägga till CMS-systemet Netlify. Detta för att enkelt kunna publicera inlägg likt detta—som är mitt allra första inlägg. Min ambition var helt enkelt att sänka tröskeln för innehållspublicering, för att framöver kunna lägga vikten på skapandet av själva innehållet istället. Att börja skriva mer, eller framförallt att det är lättillgängligt när jag så känner för det. Jag har mer och mer börjat inse hur mycket det gynnar mig att formulera mina tankar med mer omtanke och hur idéer genast formaliseras av att de görs publika. Jag ville använda min egen webbplats för detta av den enkla anledningen att jag då själv äger innehållet, något som inte alltid är helt självklart, beroende på vilken plattform som används.

Ytterligare en sak som jag har löst i samband med uppdateringen är att om jag nu push:ar en ny version av hemsidan till GitHub (via Git i Visual Studio Code), så triggas automatiskt ett bygge och en release. Så även kodförändringar är numer en smal sak att få ut. Utöver detta har jag implementerat Disqus, interaktionspanelen här nedan som ligger i anknytning till varje enskilt inlägg, jag har gjort några mindre designjusteringar och fyllt på med några fler sociala medier, bl.a. Mailchimp.

Precis som tidigare har sidan stöd av PWA-teknik, vilket gör det möjligt att installera och köra den som en app på både din telefon och dator, för bättre prestanda. Övriga tekniker som används är nodejs, GraphQL och SCSS. Jag hänvisar till denna hemsida som ett referensuppdrag, ur både ett design- och utvecklingsperspektiv.

För dig som utvecklare och vill testa den här uppsättningen kan jag rekommendera denna guide: https://www.gatsbyjs.com/tutorial/blog-netlify-cms-tutorial/

Referenser
Tillbaka till Bloggen