Tämä osa ryhtyy tuumasta toimeen. Käsiteltävänä on alkuun pääseminen, nettisivujen suorituskykyyn liittyvät aspektit, oman domainin hankkiminen ja lopuksi yhteenveto. Aiemmassa osassa oli johdantoa aiheeseen. Sen lukeminen ei ole välttämätöntä tämän osan kannalta, mutta mikäli kiinnostaa tietää enemmän esimerkiksi osaamistasostani, niin aloita siitä.

Osa 1, Jodanto

Nettisivujen "Hello world"

Kuten aiemmassa osassa mainitsin Stackbit on kaiken yhdistävä palvelu, joka tarjoaa kaiken alusta loppuun nettisivujen tekemiseksi. Ei ole oikeastaan montaa asiaa, mitä jää edes itse tehtäväksi. Pakollisia vaiheita on kaksi. Tein minuutin kestävän videon, miten aloitat nettisivujen luomisen Stackbitin avulla. Katso video

  1. Valitse pohja/teema mistä lähdet rakentamaan sivuasi. Tämän sivun pohjaksi valitsin Stackbitin Exto teeman.
  2. Keksi projektillesi sopiva nimi ja luo nettisivu. Tämän tekemiseksi sinun pitää kirjautua Stackbitin palveluun. Voit tehdä tämän esimerkiksi Google-tunnuksillasi.

Ei ole tarvetta ymmärtää mitä konepellin alla tapahtuu ellei itseään kiinnosta.

Sisällön muokkaaminen on helppoa ja markdown syntaksi oli itselleni ennestään tuttua. Sitä tarvitsi lähinnä kuvien lisäämiseen tekstin sekaan, mikä toimii käytännössä syntaksilla

![alt-text](/images/kuvannimi.png)

, missä "kuvannimi.png" on lähettämäsi kuvan nimi kotikoneeltasi ja alt-text on kuvaa kuvaava teksti.

Mikäli tarvitsee apua Stackbit Studion käyttöön, niin Stackbitin dokumentaatio videotutoriaaleineen on hyvä siinä.

Suorituskyky

Vinkki nettisivujen suorituskyvyn parantamiseksi: pakkaa kuvasi ja pidä niiden resoluutio järkevänä niiden näkyvään kokoon verrattuna. Eli toisinsanoen ei ole mitään järkeä upottaa 4K kuvia esikatselukuvaan, joka on rajattu näkymään esimerkiksi 400x200 kokoisella alueella.

Pakkaa kuvasi ja pidä niiden resoluutio järkevänä niiden näkyvään kokoon verrattuna.

Kuvat ovat varmaan rajuin asia, millä voi tehdä hyvin hitaita sivuja. Tämä johtuu siitä, että ylisuurien kuvien lataaminen kestää pitkään, eikä niiden odottelu ole kovin mielekästä puuhaa. Nyrkkisääntönä tiedostomuodoille on: käytä muotoa .png kuville, joissa on suoria reunoja (esim. tällä sivustolla kuvankaappaukset, logot joissa tekstiä yms.) ja .jpg valokuville. Lisätietoa tiedostojen pakkaamisesta löydät esim. täältä ja jpg vs png täältä.

Itse käytin vanhaa kunnon Paint:ia kuvien muokkaamiseen. Lopuksi pakkasin vielä kuvat TinyPNG:llä, joka ei ainakaan omiin silmiin huonontanut kuvia liikaa, vaikka pienensi niitä keskimäärin 40-60 prosenttia!

Tämän sivun pohjissa olikin valmiiksi jo paikat sekä pienelle esikatselukuvalle (eng. thumbnail), että itse artikkelin suuremmalle kuvalle. Eli alla olevassa kuvankaappauksessa näkyvät "Featured Image" (esikatselukuva) ja Alternative Featured Image (eli esimerkiksi portfolioni projektin kuva). Näin ollen kannattaa sama kuva tarjota sekä korkea-, että matalaresoluutioisena.

Kuvankaappaus Stackbit Studio editorista, jossa näkyy esikatselukuvan ja artikkelin suuremman kuvan sijainnit.

Lopuksi kannattaa vielä ajaa nettisivut Googlen Lighthouse tuotteen avulla, sen voi tehdä suoraan täällä. Se automaattisesti etsii pahimmat virheet ja tarjoaa analyysin nettisivuistasi. Kannattaa kiinnittää huomiota erityisesti mobiilianalyysin tulokseen, sillä mobiili on nykyään lähes puolet käytöstä Suomessa ainakin jonkun tilaston mukaan. Ja sitä suurempi syy on se, että mobiililla suorituskyky ja latausajat ovat kriittisempiä kuin kotikoneella useimmiten. Riippuen toki kodin yhteyksistä.

Omiin tuloksiini olin tyytyväinen. Ei näitäkään kannata liikaa tuijotella, vaan ottaa enemmänkin suuntaa antavana ja lukea hiukan mitä työkalu löytää kritisoitavaa nettisivuista. Kannattaa myös huomata, että aivan stabiili ei työkalu myöskään ole ja tulokset muuttuvat hiukan ajokertojen välillä. Toinen hyvä työkalu on dead link checker mikä varmistaa nettisivujesi linkkien toimivuuden. Virheelliset linkit ovat aina epämiellyttäviä.

Lighthousen tulos mobiililla

Performance 90, Accessibility 94, Best Practices 93 ja SEO 100. Asteikolla nollasta sataan.

Lighthousen tulos pöytäkoneella

Performance 99, Accessibility 93, Best Practices 93 ja SEO 100. Asteikolla nollasta sataan.

Oma domain eli verkkotunnus (vapaaehtoinen)

Mikäli haluat persoonallisen verkkotunnuksen, pitää sinun valitettavasti maksaa siitä. Se ei kuitenkaan maksa paljoa. Itse ostin omani 9€ vuosihintaan Domainhotellista. Muista tarkistaa, että käyttämäsi domain on ohjeiden mukainen. Luultavasti on, ellei joku ole rekisteröinyt haluamaasi verkkotunnusta esimerkiksi yrityksen nimenä.

Voit käyttää domainhotellin omaa DNS eli suomeksi nimipalvelinta (Nimipalvelin yksinkertaisesti muuttaa nimesi IP osoitteeksi, joka on siis numeerinen osoite, jota tietokoneet käyttävät kommunikoimiseen keskenään.). Itse kuitenkin halusin käyttää Netlifyn omaa nimipalvelinta, jotta saan automaattisesti ja ilmaiseksi luodun sertifikaatin, joka tarkoittaa turvattua yhteyttä ja esimerkiksi parempaa SEO:ta eli hakukoneoptimointia.

Tein videon, kuinka tämä käytännössä tapahtuu. Katso video

Loppusanat

Kokemukseni Stackbitin käytöstä oli yllättävän sulava. Kaikki kriittiset toiminnot toimivat ja pienet säädöt olivat suhteellisen kivuttomia. Stackbit Studion käytettävyys oli mielestäni erinomainen, vaikkakin jotkin asiat aiheuttivat aluksi hämmennystä. Kuten aiemmin mainitsemani Featured Imagen ja Alternative Featured Imagen ero. Tämäkin kuitenkin selvisi yrityksen ja erehdyksen kautta.

Mainittakoon, että Stackbitin hinnoittelu on vielä epäselvää, mutta he ovat omien sanojensa mukaan luvanneet, että harrastelumeininkiin palvelu tulee pysymään ilmaisena.

However, we'll always offer a free plan for personal websites in support of a modern, open web. If you're currently working on a free project, your site will remain free with all existing features, even when we finish introducing our pricing.

Jokaiselle varmasti tulee joitakin ongelmia vastaan. Toivottavasti ei mitään ylitsepääsemätöntä mistä ei selviä googlen avulla. Mikäli näin on, tai heräsi jotain kommentoitavaa, niin ota yhteyttä. Voin näin ollen lisätä tähän postaukseen asioita mitä ei itselleni tullut mieleen.

Tämän nettisivun lähdekoodin löydät täältä