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

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google photo

Olet kommentoimassa Google -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s