GitHub ja Netlify

Oman nettisivun lisääminen nettiin

Kuka minä olen?

Moi, mä olen Jarno. Alotin täällä pajalla 15.4 ja oon tehnyt lähinnä nettisivuja. Oikeasti mua kiinnostaa eniten oikea ohjelmointi ja ohjelmointikielet kuten Python, mutta jokaisen on aloitettava jostain.

Olen vielä lähinnä wannabe ”koodari”, mutta intohimoa tähän työhön ja uuden oppimiseen multa löytyy vaikka muille jakaa. Toivottavasti sultakin.

Oon itse kulkenut lähinnä omaa polkua oppimisen ja projektien suhteen, mulla on omat kurssit mitä käyn Udemy nimisessä palvelussa. Kannattaa testaa, mahtava paikka. Täältä pajaltakin saa paljon materiaalia ja apua, mutta itse olen todennut että Udemy toimii mulla parhaiten.

Udemy ja Google, mitä muuta ihminen voi haluta?

Mistä tulen kertomaan?

Kerron miten GitHubiin saa laitettua omaa koodia, miten Netlifyn avulla saat nettisivusi helposti nettiin ja miten sekä mistä saat ilmaisen domainin.

Koska en oo yhtään luova ihminen niin tää kirjoitus tulee olemaan luultavasti tosi suoraviivainen ja tylsä.

Toisaalta…

Jos joku oikeasti tarvitsee apua miten esimerkiksi Netlify toimii, on ehkä parempikin että tää on suora ja nopea tutoriaali, kuin että tää olisi täynnä turhaa tekstiä millä ei oo mitään tarkoitusta. Onko tämä sitten hyvä vai huono juttu? Se jää lukijan päätettäväksi.

Mitä GitHub ja Netlify ovat?

Hyvä kysymys. GitHub on verkkosivu minne voi laittaa omaa koodia ja projekteja säilytettäväksi ja muiden ihmeteltäväksi. En täysin itsekkään edes tiedä miten GitHub toimii tai miten siitä voidaan ottaa kaikki hyöty irti, mutta tiedän miten sinne pystyy omaa koodia laittamaan. Tässä tapauksessa omien nettisivujen koodia.

Entä Netlify?

Netlify on myös netissä toimiva palvelu jonka avulla pystyy helposti laittamaan omat nettisivut nettiin. Netlify saa koodisi GitHubin kautta ja päivittää sitä automaattisesti sen mukaan kun itse päivität koodia. Kunhan siis muistat päivittää terminaalin kautta GitHubiin uudet tiedostosi. Parasta kuitenkin on että tämä kaikki on täysin ilmaista!

Netlify tarjoaakin eri hintaisia paketteja tarpeen mukaan mutta itse olen laittanut ilmaiseksi neljä nettisivua nettiin ja kaikki on toiminut erittäin hyvin ilman ongelmia. Ilmaisella ”Starter” paketilla siis pärjää jos haluaa laittaa testinä omia yksinkertaisia projekteja nettiin.

Aloitetaan

Okei, ensiksi me tarvitaan nettisivut. Jokin yksinkertainen projekti. Tein itse tosi nopeasti yhden todella yksinkertaisen sivun. Tai oikeastaan pelkän landing pagen.

Jos sulla ei valmiiksi jo ole, niin sun pitää asentaa Git. Sen saa täältä.

Muistaakseni mukana tulee myös Git Bash, joka ilmeisesti jotenkin helpottaa Gitin käyttöä Windowsilla. Mutta tärkeintä on kuitenkin se että sen avulla me saadaan todella helposti kerrottua Gitille se kansio mistä me halutaan ne tiedostot GitHubbiin siirtää.

Mulla se nettisivun kansio on työpöydällä. Joten mun ei tarvitse windowsin terminaalin (cmd) avulla erikseen sitä määrittää vaan riittää kun painan hiiren oikealla napilla kansiota ja valitsen ”Git Bash Here

Seuraava askel

Seuraavaksi meidän pitää kirjautua GitHubiin tai tehdä käyttäjätili jos sulla ei valmiiksi sitä jo ole.

Meidän pitää luoda uusi repository. GitHubin aivan oikeassa yläkulmassa on pieni plussan (+) merkki. Painakaa sitä ja sen jälkeen ”New repository

Sen jälkeen voit nimetä sen ja lisätä esimerkiksi kuvauksen. Voit myös valita tuleeko tiedostosi julkiseksi vai yksityiseksi. Itse laitan yksityiseksi koska tämä on pelkkä testi. Painakaa sitten ”Create repository”.

Seuraavaksi voi avautua aika hämmentävä sivu mutta palaamme siihen myöhemmin. Avatkaamme Git Bash uudestaan.

Git komennot

Nyt alkaa se osuus mistä en itsekkään ole vielä täysin varma.

Eli Git komennot.

Kirjoitetaan ensin komentoriville git init

Sitten git add .

Ja tuo piste tuon komennon perässä tarkoittaa että haluamme kaikki tiedostot. Isommissa projekteissa ei välttämättä haluta kaikkia tiedostoja GitHubbiin joten voi luoda .gitignore tiedoston sinne kansioon jotta voit erikseen määrittää mitä tiedostoja ei halua mukaan. Toinen vaihtoehto on olla lisäämättä git add komennolle pistettä ja manuaalisesti lisätä haluamasi kansiot ja tiedostot mutta mun mielestä siinä ei oo mitään järkeä.

En halunnut node_modules kansiota mukaan viimeisiimpään projektiini

Sitten lisätään commit. Eli git commit -m ’Initial Commit’

Jos olen oikein ymmärtänyt niin tuossa voi lukea mitä itse haluaa. Nyt kuitenkin laitoin ”Initial Commit

Palataan takaisin GitHubiin sillä tarvitsemme pätkän koodia mikä on meille valmiiksi generoitu. Eli git remote add origin ja sen jälkeen se toinen kohta missä lukee sun käyttäjätunnus ja repositoryn nimi. Kopioi koko rivi ja lisätään se komentoriville.

Kopioi koko rivi koodia

Jostain syystä CTRL + V ei toimi komentorivillä joten painoin hiiren oikeaa nappia ja klikkasin ”Paste

Kun tämä on tehty, lisäämme viimeisen pätkän koodia.

git push -u origin master

Nyt terminaalissa pitäisi näkyä kuinka se lisää tiedostot GitHubiin.

Näyttää kutakuinkin tältä

Seuraavaksi voit päivittää GitHub sivusi painamalla F5 ja sen jälkeen sun tiedostot pitäisi näkyä siellä.

Tadaa!

Netlify

Hyvä. Nyt kun meidän tiedostot on GitHubissa, pääsemme eteenpäin.

Mennään Netlifyn sivuille.

Kuten aikaisemmin, pitää luoda käyttäjätili jos sulla ei sitä jo ole.

Myös GitHubin kautta voi kirjautua mutta itse tein vaan erillisen tilin sähköpostilla.

Seuraavaksi painetaan ”New site from Git” ja avautuu uusi sivu mistä voidaan valita mistä palvelusta haluamme antaa koodimme. Valitse GitHub. Avautuu sivu joka pyytää sun lupaa yhdistää GitHubiin. Anna lupa.

Tämän jälkeen meidän pitää valita repository. Itselläni se on Testi1. Seuraavalla sivulla voimme lisätä tietoja. Itse en lisää mitään vaan painan ”Deploy Site

Nyt meille aukeaa sivu missä voimme hallita kaikkea. Sun oma nettisivu saa myös randomilla generoidun domainin ja pystyt sitä klikkaamalla katsomaan sivuasi.

Oma Domain

Näytän vielä miten saadaan ihan oma domain. Ilmaiseksi!

Yleensä domainit maksaa mutta olen löytänyt yhden palvelun mistä voi saada tiettyjä domaineja ilmaiseksi noin vuoden ajaksi.

Tämä palvelu on Freenom.

Tehkää myös tänne oma tili, jos teillä ei sitä jo ole. Kun olette kirjautuneet niin painakaa ”Services” ja seuraavaksi avautuneesta valikosta ”Register a new domain

Avautuu uusi sivu mistä voimme yrittää löytää oman uuden domainin. Itse kirjoitin ”Testi1” ja heti löytyi.

Voimme nyt valita minkä päätteen haluamme, itse otan ”.tk

Sen jälkeen menemme kassalle eli painatte ”Checkout” linkkiä ja avautuu uusi sivu missä näemme uuden domainimme. Halutessanne voitte oikealta ”Period” kohdasta valita enemmän aikaa. 12 kuukautta on maksimi ilmaiselle domainille. Tämän jälkeen ”Continue” ja avautuu vielä viimeinen sivu johon voimme lisätä tietomme ja nähdä kuitin. Itse en lisännyt oikeita tietoja koska tämä on pelkkä testi.

Viimeistelkää tilaus painamalla ”Complete order

Seuraavaksi avautuu sivu mikä kertoo mikä sun ”Order Number” on. Kannattaa ehkä ottaa ylös jos tarvitsee.

Nyt kaikki on lähes valmista ja voimme painaa alla olevaa sinistä linkkiä mikä palauttaa meidät jostain syystä etusivulle eikä client areaan. Ei se mitään. ”Services” valikosta valitkaamme ”My Domains” kohta ja meille avautuu sivu josta näkyy kaikki meidän domainit. Itselläni niitä on nyt kuusi, teillä luultavasti vain yksi. Painakaa ”Manage domain” nappia oikealta.

Viimeinen vaihe

Palataan takas netlify sivulle. Sivulla pitäisi näkyä isolla numerot 1, 2 ja 3.

Katsotaan kohtaa kaksi ja painetaan sitä ”set up a custom domain” linkkiä.

Sitten voimme kirjoittaa meidän domainin ja painaa ”Verify

Isolla todennäköisyydellä netlify ilmoittaa että domainilla on jo owner mutta se olemme me joten painetaan ”Yes, add domain

Avautuu uusi sivu ja painamme ”Check DNS configuration

Tämän yhdistämisen pystyisi ilmeisesti tehdä monella eri tavalla mutta mulla tää menetelmä (Nameservers) on helpoiten toiminut. Eli painetaan ”Set up Netlify DNS for … –>” linkkiä ja seuraavalla sivulla painetaan ”Verify

Netlify kysyy taas että olemmeko me owner, vastaamme myöntävästi.

Sitten taas ”Continue” ja viimeisellä sivulla meille aukeaa kohta mistä näemme ”Nameservers”. Meidän pitää palata takaisin freenom sivulle ja painaa sieltä managing sivulta ”Management Tools” ja seuraavaksi ”Nameservers

Valitaan ”Use custom nameservers” ja nyt voimme kopioida netlify sivulta ne neljä osoitetta ja lisätä ne freenomeen.

Lopuksi paina ”Change Nameservers

Nyt kaiken pitäisi toimia ja voimme kirjautua ulos freenomesta ja palata takaisin netlify sivulle ja painaa ”Done

Seuraavaksi pitää vain odottaa sillä menee hetki kunnes kaikki toimii. Luultavasti ainakin 5-10 minuuttia. Voit katsoa toimiiko kaikki yksinkertaisesti päivittämällä sun netlify sivua mikä sulla on auki ja sen pitäisi joka kerta automaattisesti tarkistaa DNS configuration.

Spam that F5!

Kun DNS configuration on valmis, ne ”Check DNS configuration” tekstit missä on keltainen kolmio pitäisi poistua ja tilalle tulla oikeeseen reunaan vihreät laatikot missä lukee ”Netlify DNS

Onneksi olkoon! Sinulla on nyt netissä oma nettisivu omalla domainilla. Halutessasi voit vielä lisätä sille https suojauksen samalta sivulta, sieltä ihan alhaalta missä lukee ”HTTPS

Mulla se jostain syystä tuli automaattisesti itsestään mutta sen pyynnön voi itsekkin lähtettää painamalla niistä kahdesta alhaalla olevasta napista vasempaa.

Nyt voit tyytyväisenä käydä sivullasi millä tahansa laitteella, mistä tahansa, milloin tahansa. Cool, right?

Jos sun sivu ei heti toimi vaikka netlify väittää kaiken olevan kunnossa, odota hetken aikaa.

Netlifyn avulla sun sivulle voi saada myös muita ominaisuuksia. Esimerkiksi täysin toimivat lomakkeet (forms) tai vaikkapa captchan estämään spämmiä.

Jos joskus kirjoitan toisen blogikirjoituksen, voin kertoa niistä lisää.

Nää Gitin komennot toimii myös esim. VSCoden terminaalin kautta suoraan. Jos valittuna on bash. Ison projektin kanssa tämä voi olla helpompaa ja vaikka .gitignoren saa helposti lisättyä.

Loppusanat

Luultavasti en osannut selittää kovinkaan hyvin mutta jos tästä jollekkin on apua niin hyvä niin. Saatoin myös selittää jonkin asian väärin tai jättää kertomatta, anteeksi myös siitä. Nää asiat on mullekkin vielä aika uusia.

Alempana on vielä kaksi videota erittäin hyviin tutoriaaleihin jotka luultavasti avaa tätä aihetta enemmän ja paremmin kuin minä.

Jos aihe kiinnostaa, suosittelen lämpimästi katsomaan ainakin noi videot. Itse en ole katsonut niitä (vielä), joten tein tämän kirjoituksen täysin omien kokemuksien pohjalta.

Tolla äijällä on myös erittäin hyvä youtube kanava mistä löytyy satoja videoita koodaamiseen liittyen. Erittäin laadukasta materiaalia jos koodaaminen ja sen oppiminen kiinnostaa.

Tuohon alas saa myös mieluusti jättää kysymyksiä ja kommentteja!

Kiitokset lukijalle!

— Jarno Lehtonen

Keskiviikko: Scrum

Olemme tekemässä Digitalents Academyn verkkosivua käyttäen scrum-menetelmää. Scrum on ketterä kehitysrunko – agile framework – jota käytetään erityisesti ohjelmistokehityksessä. Scrumin tärkeimmät arvot ovat sitoutuminen, rohkeus, keskittyminen, avoimuus ja kunnioitus. Tiimissä sitoudumme noudattamaan näitä arvoja.

Nettisivujen kehitys on jatkunut nyt kahden sprintin ajan. Sen aikana olemme saaneet verkkosivumme periaatteessa julkaisukuntoon, enää jäljellä on vain hienosäätöä ennen kuin sivut saadaan julkiseksi. Scrumin idea on tuottaa joka sprintillä julkaisukelpoinen lisäys tuotteeseen sen sijaan että koko tuote (sovellus) pyrittäisiin tekemään kerralla valmiiksi kaikilla ominaisuuksillaan. Näin tuotetta saadaan kehitettyä nopeammin ja tehokkaammin. Matkalla projektin painopisteet terävöityvät ja turhat ominaisuudet karsiutuvat. Sprintin päättyessä kokoonnutaan yhteen tarkastelemaan mitä sprintillä saatiin aikaan ja miten toimintaa voisi kehittää. Näin kokonaisuus muovautuu tuotetta rakentaessa.

Arjessamme scrum näkyy erityisesti päivittäispalavereina ja valkotauluna täynnä post it-lappuja. Lapuille on kirjoitettu tehtäviä, joita hoidetaan projektin aikana. Taululla komeilee kuusi otsikkoa; PBacklog (Product Backlog), Sprint Backlog, To do, W.I.P. (Work In Progress), Verify ja Done. Lappuja siirrellään sitä mukaa paikasta toiseen, kun hommia saadaan eteenpäin. Product Backlogissa, tuotteen kehitysjonossa, on kaikki asiat mitä tuotteeseen halutaan. Sprint Backlogiin siirretään tehtävät, jotka toteutetaan sprintin aikana. Siitä scrumin tiimiläinen voi ottaa itselleen tehtävän To do -kohtaan ja kun hän aloittaa työstämään sitä, lappu siirretään W.I.P.n alle. Kun tehtävä on valmis, voi lapun siirtää Verifyn alle, jolloin tarkistetaan täyttääkö tehty lisäys valmiin määritelmän. Kun varmistus on tehty, voi lapun siirtää Donen alle – ja juhlia vähän!

Daily Scrumissa eli päivittäispalaverissa käymme läpi scrum-tiimin kanssa mitä kukin on tehnyt, mitä tulee tekemään ja onko tekemisellä jotain esteitä. Samalla käydään yleensä läpi valkotaulua ja mahdollisesti vedetään uusia tehtäviä mukaan sprintiin. Päivittäispalaveri kestää maksimissaan 15 minuuttia, mutta sen jälkeen pienemmillä porukoilla voi pohtia tarkemmin joitain osa-alueita, joiden kanssa on haasteita tai haluaa muiden mielipiteen tekemäänsä työhön.

Aluksi päivittäispalaverin kanssa oli pieniä hankaluuksia, kun scrumin käytäntö oli kaikille vielä uusi. Istuimme kuitenkin pari kertaa yhdessä opettajamme Krishnan kanssa alas ja kävimme läpi scrumin käytäntöjä. Katsoimme mm. videoita havainnollistamaan kuinka scrum toteutetaan hyvin.

Päivittäispalaverit hoidamme kehitystiimin kesken Digitalents Academylla. Muissa scrumin tapahtumissa meillä on mukana projektin scrummaster Vesa Jaakola Digitalentsilta. Virallisesti scrumiin kuuluu myös tuoteomistaja. Me kuitenkin sovelsimme scrumia siten, että olemme kaikki yhdessä tuoteomistaja ja meillä oli autonomia tehdä päätöksiä ja toteuttaa verkkosivuprojekti scrumtiimissä. Aluksi se tuotti vähän hämmennystä, mutta olemme saaneet homman toimimaan.

Loppuun hieman infoa scrumin käsitteistä.

Scrumin kolme tukipilaria ovat läpinäkyvyys (transparency), tarkastelu (inspection) ja mukautuminen (adaptation).

Scrumilla on viisi tärkeää arvoa: sitoutuminen (commitment), rohkeus (courage), keskittyminen (focus), avoimuus (openness) ja kunnioitus (respect).

Sprint on scrumin ydin ja pituudeltaan se on maks. kuukauden pituinen. Se sisältää kaikki muut scrumin tapahtumat ja sen aikana tuotetaan julkaisukelpoinen lisäys tuotteeseen (increment).

Suunnittelupalaveri on sprintin ensimmäinen tapahtuma, jolloin suunnitellaan alkavan sprintin aikana tehtävä työ.

Päivittäispalaveri on päivittäinen tapahtuma, joka on kestoltaan maks. 15 minuuttia. Siinä käydään läpi mitä on tehnyt, mitä tekee ja onko tekemiselle jotain esteitä.

Scrummaster vastaa Scrumin edistämisestä ja tukemisesta sekä auttaa ymmärtämään Scrumin teorian, käytännöt ja säännöt.

Terveisin blogitiimi