Tervetuloa blogiini! Tämä on ensimmäinen blogipostaukseni ja aloitan sen kertomalla, kuinka olen luonut nämä nettisivut hyödyntämällä Github-sivuja (eng. "Github Pages"), Visual Studio Codea ja Githubia. Tämän blogipostauksen ohjeiden avulla myös sinä opit tekemään kustannustehokkaat staattiset nettisivut.

Staattiset nettisivut

Staattisilla nettisivuilla tarkoitetaan perinteisesti nettisivuja, jotka on muodostettu HTML- ja CSS-merkintäkielien avulla, joiden käyttö on helppo omaksua, vaikka ei olisi aiempaa kokemusta ohjelmoinnista. Staattinen sivu on käytännössä tiedosto palvelinkoneella ja se näkyy selaimella aina samanlaisena ja muuttuu vain, jos tiedostoa muokataan palvelimella. Github Pages -palveluun perustuvat staattiset nettisivut toimivat käytännössä siten, että Github Pages -palvelun oletussivulta "username.github.io" sisältö ohjataan internetin nimipalvelujärjestelmän (DNS) avulla varaamallesi verkkosivulle.

Verkkotunnuksen hankinta

Nettisivujen luonti aloitetaan rekisteröimällä verkkotunnus käyttöön joltain palveluntarjoajalta. Itse hankin klausiltanen.fi-verkkotunnuksen domainhotellista, josta hankin myös tarvittavat lisäpalvelut DNS-nimipalveluasetusten muuttamiseksi.

Kehitysympäristön perustaminen

Nettisivujen kehittämistä varten sinun tulee ladata ohjelmistokehityspaketin sisältävä tekstieditori, kuten Visual Studio Code. Visual Studio Code (VSC) on Microsoftin tarjoama ilmainen Git-versionhallintaa tukeva ohjelmointityökalu. Mikäli Git ei tule VSC-latauspaketin mukana, tulee Git ladata erikseen Gitin nettisivuilta. Kun olet ladannut ohjelmistot, asenna VSC-sovellukseen vielä lisäosina (extensions) Git Extension Pack, gitignore sekä Live Server. Git-lisäosat auttavat jatkossa versiohallinnan kanssa ja Live Serverin avulla nettisivujen kehitys on puolestaan nopeampaa.

Github ja Github Pages -palvelu

Wikipediasta siteerattuna: "GitHub on vuonna 2008 avattu verkkosivusto, joka tarjoaa paikan Git-versionhallintaa käyttäville ohjelmakehitysprojekteille. Git itsessään on komentoriviohjelma, jolle GitHub tarjoaa graafisen käyttöliittymän.". Github Pages on puolestaan palvelu, joka tarjoaa staattisten nettisivujen ylläpidon tai "houstauksen" veloituksetta tarkoittaen sitä, että et tarvitse erillisistä palvelinta HTML- ja CSS-tiedostojen ylläpitämiseksi. Lisäksi Github Pages tarjoaa sivustollesi SSL-suojauksen (https), jonka avulla sivusto näyttäytyy turvallisena vierailijoille.

Github Pages -palvelun käyttöönotto edellyttää, että olet luonut Github-profiilin sekä repositoryksi kutsutun koodivarannon, jonne nettisivujesi lähdekoodit lähetetään ja josta tiedot peilataan hankkimallesi verkkotunnukselle.

Lähdekoodin lähetys Githubiin

Nettisivujen lähdekoodin muodostus aloitetaan muodostamalla index.html-tiedosto projektihakemistoon, josta se taltioidaan (commit) Gitin versiohistoriaan sekä lähetetään (push) eteenpäin Githubiin.

Koodin taltiointi Gitiin tapahtuu Source Control -välilehdeltä ja ensimmäisellä kerralla projektihakemistolle on määriteltävä Git-koodivaranto, joka tapahtuu klikkaamalla valikosta "Initialize Repository". Myös Githubia varten on määriteltävä Github-koodivaranto, johon koodi lähetetään.

DNS-muutokset

Jotta Github Pages sisältö saadaan peilattua osoitteesta "username.github.io" hankimallesi verkkotunnukselle, tulee sinun lisätä Github Pages -palvelun IP-osoitteet DNS-tietoihisi. Domainhotellissa tämä onnistuu lisäämällä DNS-hallintapaneeliin kautta hankimallesi verkkotunnukselle "A-record" tietueina Github Pages -palvelun IP-osoitteet.

DNS-muutoksien kanssa on syytä olla kärsivällinen, sillä ensimmäisten tuntien aikana ohjausmuutoksien tekemisestä sivuston toiminta on epävakaata. Kannattaa siis odottaa ainakin vuorokausi ennen kuin epäilee, että on tehnyt jotain väärin. Kun DNS-muutokset on tehty, verkkosivustollasi pitäisi näkyä vastaavat tiedot, kuin osoitteessa "username.github.io".

Mikäli https-versio sivustosta ei ala toimimaan vuorokauden kuluessa, kannattaa DNS-setuksissa poistaa Github Pages -palvelusta irralliset A-recordit. Tämän jälkeen poista ja uudelleen syötä sivustosi tiedot Github Pages -palvelussa, jotta DNS-asetusten haku resetoituu.

Lopputulos

Lopputuloksena Visual Studio Codessa editoimasi ja Githubiin julkaisemasi koodi pitäisi näkyä selkokielisenä nettisivuna osoitteessa "username.github.io" sekä Github Pages -palveluun linkittämälläsi verkkosivustolla.

Vinkkejä

• HTML-merkintäkielen opiskelu onnistuu kätevästi sivustolla https://www.w3schools.com/.
• Nettisivujen luonti kannattaa aloittaa luomalla sivusto jo jotakin valmista ilmaista sivupohjaa hyödyntämällä, mikäli haluaa saada nettisivut pystyyn nopeasti.
• Nettisivut on mahdollista luoda myös ilman HTML- ja CSS-merkintäkielien opettelua erillisen www-sisällönhallintaohjelmiston, kuten WordPress-avulla. Sisällönhallintaohjelmiston hankinta lisää kuitenkin nettisivujen ylläpitokuluja.
• Nettisivujen kävijämäärien seuranta onnistuu kätevästi Google Analytics työkalulla, kun sivustolle on ensin tiputettu Google-seurantatunnus.

Ylläpitokustannukset

Tämän sivuston ylläpitokustannukset muodostuvat domainhotellin kautta varatusta verkkotunnuksesta sekä DNS-nimipalvelut sisältävästä yhden tähden webhotellista. Sivuston ylläpitokustannukset ovat nämä elementit huomioiden noin 15 € vuodessa.