Fő tartalom
Programozás
Tantárgy/kurzus: Programozás > 2. témakör
5. lecke: Webfejlesztői eszközökWeboldal üzemeltetése Githubon
A Github cég „kód repozitóriumokat” üzemeltet, kódgyűjteményeket projektek számára. Sok kód repozitórium „nyílt forráskódú”, ami azt jelenti, hogy nyilvánosan elérhető az egész világ számára. Ez nagyszerű dolog, mert így a programozók tanulnak egymástól és egymás munkájára tudnak építeni! A Khan Academynek is van néhány nyílt forráskódú repozitóriuma. A kód repozitóriumok többféle kódot is tartalmazhatnak, nem csak HTML-t és CSS-t – bármilyen kódot, ami szükséges a projekt működéséhez.
Miért beszélünk erről? Azért, mert a Github-nak van egy funkciója, az ún. GitHub Pages, amivel egyszerűen és ingyenesen készíthetsz több fájlból álló weboldalakat, ami a
yourusername.github.io
címen érhető el.Megjegyzés: a Khan Academy nem áll kapcsolatban a Github-bal. Kérjük, hogy tekintsd át a Github Felhasználási feltételeit és egyéb szabályzatait, mielőtt regisztrálsz egy fiókot, főleg ha 13 év alatti vagy.
Github fiók regisztrációja
Keresd fel a github.com oldalt! Látni fogsz egy regisztrációs űrlapot a főoldalon. (Ha nem látsz ilyet, akkor gratulálunk, már van fiókod! Ugorj a 2. lépésre!).
Amikor felhasználónevet választasz, vedd figyelembe, hogy a név publikusan látszani fog az interneten, és a
yourusername.github.io
weboldalad URL-jében is szerepelni fog. Vannak, akik adatvédelmi okokból szeretnek becenevet vagy vicces nevet választani a valódi nevük helyett. Rajtad múlik, hogy döntesz.Második lépésként válaszd az ingyenes tervet (angolul free plan). Ha publikus weboldal repozitóriumot szeretnél, akkor nem kell fizetős változatot használnod. (Bármikor változtathatsz ezen később, ha termékeny Github felhasználó leszel és szükséged lesz privát repozitóriumra!)
Harmadik lépésként válaszolj a kérdőív kérdéseire, vagy ugord át ezt a lépést:
Miután kitöltötted az új fiók űrlapot, ellenőrizd az e-mail fiókodat és kattints a linkre, hogy megerősítsd az e-mail címedet:
Github projekt létrehozása a weboldaladhoz
Miután megerősítetted az e-mail címedet, látni fogod a kezdőlapot. Kattints a „Start a project” gombra.
A projektlétrehozási oldalon meg kell adnod a projekt nevét. A projekt neve legyen pontosan az, hogy „YOUR_USERNAME.github.io”. Ez jelzi a Github-nak, hogy egy speciális weboldal projektet hozol épp létre, és tudni fogja, hogy a fájljaidat erre, a más felhasználók által is látható URL-re kell feltöltenie, minden egyes változtatásnál. Mivel az én felhasználónevem „PamelaFoxBot", az én projektem neve „PamelaFoxBot.github.io” lett:
Gratulálunk, elkészült az új projekted! De még nincsenek benne fájlok. Az első fájlt gyorsan létrehozhatod, ha rákattintasz a „README” linkre.
Most már a Github fájlszerkesztő felületet látod, a
README.md
nevű fájllal. Változtasd meg a fájl nevét README.md
-ről index.html
-re! A szerver arra számít, hogy a weboldal mappában a fő fájl neve index.html
. Az index oldalad linkelhet majd más oldalakra is.Töröld a fájlszerkesztő aktuális tartalmát, cseréld ki a weboldalad HTML kódjára! Kimásolhatod és beillesztheted a HTML kódot valamelyik Khan Academy projektedből, vagy egy olyan projektből, amit a számítógépeden fejlesztesz.
Görgess le az oldalon addig, amíg meg nem találod a Commit area-t (commit terület), és kattints a „Commit new file”-ra (Fájl beküldése committal)! Minden alkalommal, amikor egy fájlnak létrehozod egy új verzióját, egy „commit”-ot hozol létre, ami eltárolja a fájl verziótörténetét. Minden commitnak van egy üzenete, ami leírja, mi változott. A Github javasol egy alapértelmezett üzenetet (ebben az esetben ez a „Create index.html”), de ezt felülírhatod azzal, hogy begépelsz a beviteli mezőbe.
Írd be a böngésződbe, hogy YOUR_USERNAME.github.io, és frissítsd újra mindaddig, míg a weboldalad be nem töltődik.
1-10 percig tart a Githubnak feltölteni a projekted változtatásait a felhasználó weboldalára, ezért türelmesnek kell lenned. Emellett lehet, hogy „teljes frissítés”-t kell az oldalra végrehajtani (tartsd a Shift gombot frissítéskor) ahhoz, hogy a böngésződ gyorsítótárát kitöröld.
Több fájlból álló weboldalak feltöltése GitHubra
Néhányan közületek már valószínűleg dolgoztak több fájlból álló weboldalakkal a Khan Academyn kívül, asztali szerkesztőt használva. A weboldalatok lehet, hogy több HTML, CSS, JS és képfájlból is állt.
Ha szeretnéd feltölteni egy ilyen korábbi weboldaladat Githubra, ne aggódj, nem kell minden egyes fájlt egyesével kimásolni és beilleszteni! Elég unalmas is lenne. Van rá egy jobb mód...
Nyisd meg a projektet Github-on és kattints az „Upload files” (Fájlok feltöltése) gombra.
Látni fogsz egy Github fájlfeltöltő felületet. Válaszd ki a fájlokat húzd-és-ejtsd módon, vagy használd a fájlválasztót:
Keresd meg a projekt mappádat, és válaszd ki azokat a fájlokat, amiket fel szeretnél tölteni.
Általában célszerű minden olyan fájlt feltölteni, ami változott. Ha bizonytalan vagy, csak tölts fel mindent. A Github olyan algoritmust használ, ami meg tudja állapítani, hogy mi változott és mi nem, és csak azokhoz a fájlokhoz készít új verziót, amik megváltoztak.
Írj be egy új commit üzenetet és kattints a „Commit changes” (Változások commitolása) gombra.
Frissítsd a weboldaladat, hogy lásd a változásokat!
Ne feledd, hogy 10 percbe is telhet, mire a változások érvénybe lépnek. A türelem rózsát terem. 😊
Ezért a legjobb, ha a saját asztali környezetedben fejlesztesz és tesztelsz, és csak akkor töltöd fel Github-ra (vagy bármilyen másik szolgáltatóhoz) amikor már elégedett vagy a saját gépeden azzal, ahogyan a weboldalad fest.
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.