Előszó
Miután elkészítettél egy oldalt olyan AI eszközökkel, mint a ChatGPT, Canva, Gemini Canvas, Claude Artifacts vagy a Sider Web Creator, a következő nagy kérdés az, hogyan kezeljük a webhostingot a GitHub Pages-en, hogy a saját domaineden keresztül látogathasd meg az oldalt. Ez az útmutató lépésről lépésre végigvezet az úton – a projekt -ban történő exportálásától kezdve a teljesen kiépített weboldalig a személyes domain alatt –, miközben feltárja a webhosting és a GitHub Pages konfiguráció rejtelmeit.
🎯 Mit fogsz megtanulni
Hogyan töltsd le helyesen és értsd meg az AI-generált projektfájlokat, mielőtt kiválasztanád a GitHub Pages webhosting munkafolyamatot.
Lépésről lépésre útmutató az oldal ingyenes telepítéséhez a GitHub Pages-en.
Hogyan vásárolj és köss össze saját egyedi domaint a GitHub Pages beállításain belül, és hogyan kapcsold össze a legjobb gyakorlatoknak megfelelő DNS rekordokkal.
Profi tippek, hogy az oldal teljesen professzionálisnak és megbízhatónak tűnjön, miután a GitHub Pages beállítás él.
📥 1. lépés: Töltsd le az oldalad a Sider Web Creator-ból
A legtöbb statikus hosting platform – beleértve a GitHub Pages-t is – tiszta build mappát vár el, ezért először össze kell gyűjtened a fájljaidat.
1.1 Projektfájlok letöltése
Miután a Web Creator befejezte az oldal generálását, kattints a Letöltés gombra a jobb felső sarokban.
Várj, amíg a rendszer becsomagolja a projektet.
kapsz egy .zip fájlt, amely készen áll a GitHub Pages-re való feltöltésre.
Bontsd ki a zip fájlt bárhol a számítógépeden.
1.2 A fájlszerkezet megértése (Fontos!)
my‑website/
├── dist/ ⭐ Éles build a **GitHub Pages**-hez
│ ├── index.html → Kezdőlap
│ ├── assets/ → Stílusok és szkriptek
│ └── …
├── src/ 📝 Forráskód mappa
├── package.json 📦 Projekt konfiguráció
└── …egyéb fájlok
Fontos emlékeztető: Csak a dist/ mappán belüli tartalom kerül közzétételre a GitHub Pages-en.
1.3 Helyi előnézeti teszt
Lépj be a dist/ mappába.
Kattints duplán az index.html fájlra.
Az oldal megnyílik a böngésződben.
Ellenőrizd, hogy minden működik-e, mielőtt feltöltenéd a GitHub Pages-re.
🚀 2. lépés: Válassz egy telepítési platformot
Bár a GitHub Pages a hős ebben az útmutatóban, itt van egy gyors összehasonlítás:
| |
|---|
🌟 GitHub Pages (az útmutató fókusza) | Teljesen ingyenes • Drag-and-drop vagy git push telepítés • Ingyenes HTTPS • Globális CDN • Egyedi domainek • Natív CI a GitHub Actions-szel |
| Globális edge hálózat • 100%-ban ingyenes • Villámgyors |
| Csiszolt felhasználói felület • Funkciókban gazdag |
📤 3. lépés: Telepítés a GitHub Pages-re (részletes útmutató)
Bár a GitHub Pages egy fejlesztői platformon belül található, gondolj rá úgy, mint egy ultramodern webhostingra, gombnyomásos kényelemmel.
3.1 Regisztráció és adattár létrehozása
Látogass el a github.com oldalra és jelentkezz be.
Kattints a + New repository gombra.
Nevezd el my‑website-nek és válaszd a Public lehetőséget (vagy a Private lehetőséget, ha fizetős csomaggal rendelkezel; a GitHub Pages mostantól támogatja a privát repókat).
Hagyd a Initialize with README jelölőnégyzetet üresen, ha később tervezed a feltöltést.
3.2 Az oldal fájljainak hozzáadása
A módszer: Drag-and-Drop feltöltés (a legjobb kezdőknek)
A repó Code fülén kattints az Add file → Upload files gombra.
Dobj be mindent a dist/ mappán belül.
Görgess le és kattints a Commit changes gombra.
B módszer: Git CLI (a legjobb fejlesztőknek)
# Az üres repó klónozása
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Build kimenet másolása
cp -r /path/to/dist/* .
# Commit & push
git add .
git commit -m "Kezdeti **GitHub Pages** telepítés"
git push origin main
Mindkét út statikus fájlokat hagy a repó gyökerében – tökéletes a GitHub Pages számára.
3.3 A GitHub Pages engedélyezése
Menj a Settings → Pages oldalra.
A Source alatt válaszd a Deploy from a branch → main (/root) lehetőséget.
Kattints a Save gombra. A GitHub Pages ~30 másodperc alatt elkészül és visszaad egy URL-t, például https://<user>.github.io/my‑website/.
3.4 A gyári URL megszerzése
Látogasd meg a linket, hogy megbizonyosodj arról, hogy minden betöltődik. A GitHub Pages automatikusan szolgál ki a globális CDN-en keresztül.
🌐 4. lépés: Vásárolj és köss össze saját domaint
4.1 Domain vásárlása
Javasolt regisztrátorok (mindegyik jól működik a GitHub Pages-zel): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Lehetőség szerint válassz egy rövid .com domaint.
4.2 A domain hozzáadása a GitHub Pages-en
Még mindig a Settings → Pages oldalon keresd meg a Custom domain lehetőséget.
Írd be a mywebsite.com vagy a www.mywebsite.com címet.
Kattints a Save gombra. A GitHub Pages automatikusan ír egy CNAME fájlt.
4.3 DNS rekordok konfigurálása
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Várj 10 perc – 24 órát a propagálódásra. Ezek az IP-címek állandóak a GitHub Pages esetében. |
4.4 HTTPS kényszerítése
Miután a DNS propagálódott, frissítsd a Pages beállításokat és kapcsold be az Enforce HTTPS funkciót. A Let’s Encrypt tanúsítványok automatikusan kiállításra kerülnek.
✨ 5. lépés: Tedd professzionálissá az oldalt
5.1 Egyedi favicon hozzáadása
Készíts egy 32×32 px ikont favicon.ico néven.
Helyezd el a repó gyökerében.
Commit és push; a GitHub Pages azonnal kiszolgálja.
5.2 Egyedi meta információk beszúrása
Szerkeszd az index.html fájlt a repó gyökerében:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analitika (opcionális)
Illessz be GA / Plausible kódrészleteket a <head> részbe; a GitHub Pages tiszteletben tartja a gyorsítótárazási fejléceket.
🔧 Hibaelhárítás
Üres oldal? Ellenőrizd, hogy az index.html a repó gyökerében van-e és az eszközútvonalak relatívak-e.
A domain visszairányít a .github.io címre? Ellenőrizd kétszer az A/CNAME rekordokat és várd meg a teljes TTL-t.
A HTTPS kapcsoló le van tiltva? A DNS még nem helyes; ellenőrizd a dig segítségével.
🎉 Összefoglalás
Gratulálok! Most már:
✅ Sikeresen letöltötted az AI-generált weboldaladat, amely készen áll a GitHub Pages hostingra.
✅ Ingyenesen telepítetted a GitHub Pages-re.
✅ Biztosítottad a saját egyedi domainnevedet.
✅ Csiszoltad a GitHub Pages környezetet, hogy teljesen professzionálisnak tűnjön.
Az oldalad most:
🌐 Online 24/7, a GitHub Pages CDN-jével.
🏷️ Professzionális domain alatt szolgál ki.
🔒 HTTPS titkosítással védett.
⚡ Globálisan gyors a GitHub Pages edge node-jainak köszönhetően.
🗝️ Teljesen a te tulajdonodban és irányításod alatt áll.
💡 Következő lépések
SEO optimalizálás: adj hozzá célzott kulcsszavakat és meta leírásokat, hogy növeld a keresési helyezéseket a GitHub Pages beállításodhoz.
Közösségi megosztás: integrálj megosztás gombokat a főbb platformokhoz.
Folyamatos frissítések: rendszeresen commit-elj változtatásokat; a GitHub Pages automatikusan újratelepíti.
Biztonsági mentések: engedélyezd a GitHub adattár védelmét vagy tükrözd az adattárat.
Most már igazi weboldal tulajdonos vagy – oszd meg a GitHub Pages linket és mutasd meg alkotásodat a világnak!
