6. témakör · Eszközök és haladó témák · 26. fejezet
Elkészült a weboldalad, és szeretnéd megmutatni másoknak is? A GitHub Pages ingyen közzéteszi egy repó statikus weboldalát, saját webcímmel:
pár kattintás a beállításokban, és minden git push után magától frissül. Ebben a fejezetben bekapcsolod, megtanulod elkerülni a
leggyakoribb hibákat (üres oldal, hiányzó stílus, 404), és saját hibaoldalt is készítesz.
A GitHub Pages a GitHub ingyenes statikus weboldal-tárhelye: a repód egyik ágának (és mappájának) fájljait kiszolgálja a weben. A böngésző pontosan azt kapja, ami a repóban van: HTML, CSS, JavaScript, képek, betűtípusok.
Ingyenes csomagban a Pages nyilvános repóból működik, és maga az oldal mindig nyilvános. Ne tegyél rá semmi olyat, amit nem mutatnál meg bárkinek.
Közzétehető a GitHub Pages-szel?
index.html — ez lesz a kezdőoldal. (README.md-ből is készül oldal, de saját weboldalhoz index.html kell.)A háttérben egy automatikus folyamat (pages build and deployment) építi és teszi közzé az oldalt; ezt az Actions fülön látod (27. fejezet). A Source: GitHub Actions akkor kell, ha az oldalt előbb le kell fordítani (pl. egy React alkalmazásnál).
| Fajta | Repó neve | Webcím |
|---|---|---|
| Projektoldal (bármely repó) | anna-kovacs/portfolio | https://anna-kovacs.github.io/portfolio/ |
| Felhasználói oldal (egy lehet) | anna-kovacs/anna-kovacs.github.io | https://anna-kovacs.github.io/ |
A projektoldal egy almappában van a domainen (/portfolio/), ezért a gépeden működő hivatkozás a GitHub Pages-en elromolhat:
| Hivatkozás | Hová mutat a Pages-en? | |
|---|---|---|
href="stilus.css" | …/portfolio/stilus.css | ✓ relatív: mindig jó |
href="./kepek/logo.png" | …/portfolio/kepek/logo.png | ✓ relatív |
href="/stilus.css" | …github.io/stilus.css — a repódon kívül | ✗ gyökérhez képest |
src="kepek/Logo.PNG" (a fájl: logo.png) | nincs ilyen fájl | ✗ kis- és nagybetű |
href="kepek\galeria.html" | érvénytelen út | ✗ Windows-os \ jel |
src="C:\Users\anna\kep.jpg" | a te gépedre — más nem éri el | ✗ helyi útvonal |
A Windows nem különbözteti meg a kis- és nagybetűt (Logo.PNG = logo.png), a GitHub Pages szervere viszont igen. Ezért a gépeden minden
jónak tűnik, a weben mégis hiányzik a kép. Tipp: fájlnevekben csak kisbetű, szóköz és ékezet nélkül (galeria-2026.jpg).
A repó (anna-kovacs/portfolio) fájljai: index.html, stilus.css, projektek.html,
kapcsolat.html, kepek/logo.png, kepek/galeria.html. Javítsd ki az index.html hivatkozásait úgy, hogy mind működjön a GitHub Pages-en!
404.html, a nem létező címekre ezt kapja a látogató a GitHub általános hibaoldala helyett._valami/) ilyenkor kimaradnak; ha kellenek, tegyél a gyökérbe egy üres .nojekyll fájlt.www.pelda.hu), a domain szolgáltatójánál pedig egy DNS-bejegyzés mutat a GitHubra.
A GitHub ilyenkor egy CNAME fájlt tesz a repóba. Az Enforce HTTPS maradjon bekapcsolva.| Tünet | Ok | Megoldás |
|---|---|---|
| 404 — There isn't a GitHub Pages site here. | a Pages nincs bekapcsolva, vagy rossz a cím | Settings → Pages; ellenőrizd a felhasználó- és repónevet |
| 404 — File not found a kezdőlapon | nincs index.html a kiválasztott mappában (vagy Index.html a neve) | kisbetűs index.html a gyökérbe (vagy a /docs-ba) |
| az oldal stílus nélkül jelenik meg | href="/stilus.css", rossz kis-/nagybetű | relatív útvonal: href="stilus.css" |
| hiányzó képek | kis-/nagybetű, \ jel, helyi C:\ útvonal, a kép nincs commitolva | javítsd az utat, és ellenőrizd a git status-t |
| a módosítás nem látszik | nem push-oltál, más ágra push-oltál, vagy még fut a közzététel, vagy gyorsítótár | git push, várj egy percet, Ctrl + F5 |
| nem kapcsolható be | privát repó ingyenes csomagban | tedd nyilvánossá (ha nincs benne titok) |
Anna portfóliója (anna-kovacs/portfolio) már a GitHubon van, és le is van klónozva. Tedd közzé, derítsd ki, miért hiányzik a stílus, javítsd, és készíts saját 404-es oldalt.
Lent három eszköz: a GitHub weboldala, egy böngésző a közzétett oldalhoz, és a terminál.
⭐ alap · ⭐⭐ haladó · ⭐⭐⭐ kihívás
Tedd közzé egy korábbi HTML-oldaladat GitHub Pages-en. Küldd el a címét egy társadnak, és kérd meg, hogy telefonon is nézze meg.
Módosíts valamit az oldalon a gépeden, commitold és push-old. Mérd le, mennyi idő múlva jelenik meg a változás, és nézd meg az Actions fülön a közzétételi folyamatot.
Hozd létre a felhasználói oldaladat: egy <felhasználóneved>.github.io nevű repót, benne egy bemutatkozó index.html-lel, amely a projektjeid oldalaira linkel.
Szándékosan rontsd el egy kép nevét (nagybetű), töltsd fel, és nézd meg a weben. Javítsd a git mv paranccsal (git mv Kep.PNG kep.png).
Tedd a weboldalt egy docs mappába, és állítsd át a Pages-t a /docs mappára. Mi a haszna, ha a repó gyökerében más is van (pl. forráskód, README)?
Készíts saját 404.html-t, amely a stíluslapodat használja, és visszalinkel a kezdőoldalra. Próbáld ki egy nem létező címmel.
Egy JavaScriptes kvízjátékot (pl. egy korábbi órai munkát) tegyél közzé, és a README-be írd bele a Pages-címet, valamint egy képernyőképet. A repó About részénél is add meg a webcímet.
Az egyválasztós kérdéseknél kattints a válaszra. A többválasztósaknál jelöld be az összes helyeset, majd nyomd meg az Ellenőrzés gombot.
| Fogalom | Jelentés |
|---|---|
| GitHub Pages | a GitHub ingyenes statikus weboldal-tárhelye egy repó fájljaiból |
| statikus weboldal | kész fájlokból (HTML, CSS, JS, kép) álló oldal, szerveroldali program nélkül |
| Deploy from a branch | közzététel egy ág gyökeréből vagy /docs mappájából |
| projektoldal / felhasználói oldal | …github.io/repó/ / felhasználó.github.io repóból a domain gyökerén |
| relatív útvonal | a hivatkozó fájlhoz képest megadott út (stilus.css, kepek/logo.png) |
| 404.html | saját hibaoldal a nem létező címekre |
| Jekyll / .nojekyll | a Pages beépített oldalgenerátora / üres fájl, amely kikapcsolja |
| custom domain, CNAME | saját domain név az oldalhoz / az ehhez szükséges fájl a repóban |
index.html.https://felhasználó.github.io/repó/; a felhasználó.github.io repó a domain gyökerére kerül.\ jelet és helyi útvonalat.404.html; ha a régit látod: Ctrl + F5.A közzétételt a háttérben egy automatikus folyamat végzi. A következő fejezetben ilyen folyamatokat te is írsz: jön a GitHub Actions.