Kirjoitin viimeksi MkDocs-sivugeneraattorista. Nyt opiskelin uuden sivugeneraattorin käyttöä, kun Sami Keijonen Eleventyä sattui suosittelemaan (Sami kirjoittikin juuri eilen kiinnostavan jutun Eleventyn ja WordPressin yhdistämisestä).
Eleventy osoittautui kerrassaan helppokäyttöiseksi ja näppäräksi sivugeneraattoriksi. Sopiva projektikin oli mielessä, niin pääsin heti testaamaan: Lautakunta-podcastille piti saada nettisivut.
Lautakunnalla ei ole ollut tähän asti mitään sivuja. Halusin yksinkertaiset sivut, joissa olisi lista kaikista jaksoista ja sitten jokaiselle jaksolle oma sivu, jossa olisi jakson kuvaus ja mahdollisuus kuunnella jakso. Sisältö saadaan RSS-syötteenä Soundcloudista, jossa podcast majailee.
Tällaiseen tarkoitukseen staattinen sivugeneraattori on täydellinen työkalu: sivuston sisältöä ei tarvitse muokata käsin ja päivityksiä tulee silloin tällöin. Webbidevaus.fi-podcastin kotisivut on tehty samalla tavalla, käyttäen Gatsbya (tästä projektista lisää podcastin jaksossa 30 ja GitHubissa).
Valmis Lautakunta-podcastin sivusto löytyy täältä.
Kopioimalla alkuun
Arvelin, että tarpeeni ei voi olla niin uniikki, etteikö joku olisi tehnyt jotain samansuuntaista jo ennenkin. Löysinkin Medium to Small JAMstackin, Phil Hawksworthin tekemän Eleventy-sivuston, joka hakee sisältöä Mediumin RSS-syötteistä ja rakentaa niistä yksinkertaisen sivuston, jossa on artikkelilistaus etusivulla ja artikkeleille omat sivut.
Niinpä oli käytännöllistä aloittaa kloonaamalla Hawksworthin repo GitHubista projektin pohjaksi. Oma kloonini löytyy GitHubista.
Omia lisäyksiä mukaan
Pieniä muutoksia sivupohjiin tarvittiin. Kun esimerkiksi alkuperäisessä artikkelin sisältö tulostettiin näin:
{{ item['content:encoded'] | safe }}
tarvittiin tässä tapauksessa hieman enemmän säätöä, koska halusin kuvauksiin rivinvaihdot paikoilleen ja pelkkänä tekstinä olevat linkit hyperlinkeiksi. Sopivien filtterien löytäminen vaati hieman yritystä ja erehdystä, mutta tämä toimi:
{{ item['itunes:summary'] | string | urlize | nl2br | safe }}
Päivämäärämuotoilu piti saada amerikkalaisesta suomalaiseen malliin. Tämä ihmetytti hetken, kunnes keksin, että päivämäärän muotoiluun käytettävä date-suodatin oli projektin omia lisäyksiä ja löytyi /filters/dates.js-tiedostosta, jonka jälkeen päivämäärämuotoilu oli helppo saada kohdalleen:
module.exports = function (date) {
var d = new Date(date)
return d.getDate() + "." + d.getMonth() + "." + d.getUTCFullYear()
}Sitten kun vielä sai muutokset päivittymään sivuille – ei ihan helppo juttu sekään – niin jo näytti hyvältä.
Soundcloud-tuki
Lautakunnan sivuille tarvittiin lisäksi keino kuunnella podcastin jaksoja. Koska podcast on hostattu Soundcloudissa, Soundcloudin oma soitin olisi käytännöllisin.
Kuinka ollakaan, tähänkin oli valmis ratkaisu olemassa: eleventy-plugin-embed-soundcloud osaa tehdä Soundcloud-soittimen upotuksia, jos sivulla on sellaisenaan oleva linkki Soundcloudiin – ja sehän on RSS-syötteestä helppo kaivaa sivupohjaan:
<p>{{ item['link'] }}</p>
Itse plugini on helppo ottaa käyttöön:
eleventyConfig.addPlugin(embedSoundCloud)
Soundcloud-upotuksen käyttäminen edellyttää upotuskoodin hakemista Soundcloudin palvelimilta. Tämä hidastaa build-prosessia tuntuvasti: ilman upotuksia kokonaisuus rakentuu noin puolessa sekunnissa, upotusten kanssa aikaa menee jopa puoli minuuttia. Ulkoasun kanssa värkätessä kannattaakin napata upotukset pois päältä, niin säästää hermojaan.
Loppu oli sitten etusivun tekstien asettelua ja tyylimuotoiluja. Tyylin suhteen lainasin inspiraatiota vähän Webbidevauksen tyylikkäiltä sivuilta Lautakunnan omalla värimaailmalla.
Julkaisuprosessi
Sivut pitää tietysti saada julkaistua. Netlify oli ilmeinen valinta julkaisualustaksi, GitHub-repon saa Netlifyssä todella helposti lähdemateriaaliksi ja Eleventy-projetkin buildaaminen on yksinkertaista.
Pieniä komplikaatioita tähänkin toki saatiin: buildit epäonnistuivat alkuun, koska projektissa oli oletuksena käytössä yarn ja itse käytän npm:ää. yarn piti hoksata vaihtaa joka paikasta npm:ksi, sitten buildi meni läpi ongelmitta ja tulos saatiin julkaistua Netlifyyn.
Julkaisuprosessi olisi tietysti hyvä myös automatisoida, jotta sivustoa ei tarvitse päivittää käsin aina kun uusi jakso ilmestyy. Mitään muutoksiahan tiedostoihin ei tarvitse tehdä, sivut generoidaan RSS-syötteen perusteella, mutta buildiprosessi pitää saada käynnistettyä, kun RSS-syötteessä tulee muutoksia.
Tähän löytyi avuksi Netlifyn build hook -toiminto. Netlifyyn on mahdollista avata osoite, johon tehty POST-pyyntö laukaisee build-prosessin. Oivallinen automaatiotyökalu IFTTT hoitaa tässä työt: lisäsin IFTTT:hen automaation, joka tarkkailee podcastin RSS-syötettä. Kun IFTTT huomaa syötteen päivittyneen, se laukaisee Netlifyssä build-prosessin ja uuden jakson pitäisi ilmestyä sivuille.
Loistotyökalu
Eleventy oli todella vaivaton saada käyttöön. Säätäminen vaatii kokemusta Javascriptistä, Gitistä ja Nodesta, mutta jos tämä osaaminen löytyy, Eleventy on paljon helpompi käyttää kuin mikään muu kokeilemani staattinen sivugeneraattori.
Ominaisuuksien rajoista en osaa vielä sanoa; kyllä tällä kai kaikenlaista värkkää. Aion jatkossakin käyttää Eleventyä sellaisiin projekteihin, joihin WordPress on väärä työkalu. Tällainen varsin yksinkertainen RSS-syötteeseen perustuva sivusto oli todella helppo tehdä ja tuloksena oli toimiva ja suorituskykyinen sivusto. Google Lighthouse -pisteet todistavat:
Näistäkin osaa olisi helppo parantaa vielä tuosta, tämä on aika lailla nollavaivan tulos – ja silti jo noin hyvä.