Sivuston tekovaiheita

Omat nettisivut häitä varten? Noniin!

Kääritään hihat ja aletaan hommiin.

Sivusto on toteutettu suhteellisen vähällä vaivalla (ainakin mahdollisuuksiin nähden), ja tämä blogipostaus kokoaa hieman vaiheita sekä omaksi projektidokumentaatioksi, että sivustolla vierailijoiden ohjeistukseksi.

Pientä kokemusta nettisivuista itsellä oli jo entuudestaan, ja yliopiston kurssit auttoivat ymmärtämään niinkin arkipäiväisen vaikeita asioita kuin HTML, Javascript ja git. Syvään päähän ei omien sivujen kanssa onneksi tarvitse sukeltaa. Todella pitkälle pärjää englanninkielen taidolla sekä ohjeiden orjallisella noudattamisella. Vaativampi kikkailu edellyttää soveltamistaitoja. Mutta se siitä, katsotaan miten pitkälle päästään.

Aloitetaan!

Github Pages

Sivustoa ylläpidetään, päivitetään ja hallinnoidaan Githubin kautta. Github on versiohallintapalvelu, joka tarkoittaa siis tuottamasi sisällön kannalta sitä, että voit tallentaa eri vaiheet kätevästi nettiin, lisätä välikommentteja jokaiseen päivitysvaiheeseen, palata edellisiin vaiheisiin, muodostaa uuden “haaran” versioosi ja hallita lopputulokseen tähtäävän kokonaisuutesi eri vaiheita. Git on yksi versiohallintaväline, jota Github-sivusto yhtenä esimerkkinä ylläpitää. Git osoittaa voimansa useiden ihmisten työstäessä saman projektin eri osia ja vaiheita. Yksin puurtaessa se ei juurikaan tuo lisäetua, jos muistat mitä muutoksia teit ennen kuin asiat päättivät räjähtää. Git ja Github eivät ole hyödyllisiä pelkästään ohjelmoijalle, vaan sitä voi hyvin kuvitella käyttävän esimerkiksi graafikot, kirjailijat, taulukkolaskentaa hyödyntävät tai vaikka päiväkirjaa pitävät.

Githubin käyttäjä voi hyödyntää Github Pages -nettisivujärjestelmää. Käytännössä se tarkoittaa sitä, että Githubiin laitettu nettisivun koodi pyöräytetään Githubin palvelimella, jonka jälkeen sivusto tupsahtaa valmiina ulos omalla, Githubin alaisella nettiosoitteella. Tässä esimerkki: oma Github-käyttäjätunnukseni on Amatson. Github-projektini löytyvät osoitteella github.com/amatson. Githubin hallinnoimat nettisivustoni taas löytyvät osoitteesta amatson.github.io Nämä sivut ovat oma “sivustonsa” osoitteessa amatson.github.io/julmat Githubiin voi muodostaa useita sivustoja, vaikkapa jokaiselle projektille. Nämä ns. alisivut saattavat vaatia hieman enemmän ymmärrystä aiheesta, sillä sivujen sisäiset linkit voivat ohjata vahingossa pääsivustolle (xx.github.io/yy sivuston linkit on määritettävä ohjaamaan tuohon …/yy sivun osoitteisin, esimerkiksi …/yy/blogijuttu, ettei sivusto ohjaa linkkiä käyttävää xx.github.io/blogijuttu sivulle, jota ei sitten olekaan olemassa). Pääsivuston käytän suhteen pääsee samalla tapaa alkuun kuin alisivustojenkin kanssa.

Eli kohta 1. Github tunnusten luonti (se on ilmaista).

Github.com

Seuraavaksi luodaan uusi repository-projekti”kansio” ja seurataan githubin ohjeita sivuston aloittamisessa.

Github Pages ohjeet

Githubin sisällä voikin sitten muokata tiedostoja ja tehdä versiohallintaan päivityksiä, mitkä sitten päivittyvät vasta luodulle sivupohjalle. Jos tavoitteena on tehdä vain yhden sivun “portfolio” ilman alisivuja, lisälinkkejä tai muuta monimutkaista niin onneksi olkoon! Olet valmis ja sinulla on nyt nettisivut valmiina!

Lisämaustetta sivuihisi saat opettelemalla hieman markdown eli merkintäkielen alkeita. Näin pystyt tuottamaan

otsikoita,

linkkejä tai ihan vaan eri tekstityylejä.

Markdown opas (englanniksi)

Teemat ja Jekyll

Seuraavaksi kastetaan jalkoja syvään päähän.

Github-sivut toimivat näppärästi Jekyll-ohjelman päällä. Sen avulla voi kohtalaisen vaivattomasti luoda staattista (lue: pysyvää, ei niitä dynaamisia nettisivuja jotka suorittaa jotain jatkuvia suoritteitaan) sisältöä. Blogien pitämiseen se on täydellinen työkalu.

Jekyll:n hallintaa varten oma toimenpiteeni jatkui seuraavasti: latasin github-projektin omalle koneelleni, muokkasin ja loin lisää sisältöä Atom-editorin kautta (mikä tahansa muukin editointiohjelma käy, vaikka notepad, mutta joku kehittyneempi ratkaisu helpottaa esimerkiksi gitin käyttöä sekä kansiorakenteen hallintaa).

Jekyll:stä lisää kohta. Sitä ennen pikainen katsastus teemoihin. Githubissa oli mahdollisuus vaihtaa sivuston teemaa lennosta projektikansion asetuksista. Lisää teemoja on ladattavissa ilmaiseksi esimerkiksi täältä. Teemat ovat käytännössä valmiita nettisivupohjia, joihin voi itse luoda sisältöä ja joita voi itse tuunailla omiin tarpeisiinsa sopivaksi. Ja nyt Jekyll tulee mukaan. Jekyll mahdollistaa sen, että tuottamalla staattista sisältöä HTML- tai MarkDown-muodossa voi kirjoittaa sivun pohjan vain kerran ja sen jälkeen hyödyntää valmista pohjaa kaikkeen sisältöön jota tuottaa. Esimerkiksi kertomalla blogitekstinsä alussa Jekyll-ohjelmalle haluavansa käyttää artikkeli-pohjaa tai valokuvakansio-näkymää, saa sisällöstä aivan eri näköisen riippuen siitä onko käyttäjä etusivulla, blogia selaamassa tai matkakuvakansion antimia ihailemassa. Tästä esimerkkinä näiden sivujen etusivu, jossa on tyylikäs taustakuva sekä nippu blogilinkkejä, verrattuna yksittäisen blogin näkymään ilman taustakuvaa tai muuta katseenvangitsijaa.

Teema ja Jekyll kulkevat näin käsi kädessä. Näiden sivujen pohjalla on käytetty Skinny Bones teemaa, jonka voi ottaa helposti haltuun näiden ohjeiden avulla. Itse en tämän projektin kohdalla asentanut Jekyll-kääntäjää koneelle, vaan tuotin sisällön ja työnsin materiaalin tekstieditorista (Atom) suoraa Githubin riesaksi.

Tutkimalla Jekyll-koodia ja tiedostoja pääsee pitkälle. Näiden sivujen tuottaminen alkoi 14.1. ja tätä ohjeistusta kirjoitetaan käytännössä valmiille sivuille 17.1., väliin toki mahtuu hieman tuskastelua oikeiden asetusten löytämisessä koodin seasta, mutta käytännössä parissa päivässä näinkin toimivat nettisivut on saatavissa pystyyn.

Viimeistely

Sivuthan eivät ole mitään ilman kivaa osoitetta. Onkin enää vuorossa julmat.fi domainnimen varaaminen Ficoralta (ent. viestintäviraston domainhallinta), joka taas vaatii joko verkkotunnusvälittäjän etsimisen, joka hoitaa jotain maksua vastaan domainin hankkimisen, tai ryhtymällä itse verkkotunnusvälittäjäksi ja maksamalla vain Ficoran rekisteröintimaksun nettisivusta 9€/vuosi. Älkää tulko kysymään voinko rekisteröidä teille domainin. Sellainen palvelu vaatii asiaan perehtymistä ja oikeasti vastuiden ja velvollisuuksien tuntemista ja niistä piittaamista. Tällä hetkellä olen itse ainoa joka voi valittaa, ja ainoastaan itselleni.

Tai no, toki voitte kysyä, älkää pahastuko jos suosittelen jotain oikeasti pätevää palveluntarjoajaa, kuten Domainhotelli tai Louhi

Ja sitten vielä automaatio

Githubin alla sivut toimivat kivasti, mutta yksi pieni puutos osui kohdalle varhaisessa vaiheessa. Jekyll:n avulla julkaistut blogipostaukset tulevat näkyviin ainoastaan kun uusi sivuston versio työnnetään githubiin ja julkaisun päivämäärä on nykyinen päivämäärä tai vanhempi. Eli jos haluaa julkaista jollain tietyllä päivämäärällä upean postauksen, joutuisi joko julkaisemaan sen heti kirjoittamisen jälkeen liian aikaisin asettamalla aikaisemman päivämäärän, tai sitten päivystämään oikeaan kellonaikaan ja työntämään muutokset githubiin kun haluaa bloginsa päivitettäväksi. Automaatialan teekkarille moinen tuntuu barbaarimaiselta. Siis google käteen ja menoksi. Hyvin pian oikea kombinaatio sopivia työkaluja oli kädessä.

Ensimmäisenä, Netlify, joka mahdollistaa sekä sivujen DNS-hallinnan (eli sen mitä vistintävirasto vaatii, että sivun osoite on oikeasti jossain päin internetin palvelimia tallessa) että automaattisen julkaisun. Netlifyn kanssa sivut käytännössä siirtyvät pois Githubin alaisuudesta. Mitä Netlify käytännössä tekee, on githubista sivujen lähdekoodin lukeminen ja julkaisu omalla domainillaan. Sen lisäksi oman domainin pitäminen helpottuu Netlifyn tarjoamien palveluiden avulla.

Ja sitten se todellinen automaatio. Zapier. Zapierin avulla voi luoda automaattisesti ajastettuja tehtäviä useiden palveluiden välille. Zapier tukee lukuisia erilaisia ratkaisuja, ja yksi niistä sattui olemaan Netlifyn ajastettu julkaisu. Helpoilla vaiheilla Zapier käy tökkäämässä kerran päivässä Netlifyn julkaisunappia, jolloin Netlify hakee tuoreimman sivustosisällön Githubista ja julkaisee nettisivut mahdollisesti uusien blogipostausten kera.

JA SIINÄPÄ SE!

Hauskaahan se on jos on aikaa ja jaksaa nähdä vaivaa, mutta loppujen lopuksi ei vaivaakaan tarvitse suunnattomasti nähdä. Laittakaahan nettisivuja pystyyn, se on tänä päivänä helpompaa kuin koskaan!


Päivitetty