Kokonaisen uuden sivuston tekeminen yritykselle vaatii suuren määrän työtä. Tästä syystä monet yritykset alihankkivat sekä sivuston ilmeen että kehityksen joltakin tähän erikoistuneelta toimittajalta. Tämä prosessi on hidas ja toimitus tapahtuu harvoin ajallaan. Kaikki näkemäni vastaavat projektit on toimitettu useita kuukausia myöhässä.

Aloittelevana yrityksenä meillä oli tiukka aikataulu saada sivustomme julkaistua. Samaan aikaan meillä oli rajallinen määrä rahaa käytettävissä. Päädyimme hankkimaan sivuston ilmeen ja ulkoasun asiantuntijalta ja teimme teknisen toteutuksen itse.

Tämä lähestymistapa antoi meille paljon liikkumavaraa, sillä pystyimme aloittamaan alustavan kehityksen jo ennen kuin ensimmäistäkään versiota logosta oli olemassa. Käytännössä loimme vaadittavan pilvi-infrastruktuurin ja valitsimme sivuston toteutusteknologiat etukäteen.

Teknisestä näkökulmasta toteutukseen on saatavilla hyvin paljon erilaisia vaihtoehtoja. Useimmiten sivustot luodaan jonkin sisällönhallintajärjestelmän (content mangement system, CMS) avulla. WordPress on suosituin CMS. Emme kuitenkaan valinneet WordPressiä tai muutakaan perinteistä sisällönhallintajärjestelmää, koska ne eivät olleet tuttuja meille.

Sen sijaan lähestyimme asiaa modernimmasta näkökulmasta ja erotimme sisällönhallinnan niin kutsuttuun headless CMS -järjestelmään. Headless CMS tarjoaa vain sisältöä, kuten tämän kirjoituksen tekstin ja kuvat, rajapinnan kautta. Se toimii kuin mikä tahansa taustajärjestelmä moderneissa web-sovelluksissa. Sivuston ulkoasua ei voi muokata järjestelmän kautta, ellei toiminnallisuutta toteuta itse esityskerroksen puolelle. Valitsimme järjestelmäksi DatoCMS:n, koska sen hallintakäyttöliittymä sekä datan mallinnustyökalut olivat yksinkertasia ja helppoja käyttää.

HTML, CSS ja JavaScript ovat sivuston visuaalisen kerroksen eli frontendin toteutusteknologiat. Frontend hakee dataa julkaisujärjestelmästä ja esittää sen. Kehitystä helpottaa, jos frontendin toteuttaa jonkin ohjelmistokehyksen avulla.

Valitsimme Next.js-ohjelmistokehyksen frontendin toteutukseen. Se perustuu Reactiin, joka on meille erittäin tuttu teknologia. Olen käyttänyt Reactia lähes jokaisessa käyttöliittymätoteutuksessa viimeisen kuuden vuoden aikana. Toinen React-pohjainen kehys olisi ollut Gatsby, mutta kokemuksieni perusteella Next.js on parempi ja paljon yksinkertaisempi ratkaisu tämänkaltaisessa projektissa.

Next.js:ssä on paljon ominaisuuksia, mutta tärkein niistä on staattisten sivujen generointi. Softlandian sivusto generoidaan staattisesti joka kerta, kun joku julkaisee sen sisällönhallintajärjestelmän päästä. Tämä tarkoittaa sitä, että sivustoa ei tarvitse renderöidä palvelimen päässä, joten sivusto toimii todella nopeasti.

Sivusto on myös erittäin helppo julkaista, sillä se koostuu vain kasasta tiedostoja, jotka voi kopioida suoraan palvelimelle, joka pystyy tarjoamaan staattista sisältöä. Sivusto on erittäin turvallinen, koska erillistä taustajärjestelmää ei tarvitse ylläpitää. Julkaisuprosessi tiivistettynä:

1. Kirjoittaja julkaiseen uuden version sivustosta DatoCMS:stä (esimerkiksi uuden blogipostauksen).

2. DatoCMS ilmoittaa Github Actioneille, että sivuston staattisen generoinnin voi aloittaa (sivuston esityskerroksen koodi on Githubissa).

3. Github Actions ajaa Next.js:n "export"-komennon. Next.js hakee datan DatoCMS:n GraphQL APIsta ja luo staattiset tiedostot.

4. Github Actions julkaisee staattiset tiedostot Azure Static Web Appsiin.

5. Github Actions ilmoittaa DatoCMS:lle onnistuiko julkaisu vai ei (julkaisu voi epäonnistua, jos koodissa on bugeja).

Lähestymistavan haittapuolena on React-taitoisen ohjelmoijan tarve, jotta sivustoon voidaan tehdä muutoksia. Perinteisillä julkaisujärjestelmillä sivustoon voi tehdä pieniä muutoksia hallintapaneelista kenen tahansa toimesta. Niissä voi asentaa myös laajennoksia, joilla saa sivustolle lisää toiminnallisuutta koskematta koodiin.

Lisäksi esikatselumahdollisuus puuttuu. Se on mahdollista toteuttaa, mutta kokonaan staattisen julkaisun tapauksessa se ei onnistu. Julkaisu kestää joitakin minuutteja. Mitä enemmän sivuja on, sitä kauemmin niiden esigenerointi staattiseksi HTML-sivuksi kestää.

Edellä mainitut haittapuolet eivät ole häirinneet meitä. Tämä on sivuston ensimmäinen versio ja sivusto kehittyy samalla kun Softlandia kehittyy. Moni asia jäi pois ensimmäisesti versiosta. Esimerkiksi tuki usealle kielelle on olemassa, mutta emme ehtineet kääntää sivustoa alunperin suomeksi (nyt myös suomenkielinen versio on julkaistu, koska luet tätä tekstiä suomeksi). Joka tapauksessa lopputulos on melko hyvä, mutta parannettavaa löytyy. Tekemistä sivuston parissa riittää siis tulevaisuudessakin.