Kun asentaa aloittelijana tuoreen Jekyllin käyttöön, niin ensimmäinen liike, joka kannattaa tehdä, on hakea hieman toimivampi teema kuin mikä asennuksessa tuli. Toki asennettu Minima on siisti peruspohja, mutta asioiden oppiminen saattaisi olla helpompaa, kun virittää hieman laajempaa systeemiä omaan käyttöön. Samalla tulee opeteltua Jekyllin hakemistorakenteen ja oletusten idea. Se on nimittäin asia, jonka tietäminen oletetaan Jekyllin omassakin dokumentaatiossa, mutta kerrotaan melkoisen myöhään.

Itse törmäsin asiaan yrittäessäni rakentaa Jekyllin omien ohjeiden mukaan kirjoittaja-arkistoa. Sain sen toki aikaiseksi, mutta niin kirjoittajan oman sivun, kuin myös postauksen sivun, layout hajosi. CSS-tyylit eivät olleet käytössä, alatunnusten hävisi – tuollaisia asioita.

Aloin penkomaan asiaa. Useamman turhan googlettelun ja päämäärättömän Jekyllin oman dokumentaation selailun jälkeen törmäsin syyhyn. Se selitti myös miksi minulta oli puuttunut oleellisen oloisia hakemistoja, kuten _layouts tai miksi minulta puuttui artikkelien pohja – kunnes sen tein ohjeiden mukaan, ja ulkomuoto hajosi.

Se mikä olisi pitänyt kertoa heti alussa on, että teemassa nuo kaikki ovat. Kun omaan kehitysversioon tehdään vastaavat, niin ohitetaan ja ylitetään teeman mukana tulleet. Minun olisi pitänyt muokkauksien takia kopioida muutettavilta osin alkuperäinen sivuston rakeenteeseen ja vasta siihen tehdä muokkaus.

Varmasti makuasia, mutta kun olet opettelemassa Jekylliä, niin kopioi heti hieman piilotetummin oleva teeman rakenne heti ensimmäiseksi työversiosi tilalle. Muuten joutuu aina piipahtamaan katsomassa mahtaisiko tarvittava pohja ollakin olemassa ja sitten kopioida se erikseen.

Jekyllin rakenne

Jos sinulla ei ole vielä asennettuna komentoa tree, niin asenna se ensimmäisenä. Se on ainoa tapa saada järkevästi hahmotettua mitä on missäkin.

sudo apt install tree -y

Kun olet antanut komennon jekyll new sivusto niin asennettava ympäristö käyttää teemaa Minima ja sivuston hakemistopohjaan asennetaan vain ns. tärkeät hakemistot – joihin ei kuulu sivujen tai artikkeleiden pohjia, CSS-tyylejä jne. Ne ovat piilossa Miniman omassa hakemistossa ja siksi helposti ohitettavissa.

Asennuksen jälkeen näkyvissä oleva hakemistorakenne on tämä:

[13:55:25] jagster@koti:~/stage/proto$ tree
.
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2020-08-15-welcome-to-jekyll.markdown
├── about.markdown
└── index.markdown

1 directory, 7 files

Mutta se rakenne, joka aidosti kiinnostaa ja joka määrää miltä sivustopohjasi näyttää, löytyy hakemistosta gems/gems/minima-<versio>:

[20:25:11] jagster@koti:~/gems/gems/minima-2.5.1$ tree
.
├── LICENSE.txt
├── README.md
├── _includes
│   ├── disqus_comments.html
│   ├── footer.html
│   ├── google-analytics.html
│   ├── head.html
│   ├── header.html
│   ├── icon-github.html
│   ├── icon-github.svg
│   ├── icon-twitter.html
│   ├── icon-twitter.svg
│   └── social.html
├── _layouts
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
├── _sass
│   ├── minima
│   │   ├── _base.scss
│   │   ├── _layout.scss
│   │   └── _syntax-highlighting.scss
│   └── minima.scss
└── assets
    ├── main.scss
    └── minima-social-icons.svg

5 directories, 22 files

Siirry hakemistoon, jossa Minima on – minulla se olisi tätä kirjoitettaessa

cd ~/gems/gems/minima-2.5.1

Anna komento:

cat _includes/head.html && cat _includes/header.html && cat _layouts/post.html && cat _includes/footer.html

Tuo kaikki on se rakenne, joka tekee sen, mitä kusutaan artikkeliksi tai (blogi)postaukseksi. Jos rakennat sivustosi alusta alkaen, niin säädät kaiken tuon – haluamaksesi toki, mutta siinä vaiheessa olet vasta tehnyt rakenteen blogeja varten. Sen päälle tulee vielä CSS-säädöt, jotka päättävät sen miltä asiat oikeasti näyttävät.

Jos et piittaa tuosta piilotetusta rakenteesta, ja teet minkä tahansa jonkun ohjeen mukaisen muutoksen, teet sivustosi pohjaan vaadittavan, mutta puuttuvan, _layouts hakemiston ja sinne post.html tiedoston, niin sivupohjasi muuttuu välittömästi – sen rakenne on vain sen mukainen, mitä tiedostoon laitoit, ja tyylit puuttuvat.

Viimeistään nyt alat pääsemään kärryille miksi sanon, että Jekyll vaatii HTML- ja CSS-osaamista ja on sopivin koodareille, jotka tekevät tekemisen takia.

Sisällöntuottajan ratkaisu

Jekyll sopii myös sisällöntuottoon, ainakin siltä osin kun tarjottava sisältö ei vaadi dynaamisia osioita. Sisältö harvemmin tarvitsee, mutta toki täytyy muistaa, että sisältö voi tarkoittaa mitä vain. Valokuvagalleria voidaan toteuttaa staattisena, mutta silloin joutuu erikseen käsin tekemään kaikki erilaiset kuvakoot, joskus jopa kuvamuodot. Verkkokauppa on hyvinkin dynaaminen, mutta sen toteuttaminen Jekyllillä on tolkutonta ajanhukkaa – vaikka se onkin mahdollista, tosin rajatussa muodossa. Verkkokurssit voi Jekyllillä saman tien unohtaa.

Kun puhutaan vaikka tästä sivustosta, tai mistä tahansa kulutusta varten luodusta, jossa sisältö on pääosin tekstipohjaista tai upotettua videota tai ääntä, niin Jekyll on yksi mahdollisuus.

Sisällöntuottajat tietävät yhden universaalin totuuden. Kun sisältöä todella luodaa, eikä tehdä kopiointia, niin se vie aikaa. Jos tekniikan rakentaminen ja ylläpitäminen vie enemmän aikaa kuin sisällön luominen, niin ollaan siirrytty tekemään tekniikkaa tekniikan takia. Ei siinäkään ole mitään vikaa, mutta silloin fokus ei ole enää sisällössä, vaan sisällön mahdollistavassa tekniikassa. Ja tekniikkaa yleensä käytetään nimenomaan tarjoilemaan sisältöä ja kävijät saapuvat nimenomaan sisällön takia – eivät ihmettelemään sivurakenteen lähdekoodia.

Silloin kaikki, joka vie ajan ja mahdollisuuden sisällöltä, on turhaa ja haitallista. Sekä kääntäen – kaikki tekniikkaan uhrattu aika, joka helpottaa sisälltön tuottamista, esittämistä ja kuluttamista, on hyödyllisesti käytettyä aikaa. Ainakin jos asiat ovat tasapainossa – WordPress-maailmaan on syntynyt skene, jossa uhrataam kymmeniä tunteja työtä, että saadaan latausajoista joitain kymmeniä millisekunteja pois. Se on proskrastinaatiota, jolla vältellään aidosti hyödyllisen asian tekemistä.

Siksi Jekyllin kanssa teematasolla Minimaa käytetään vain yhteen asiaan: perusteiden ymmärtämiseen. Mutta mahdollisimman nopeasti etsitään itselle sopivin teema, otetaan se käyttöön ja aletaan lisäämään sisältöä. Vasta myöhemmin aletaan hienosäätämään tekniikkaa, asia kerrallaan, omiin haluihin sopivaksi – kunhan ensin on varmistettu tarve. Jos Minima mahtuu siihen – ei se huono vaihtoehto ole, jos minimalistista hakee – niin on säästänyt taas aikaa ja vaivaa.

Jos jossain vaiheessa huomaa, että tekniikan pakolliset säädöt vaativat enemmän aikaa, vaivaa ja huomiota kuin sisältö, niin on tullut tehtyä vikavalinta. Mutta se on tuttu asetelma meille kaikille. Hankaluus on siinä, että siirtyminen toiseen järjestelmään on aina työlästä ja usein kallista – ja siksi aina selitänkin aloitteleville verkkokauppiaille, että selvittäkää kaikki mahdollinen ja mahdoton ennen kuin betonoitte järjestelmän. Kyllä, täytyisi olla kykyä arvioida sellaista, jota ei tunne, ja nähdä tulevaisuuteen – mutta siinä auttaa kokemusten ja varsinkin muiden kokemien ongelmien määrä ja laatu.

Mistä teema?

Google auttaa löytämään sopivan teeman. Valitettavan äkkiä huomaa, että teematarjonta ei ole kovinkaan laaja. Johtuu puhtaasti siitä, että Jekyll on marginaalissa oleva harrastajien järjestelmä. Toki maksullisiakin löytyy kourallinen, mutta minulla ei ole niiden laadusta mitään hajuakaan – mutta liian monessa on hieman turhan iäkäs päivitystahti, että itse suostuisin maksamaan.

Kapea valikoima tarkoittaa myös sitä, että ei tarvitse kahlata tuhansia ja tuhansia vaihtoehtoja läpi. Säästää aikaa ja aika paljon vaivaa. Lisäksi on muistettava, että vaikka juuri 100 prosenttisesti omia tarpeita vastaavaa ei löydykään, niin ainahan sitä voi virittää. Siksi asennetaan mahdollisimman valmis teema, jotta virityksen voisi tehdä niin vähällä vaivalla kuin mahdollista.

Jekyllin dokumentaatio ohjaa näihin:

• jamstackthemes.dev
• jekyllthemes.org
• jekyllthemes.io (suurin osa kaupallisia, vain muutama ilmainen)
• jekyll-themes.com (kaupallisia, vain tusinan verran ilmaisia)

Kun karsii pois selvästi harjoitustapaukset, täysin turhat tyylittömät starter-pohjat ja tuplat, niin ilmainen tarjonta on parin sadan luokkaa.

Etsiessäsi itsellesi sopivaa teemaa, niin, taas, kaksi yleispätevää sääntöä on voimassa:

1. Älä asenna mitään, jonka edellinen päivitys on noin kahden vuoden takaa tai vanhempi; se on hylätty projekti
2. Älä asenna mitään, jonka esikatselu ei toimi tai domain on päästetty vanhaksi; se on hylätty projekti

Teeman asentaminen

Teema voidaan asentaa kahdella tavalla: gem-asennus tai käsin. Molemmissa on puolensa. Kun asennus tehdään gem-komennolla, niin ainoastaan ehdottoman välttämättömät siirretään projektin hakemistoon, sekä päivitys tehdään myös yhdellä komennolla. Käsin tehtäessä, yleensä git tulee silloin käyttöön, kaikki tiedostot ja hakemistot kopioidaan projektin juureen. Päivitys tehdään yhden mutkan kautta, mutta se saattaa ylikirjoittaa omat muutokset, jos ei ole huolellinen – silti aktiivisempi muokkaamiset ovat hieman helpompia ja näppärämmin hallittavissa.

gem

Asennus tapahtuu komennolla gem "<teeman-slug>". Esimerkiksi teema Minimal Mistakes asentuisi tällä:

• mene hakemistoon, jossa gemit ovat, esim. oma kotihakemisto
• asennetaan teema Jekyllin käyttöön:

gem "minimal-mistakes-jekyll"

Jakke Lehtonen

Teen B2B-markkinoille sisällöntuottoa sekä UX-testauksia. Samaan liittyy myös koulutukset yrityksille ja webmaailman kanssa muutoin painiville. Serverien sielunelämää on joutunut ohessa opettelmaan. Toinen puoli toiminnasta on koirien ravitsemuksen ja ruokinnan suunnittelua sekä varsinkin omistajien kouluttamista hoitamaan koiriaan oikein ja vielä paremmin.

Profiili: Jakke Lehtonen