Slik bygget jeg denne nettsiden
OBS! Denne artikkelen handler om den gamle nettsiden, som var laget med Gatsby. Min nåværende nettside, altså denne, er laget med Next.js og Sanity. Ingen større artikkel om denne ennå – men du kan lese litt om den her.
Det å lage en nettside er én ting – det å lage en nettside som ser noenlunde fin ut, er noe helt annet – i hvert fall for oss som ikke er designere. Heldigvis finnes det mange hjelpemidler der ute, som Coolors.co for å finne farger som passer sammen, og Google Font Pairings fra Figma. Og CSS-tricks.com har noen fine guider til CSS Flexbox og CSS Grid, som har vært nyttige å ty til når man har stått fast (denne nettsiden bruker både Grid og Flexbox). Ellers er selvfølgelig MDN uunnværlig, enten det er HTML, CSS eller JavaScript man holder på med.
Jeg vurderte først å lage denne nettsiden fra scratch i React, men ville jo også trenge en eller annen backend-løsning til å lagre artikler og annet innhold. Jeg hadde kikket litt på både MongoDB og Firebase. Sistnevnte ville kanskje vært det enkleste å komme igang med, men jeg vurderte også å bruke Node.js, Express, MongoDB og Mongoose og lage mitt eget «headless CMS» med tilhørende REST-API for å lese og skrive data til databasen.
Det var da jeg kom over det norskutviklede headless CMS-systemet Sanity.io, og fant ut at det kanskje ikke var nødvendig å finne opp hjulet på nytt. Jeg hadde allerede begynt å kikke litt på Gatsby.js, et rammeverk for React for å lage statiske nettsider. Jeg hadde også lest litt om fordelene med «serverside rendering» – og hadde lyst til å bruke enten Gatsby.js eller Next.js for å få statiske nettsider som er lynkjappe å laste – og også gir god SEO. Fordelen med Next.js er såvidt jeg vet at den oppretter sidene dynamisk etter hvert, mens Gatsby.js lager sidene én gang for alle i det du bygger prosjektet (kjører gatsby build). For mitt formål ville begge deler fungere fint – men siden jeg akkurat hadde pløyd meg gjennom et Gatsby-kurs på Udemy hadde jeg lyst til å prøve det.
Det viste seg at Sanity-folkene hadde laget fiks ferdige maler som gjør det raskt å komme igang med Sanity som backend og for eksempel Gatsby- eller Next.js-baserte nettsider.
Så jeg valgte å basere denne nettsiden på ett av Sanitys «starter-projects», med Gatsby til å lage brukergrensesnittet og Sanity som CMS. Løsningen er satt opp med kontinuerlig utrulling (CD) mot Netlify, slik at så snart jeg pusher en endring til min Github-konto, så bygges siden på nytt og går live på Netlify.
Start-prosjektet fra Sanity måtte tilpasses en del - blant annet tilpasset jeg skjemaene som brukes i Sanity Studio til mine behov, og jeg måtte også gjøre en del endringer i Gatsby-løsningen for å få alt til slik jeg ville. Og jeg ønsket at det skulle være mulig å «pinne» enkeltartikler til de første posisjonene på forsiden. Dette ble løst ganske enkelt ved å legge til et boolean-felt kalt «pinned» i skjemaet som definerer strukturen for artikkel-dokumentene i Sanity, gjøre en endring i GraphQL-spørringen i Gatsby for å få tilgang til dette feltet – og deretter modifisere koden litt for å vise artikler med pinned === true før alle de andre.
Oppsummert
- Nettsiden er bygget i Gatsby.js, basert på ferdig start-prosjekt fra Sanity
- Backend er Sanity.io
- Gatsby-nettsiden kommuniserer med Sanity via GraphQL
- Responsiv design basert på CSS Grid og Flex
- Med CSS Modules har hver nye komponent jeg lager sin egen CSS-fil, enkelt og oversiktlig etter min mening
Jeg kan ikke skryte på meg å ha laget alt fra bunnen, men det å sitte å jobbe i denne kodebasen har i hvert fall lært meg veldig mye om «best practice» og smarte måter å løse problemer på, og ikke minst har det vært nyttig å se på hvordan man kan bruke GraphQL i en løsning som dette. Det å kunne bruke GraphQL til «alt» – enten det er å hente data fra en ekstern tjeneste som Sanity, eller det er filer lagrert lokalt på disken, er ganske genialt etter min mening – og veldig mye mer elegant enn å bruke REST-API-er hvor man gjerne får tilbake mye mer enn kun det man trenger.
Hele kildekoden til alt sammen finner du på min Github-konto.