TIIVISTELMÄ

Tausta Peruskouluaikoina syntynyt haave omasta kotisivusta toteutui vihdoin.

Teknologia Kehykseksi valikoitui Svelte(Kit) sen keveyden, suorituskyvyn, komponenttikohtaisten tyylien ja selkeän tiedostopohjaisen reitityksen ansiosta.

Hostaus Hostattu GitHub Pagesin kautta julkisesta repositoriosta automaattisella GitHub Actions -CI/CD-putkella.

Domain & Sähköposti Oma verkkotunnus (julu.fi) ja siihen kytketty sähköposti Zoho Mailin avulla.

Lopputulos Valmis, jatkuvasti kehittyvä henkilökohtainen verkkosivu, jossa esittelen osaamistani.

Oma portfolio

Kiinnostus nettisivujen tekemiseen alkoi minulla jo peruskouluikäisenä, kun tutustuin HTML- ja CSS-merkintäkieliin ATK-tunneilla ja vapaa-ajalla. Oli kiehtovaa nähdä miten erikoiselta näyttävä teksti kääntyi nettisivuksi selaimella. Haaveilin jo tuolloin omasta kotisivusta, mutta eihän sitä vielä silloin tiennyt mitä kaikkea sen perustaminen vaatii. Ajatus oli sivussa tovin, mutta nyt tuntui vihdoin siltä, että oli toteutuksen aika.

Kehyksenä Svelte

Halusin toteuttaa portfolioni jollain kevyellä, sujuvan kehityskokemuksen tarjoavalla ohjelmistokehyksellä, joka tukisi sivuston staattista generointia (SSG) ja mahdollistaisi siten helpon hostaamisen. Valitsin tehtävään Svelten. Olin kuullut siitä paljon hyvää ja lukenut sen keveydestä, suorituskyvystä ja kehittäjäystävällisyydestä.

Lyhyen kokeilun perusteella Svelte osoittautui juuri oikeaksi valinnaksi. Kehittäminen tuntui luonnolliselta, koska Svelte-komponenttien rakenne muistutti hyvin paljon perinteistä HTML/JS/CSS-koodia:

// example-heading-component.svelte

<script lang="ts">
  const { title }: { title: string } = $props();
</script>

<h1 class="heading">{title}</h1>

<style>
  .heading {
    color: blueviolet;
  }
</style>

Sveltessä CSS-luokat ovat komponenttikohtaisia (scoped); komponenteissa määritetyt samannimiset luokat eivät sekoitu keskenään, koska buildaamisen yhteydessä niille annetaan uniikit tunnisteet.

Eri reittien – esim. /projects ja /contact – toteutus on myös suoraviivaista. Ei turhia abstraktioita, providereita ja importteja vaan polut syntyvät suoraan kansiorankenteen perusteella. Lähestymistavat moniin asioihin tuntuivat virkistävältä verrattuna tutumpaan Reactiin.

Hostaaminen

Hyödynsin Github Pagesia portfolion hostaamiseen. Tätä varten sen repositotoriosta täytyi tehä julkinen Githubissa. Määritin repoon Github-actionin, joka buildaa sivuston uudelleen jokaisen pushin yhteydessä, mikä on muutosten tekemisen kannalta hyvin kätevää.

Domain ja sähköposti

Portfolion tekeminen oli oiva tilaisuus perehtyä domainien maailmaan. Valittuani domaintarjoajan ja vapaana olevan domainin, pienten mutkien ja konfiguroinnon kautta sivusto avautui lopulta julu.fi osoitteen takaa. Se oli hieno fiilis! Domainia voisi nyt käyttää myös sivuprojektien kanssa (esim. sivuprojekti.julu.fi).

Oma domain mahdollisti tietysti myös oman @julu.fi sähköpostipäätteen käytön. Tätä varten otin käyttöön Zoho Mailin, ja pian sähköpostit lähtivät maailmalle omalle uniikilla osoittellani ja saapuivat ongelmitta myös omaan postilaatikkooni.

Loppumietteet

Tässä se nyt on! Oma piskuinen nettisivu, jota kehittelen ja täydennän pikkuhiljaa. Tarkoituksena olisi, että se pyörisi internetissä hamaan tulevaisuuten asti. Peruskouluaikona syntynyt haave oli nyt saavutettu ja on aika siirtyä seuraavien haaveiden ja tavoitteiden kimppuun!