GitHub – lépésről lépésre útmutató

1. Mi a GitHub és mire jó?

A GitHub a világ legnagyobb kódtároló és együttműködési platformja. Ingyenes fiókkal:

• fájlokat (kódot, dokumentumokat, képeket) tárolhatsz a felhőben,
• minden módosításról megőrzi az előzményeket (verziókövetés) – bármikor visszanézheted vagy visszaállíthatod egy fájl korábbi állapotát,
• egy linkkel megoszthatod a munkádat bárkivel, vagy privátban tarthatod,
• többen is dolgozhattok ugyanazon a projekten,
• a GitHub Pages szolgáltatással a feltöltött HTML oldalaidat ingyenes weboldalként is közzéteheted (8. fejezet).

A fájlok ún. repository-kban ("repó", tároló) vannak – egy repository lényegében egy projektmappa a saját al-mappáival és fájljaival.

2. Regisztráció a github.com oldalon

1. Nyisd meg böngészőben: https://github.com
2. Kattints a jobb felső sarokban a Sign up gombra.
3. Add meg az e-mail címedet, majd tovább.
4. Adj meg egy jelszót (legalább 15 karakter, VAGY legalább 8 karakter számmal és kisbetűvel vegyesen).
5. Válassz felhasználónevet (username). Ez látszik majd a címben is, pl. github.com/arpasattila. Csak betű, szám és kötőjel lehet benne; ha foglalt, a rendszer jelzi.
6. Válaszolj, hogy kérsz-e e-mailes hírlevelet (kihagyható).
7. Oldd meg a robot-ellenőrzést (kirakós/kép-feladat), majd Create account.
8. A GitHub egy ellenőrző kódot küld e-mailben – nyisd meg a leveledet, írd be a kódot.
9. Az első kérdéseket átugorhatod a Skip linkkel, és az ingyenes (Free) csomagot választhatod.

3. Bejelentkezés és a felület áttekintése

1. https://github.com/login – felhasználónév (vagy e-mail) + jelszó, Sign in.
2. A nyitóoldal (Dashboard) bal oldalán a repository-jaid listája, jobb felül a + gomb (új repository), és a profilképed (beállítások, kijelentkezés).
3. A saját oldalad: github.com/FELHASZNALONEVED – itt látja más is a nyilvános repóidat.

4. Repository (tároló) létrehozása

1. Jobb felül kattints a + jelre, majd New repository.
2. Repository name: a projekt neve, pl. utjehaholiday-weboldal (szóköz helyett kötőjel).
3. Description (nem kötelező): rövid leírás.
4. Láthatóság:

5. Pipáld be az "Add a README file" opciót – így a repó rögtön nem lesz üres (üres repóba nem lehet böngészőből feltölteni).
6. Create repository gomb – kész.

5. Fájlok feltöltése böngészőből

1. Nyisd meg a repository-t, majd kattints: Add file > Upload files.
2. Az egérrel húzd be a fájlokat vagy egész mappákat a szaggatott keretbe (drag & drop) – a mappaszerkezet megmarad. Vagy kattints a "choose your files" linkre és tallózz.
3. Lent a Commit changes résznél írj egy rövid megjegyzést (pl. "Weboldal első feltöltése").
4. Kattints a Commit changes gombra.

6. Fájlok szerkesztése, átnevezése, törlése, mappák létrehozása

Szerkesztés

1. Kattints a fájlra a repóban, majd jobb felül a ceruza ikonra (Edit this file).
2. Szerkeszd a tartalmat, majd zöld Commit changes gomb + megjegyzés.

Fájl átnevezése (pl. index.html-re)

Gyakori eset: a kezdőoldalt nem index.html néven töltötted fel (hanem pl. kezdolap.html vagy oldal.htm), márpedig a GitHub Pages és általában minden webszerver az index.html nevű fájlt tekinti kezdőoldalnak. Átnevezés böngészőből:

1. A repóban kattints a fájlra, amit át akarsz nevezni.
2. Jobb felül kattints a ceruza ikonra (Edit this file) – ugyanaz a gomb, mint szerkesztésnél.
3. A lap tetején, a tartalom fölött látod a fájlnév mezőt – írd át a nevet, pl. kezdolap.html → index.html.
4. A tartalomhoz nem kell nyúlni. Kattints a zöld Commit changes gombra, írd be a megjegyzést (pl. "átnevezés index.html-re"), majd erősítsd meg.

Törlés

1. Nyisd meg a fájlt, majd a ceruza melletti "..." menü > Delete file, és Commit changes.

Új mappa létrehozása

1. Add file > Create new file.
2. A fájlnév mezőbe írd: mappanev/fajlnev.txt – a / jel hatására a GitHub létrehozza a mappát is.

Korábbi verziók megtekintése

A repó főoldalán a Commits (óra ikon / "xx commits") linkre kattintva látod az összes módosítást időrendben.

7. Megosztás másokkal

a) Link megosztása (nyilvános repó)

1. Másold ki a böngésző címsorából a repó címét, pl. https://github.com/FELHASZNALONEV/REPONEV, és küldd el bárkinek.
2. A címzett regisztráció nélkül megnézheti, és a zöld Code gomb > Download ZIP menüponttal az egészet letöltheti egyetlen ZIP fájlként.

b) Egyetlen fájl megosztása

1. Nyisd meg a fájlt, és a Raw gombbal kapsz egy közvetlen (nyers) linket, ami csak a fájl tartalmát adja.

c) Munkatárs meghívása (privát repóhoz is)

1. A repóban: Settings > Collaborators > Add people.
2. Írd be a meghívott GitHub-felhasználónevét vagy e-mail címét.
3. Ő e-mailben kap meghívót; elfogadás után látja (és szerkesztheti is) a repót.

d) Láthatóság módosítása utólag

Settings > lap alján Danger Zone > Change repository visibility.

8. Weboldal közzététele: GitHub Pages

Miért fontos a GitHub Pages?

A GitHub Pages a GitHub ingyenes webtárhely-szolgáltatása: a repódba feltöltött HTML/CSS/JS fájlokat valódi, bárki által megnyitható weboldalként szolgálja ki, saját internetcímmel. Ez azért hasznos, mert:

• nem kell tárhelyet bérelni – teljesen ingyenes, még saját domain is ráköthető,
• a link megosztásával bárki böngészőben, működő weboldalként látja a munkádat, nem csak fájllistaként,
• ha frissíted a fájlokat a repóban, a weboldal is automatikusan frissül (1-2 percen belül),
• ideális bemutató oldalakhoz, portfólióhoz, oktatási anyagokhoz, tesztváltozatokhoz.

Bekapcsolás lépésről lépésre

1. Nyisd meg a repository-t, és győződj meg róla, hogy a kezdőoldal fájlja index.html néven van a repó gyökerében (ha nem, nevezd át a 6. fejezet szerint).
2. Kattints fent a Settings (fogaskerék) fülre.
3. A bal oldali menüben kattints a Pages menüpontra.
4. A Build and deployment résznél a Source legyen: Deploy from a branch.
5. A Branch résznél válaszd ki: main (a legördülőből), mappa: / (root), majd Save.
6. Várj 1-2 percet – a GitHub a háttérben "felépíti" az oldalt.

A kapott link megkeresése, megtekintése, másolása, megosztása

1. Menj vissza (vagy frissítsd az oldalt): Settings > Pages.
2. A lap tetején megjelenik egy zöld/kék sáv: "Your site is live at" és alatta a cím, ilyen formában:
   https://FELHASZNALONEV.github.io/REPONEV/
3. Megtekintés: kattints a cím melletti Visit site gombra – új fülön megnyílik a kész weboldal. Ellenőrizd, hogy minden kép és stílus betöltődik-e.
4. Másolás: kattints a link melletti másolás ikonra (két egymáson fekvő lap), vagy jelöld ki a címet és Ctrl+C.
5. Megosztás: a kimásolt linket illeszd be (Ctrl+V) e-mailbe, Viberbe, Facebookra stb. – aki megkapja, annak nem kell GitHub fiók, egyszerűen megnyílik neki a weboldal böngészőben, mobilon is.

9. Gyakori kérdések és hibák