Taidon uudet kotisivut Gatsbya hyödyntäen

Jo useamman vuoden Taidon sisällä on ollut puhetta uusien kotisivujen tekemisestä. Jostain syystä kuitenkin sivuston uusimiselle ei oikein meinannut löytyä aikaa vuodesta toiseen - olemmahan kuitenkin softa-alan konsulttiyritys, joka ymmärrettävästi aina pyrkii priorisoimaan asiakasprojektejaan. Pitkän odottelun jälkeen päätimme kuitenkin ottaa härkää sarvista ja aloittaa uusien kotisivujen rakentamisen.

Taidon aikaisemmat kotisivut oli rakennettu Hugo nimisellä työkalulla ilman minkäänlaista ulkoista sisällönhallintaratkaisua. Suurin osa sisällöstä pidettiin koodin ohella Markdown tiedostoissa ja loput sisällöistä oli kovakoodattuna suoraan koodiin, mikä teki sisällön päivittämisestä hankalaa. Ainoastaan koodaamiseen tottuneet henkilöt, joilla oli pääsy Taidon Githubiin, pystyivät julkaisemaan tai muokkaamaan sisältöä, mikä hidasti ja vähensi motivaatioita uuden sisällön tuottamiseen.

Halusimme siis uudistaa sekä kotisivumme, että niiden taustalla olevan sisällönhallintajärjestelmän. Muita tavoitteita kotisivuille oli modernien teknologioiden hyödyntäminen, brändin kevyt päivitys, käytettävyyden parantaminen, sekä korkean tason saavutettavuus.

Teknologiaratkaisut

Gatsby

Päätimme aikaisessa vaiheessa toteuttaa uudet verkkosivut niin sanotulla Jamstack tavalla, jossa sivustosta tuotetaan etukäteen staattisia HTML-tiedostoja, jotka voidaan helposti jakaa suoraan CDN:stä poistaen tarpeen yksittäiselle mahdollisesti pullonkaulana olevalle palvelimelle. Staattisten HTML-tiedostojen käyttäminen takaa sivuston nopean latautumisen ilman ulkoisten resurssien turhaa odottamista.

Projektin aloitushetkellä ylivoimaisesti suosituin Jamstack-ratkaisu oli Gatsby, joka käyttää toista erittäin suosittua JavaScript kirjastoa Reactia käyttöliittymä renderöimiseen. React on Taidolle erittäin tuttu teknologia ja tekeekin dynaamisten ominaisuuksien lisäämisestä staattisen sisällön ohelle erittäin helppoa. Gatsby toteuttaa datan hakemisen erinäisistä lähteistä, kuten CMS:stä (Content Management System), poikkeuksellisella tavalla hyödyntäen GraphQL kyselykieltä. GraphQL avulla Gatsby luo erinäisistä datalähteistä yhtenäisen rajapinnan, jonka kautta sisältö saadaan Reactin renderöitäväksi. GraphQL:n käyttö tuntui aluksi erikoiselta, mutta pian ymmärsimme kuinka voimakkaasta asiasta on kyse. Pystymme jatkossa helposti hakemaan sisältöä CMS:n lisäksi mistä tahansa lähteestä, joka tarjoaa GraphQL rajapinnan.

Frontend kirjastot

Vaikka kyseessä oli staattiset kotisivut, halusimme noudattaa samoja ohjelmointikäytäntöjä kuin muissa projekteissamme. Verkkosivujen rakentamiseen käytimme meille ja koko Frontend maailmalle tuttuja kirjastoja, kuten eslint, prettier, typescript, jotka auttavat takaamaan turvallisen ja laadukkaan koodin. Tyylittelyä varten otimme käyttöön emotion CSS-in-JS kirjaston, joka tekee tyylittelystä yksinkertaista ja dynaamista, omaksuen Reactin komponentti-ideologian.

On melko turvallista sanoa, että suurin osa verkkosivuista sisältää merkittävän määrän kuvia, joiden optimointi vaikuttaa kriittisesti verkkosivun toimintaan. Lisäämällä edes muutaman ylisuuren kuvan sivulle voi sivuston käyttökokemus heikentyä huomattavasti. Usein onkin suositeltavaa tarjota monta eri laatuista kuvaa HTML srcset attribuutin avulla, jolloin selain voi ladata kyseiselle laitteelle sopivan kuvan. Gatsby tarjoaakin gatsby-image lisäosan kuvien optimaalista näyttämistä varten. Edellä mainitun srcset menetelmän lisäksi gatsby-image mahdollistaa kuvien laiskan lataamisen vasta kun ne ovat tulossa näkyviin ruudulle. Lisäksi gatsby-image pystyy näyttämään kuvasta heikkolaatuisen version lähes samantien, kun kuva ilmestyy ruudulle, ja vaihtamaan tämän alustavan kuvan korkealaatuiseen versioon heti kuvan latauduttua kokonaan.

Sisällönhallinta

Sisällönhallintaa varten suoritimme kattavan katsauksen erinäisiin CMS-ratkaisuihin. Koska olimme jo päättäneet käyttää Gatsbyä sivuston rakentamiseen, täytyi sisällönhallintaratkaisun tarjota jonkinlainen rajapinta, jonka avulla sisältö saadaan haettua ja prosessoitua Gatsbyn ymmärtämään muotoon. Niin sanotuista Headless CMS palveluista, jossa CMS on ainoastaan sisällönhallintaa ja sisällön ulospäin tarjoamista varten, on viime vuosina tullut todella suosittuja ja vaihtoehtoja on markkinoilla runsaasti. Useat näistä CMS-palveluista tarjoavat rajoitetun ilmaisversion sekä maksullisen täysversion, jonka kustannukset usein perustuvat admin käyttäjien tai sisällön määrään.

Netlify CMS

Tutustuimme aluksi täysin ilmaiseen CMS-ratkaisuun nimeltä Netlify CMS, mikä poikkesi merkittävästi muista tarjolla olevista CMS-ratkaisuista. Netlify CMS pohjautuu siihen, että kaikki sisältö elää Github repossa koodin ohella ja jokainen sisällön muutos sisällönhallintakäyttöliittymässä olisi vain osa normaalia Git flow:ta — esimerkiksi tuotannossa olevan blogijulkaisun muokkaminen tekisi suoraan commitin master haaraan. Netlify CMS vaikutti aluksi lupaavalta, mutta ei lopulta täysin sopinut Taidon DevOps käytäntöihin ja järjestelmiin, aiheuttaen hankalia haasteita esimerkiksi eri Git haarojen synkronoinnissa ja automaattisesten esikatselujen luomisessa CMS sisällön muuttuessa.

Strapi CMS

Olimme jo projektin alkuvaiheessa päättäneet, että CMS-ratkaisu ei saisi mielellään maksaa mitään ja sen pitäisi tukea useampia käyttäjiä, jotka voivat helposti muokata ja julkaista uutta sisältöä. Näiden vaatimusten täyttäminen vaikutti aluksi haastavalta, kunnes löysimme Strapi CMS:n. Strapi CMS on melko uusi, mutta erittäin monipuolinen sisällönhallintaratkaisu, joka on mahdollista hostata täysin itse ilman sitoutumista kolmannen osapuolen tarjoajaan. Kaiken lisäksi Strapi CMS on rakennettu Taidolle tutuilla teknologioilla, kuten Node.js ja React, mikä mahdollistaa CMS:n helpon ylläpidon tai muokkaamisen mikäli tarve siihen tulevaisuudessa syntyy.

Strapin kanssa saimme luotua sujuvan sisällönhallintaprosessin, jossa uudet julkaisut sekä olemassa olevan sisällön muutokset luovat automaattisesti sivustosta esikatseluversion, jonka avulla on helppo varmistaa muutosten oikeellisuus. Strapi tuki myös kuvien ja muiden tiedostojen tallentamista Google Cloud Storageen, mikä sopi mainiosti Taidon DevOps käytäntöihin.

Saavutettavuus

Koimme yhdeksi tärkeimmistä tavoitteista toteutaa uudet kotisivut mahdollisimman saavutettavasti. Saavutettavuus on asia, joka usein jää taka-alalle tiukkojen aikataulujen ja budjettien takia — varsinkin jos kyseessä on web-sovellus, jolla on vain rajoitettu määrä käyttäjiä. Julkisten verkkosivujen suhteen saavutettavuus on kuitenkin kriittinen osa-alue, jota ei tulisi sivuuttaa. Näkemyksemme Taidolla on, että internet kuuluu kaikille ja jokaisella pitäisi olla mahdollisuus kokea ja kuluttaa Internetin sisältö sillä tavalla, mikä itselleen sopii parhaiten.

Lähestyimme saavutettavuutta seuraavista näkökulmista:

• Semanttisen HTML:n oikeanlainen käyttö
• Sivuston sujuva navigointi näppäimistöllä
  • Looginen tab-järjestys
  • Selkeät focus-tyylit
• Ruudunlukuohjelmien huomioiminen

Aiomme julkaista erillisen blogikirjoituksen saavutettavuudesta, missä kerromme tarkemmin, miten huomioimme edelliset asiat kotisivuja rakentaessamme.