Uvod
Nakon izrade stranice pomoću AI alata kao što su ChatGPT, Canva, Gemini Canvas, Claude Artifacts ili Sider Web Creator, sljedeće veliko pitanje je kako upravljati web hostingom na GitHub Pages kako biste mogli posjetiti stranicu putem vlastite domene. Ovaj vodič vas korak po korak vodi kroz cijeli proces—od izvoza projekta u Sider Web Creator do dobivanja potpuno funkcionalne web-stranice pod vašom osobnom domenom—dok usput demistificira web hosting i konfiguraciju GitHub Pages.
🎯 Što ćete naučiti
Kako ispravno preuzeti i razumjeti datoteke projekta generirane umjetnom inteligencijom prije odabira tijeka rada web‑hostinga GitHub Pages.
Upute korak po korak za besplatno postavljanje stranice na GitHub Pages.
Kako kupiti i povezati vlastitu prilagođenu domenu unutar postavki GitHub Pages i povezati je s DNS zapisima najbolje prakse.
Profesionalni savjeti kako web-stranica izgleda potpuno profesionalno i pouzdano nakon što je postavljanje GitHub Pages aktivno.
📥 Korak 1: Preuzmite svoju stranicu iz Sider Web Creator
Većina platformi za statički hosting—uključujući GitHub Pages—očekuje čistu mapu za izradu, stoga prvo morate prikupiti svoje datoteke.
1.1 Preuzmite datoteke projekta
Nakon što Web Creator završi s generiranjem stranice, kliknite gumb Preuzmi u gornjem desnom kutu.
Pričekajte dok sustav pakira vaš projekt.
Primit ćete .zip datoteku spremnu za prijenos na GitHub Pages.
Izdvojite zip datoteku bilo gdje na svom računalu.
1.2 Razumijevanje strukture datoteka (Važno!)
my‑website/
├── dist/ ⭐ Produkcijska verzija za **GitHub Pages**
│ ├── index.html → Početna stranica
│ ├── assets/ → Stilovi i skripte
│ └── …
├── src/ 📝 Mapa izvornog koda
├── package.json 📦 Konfiguracija projekta
└── …ostale datoteke
Ključna napomena: Samo se sadržaj unutar dist/ objavljuje na GitHub Pages.
1.3 Lokalni test pregleda
Uđite u mapu dist/.
Dvaput kliknite index.html.
Stranica se otvara u vašem pregledniku.
Provjerite radi li sve prije nego što pošaljete na GitHub Pages.
🚀 Korak 2: Odaberite platformu za postavljanje
Iako je GitHub Pages glavni junak ovog vodiča, evo brze usporedbe:
| |
|---|
🌟 GitHub Pages (fokus ovog vodiča) | Potpuno besplatno • Postavljanje povlačenjem i ispuštanjem ili git push • Besplatni HTTPS • Globalni CDN • Prilagođene domene • Izvorni CI s GitHub Actions |
| Globalna edge mreža • 100 % besplatno • Izuzetno brzo |
| Dotjerano korisničko sučelje • Bogato značajkama |
📤 Korak 3: Postavljanje na GitHub Pages (Detaljan vodič)
Iako GitHub Pages živi unutar developerske platforme, zamislite ga kao ultramoderan web hosting s praktičnošću pritiskom na gumb.
3.1 Registrirajte se i stvorite repozitorij
Posjetite github.com i prijavite se.
Kliknite + New repository.
Nazovite ga my‑website i odaberite Public (ili Private ako imate plaćeni plan; GitHub Pages sada podržava privatne repozitorije).
Ostavite Initialize with README neoznačenim ako planirate kasnije poslati.
3.2 Dodajte datoteke svoje stranice
Metoda A: Prijenos povlačenjem i ispuštanjem (najbolje za početnike)
U kartici Code repozitorija kliknite Add file → Upload files.
Ispustite sve unutar dist/.
Pomaknite se prema dolje i kliknite Commit changes.
Metoda B: Git CLI (najbolje za programere)
# Klonirajte prazan repozitorij
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Kopirajte izlaznu verziju
cp -r /path/to/dist/* .
# Commit & push
git add .
git commit -m "Početno postavljanje **GitHub Pages**"
git push origin main
Bilo koji put vas ostavlja sa statičkim datotekama u korijenu repozitorija—savršeno za GitHub Pages.
3.3 Omogućite GitHub Pages
Idite na Settings → Pages.
Pod Source odaberite Deploy from a branch → main (/root).
Kliknite Save. GitHub Pages se gradi za ~30 s i vraća URL poput https://<user>.github.io/my‑website/.
3.4 Preuzmite svoj zadani URL
Posjetite vezu kako biste potvrdili da se sve učitava. GitHub Pages automatski poslužuje putem globalnog CDN-a.
🌐 Korak 4: Kupite i povežite vlastitu domenu
4.1 Kupite domenu
Predloženi registrari (svi se dobro slažu s GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Odaberite kratku .com gdje je to moguće.
4.2 Dodajte domenu u GitHub Pages
Još uvijek u Settings → Pages, pronađite Custom domain.
Unesite mywebsite.com ili www.mywebsite.com.
Kliknite Save. GitHub Pages automatski piše CNAME datoteku.
4.3 Konfigurirajte DNS zapise
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Pričekajte 10 minuta–24 sata za propagaciju. Ove IP adrese su konstantne za GitHub Pages. |
4.4 Omogućite HTTPS
Nakon što se DNS propagira, osvježite postavke Pages i prebacite Enforce HTTPS. Let’s Encrypt certifikati se izdaju automatski.
✨ Korak 5: Učinite da stranica izgleda profesionalno
5.1 Dodajte prilagođenu Favicon
Pripremite ikonu 32×32 px pod nazivom favicon.ico.
Postavite je u korijen repozitorija.
Commit i push; GitHub Pages je odmah poslužuje.
5.2 Umetnite prilagođene meta informacije
Uredite index.html u korijenu repozitorija:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analitika (izborno)
Zalijepite GA / Plausible isječke unutar <head>; GitHub Pages poštuje zaglavlja predmemoriranja.
🔧 Rješavanje problema
Prazna stranica? Potvrdite da je index.html u korijenu repozitorija i da su putanje imovine relativne.
Domena se vraća na .github.io? Dvaput provjerite A/CNAME zapise i pričekajte puni TTL.
HTTPS preklopnik onemogućen? DNS još nije ispravan; provjerite s dig.
🎉 Sažetak
Čestitamo! Sada imate:
✅ Uspješno ste preuzeli svoju web-stranicu generiranu umjetnom inteligencijom spremnu za hosting na GitHub Pages.
✅ Besplatno ste je postavili na GitHub Pages.
✅ Osigurali ste vlastitu prilagođenu domenu.
✅ Dotjerali ste okruženje GitHub Pages da izgleda potpuno profesionalno.
Vaša stranica je sada:
🌐 Online 24/7, pokreće je GitHub Pages CDN.
🏷️ Poslužuje se pod profesionalnom domenom.
🔒 Zaštićena HTTPS enkripcijom.
⚡ Globalno brza zahvaljujući edge čvorovima GitHub Pages.
🗝️ U potpunosti u vašem vlasništvu i pod vašom kontrolom.
💡 Sljedeći koraci
SEO optimizacija: dodajte ciljane ključne riječi i meta opise kako biste poboljšali rangiranje pretraživanja za svoju postavku GitHub Pages.
Dijeljenje na društvenim mrežama: integrirajte gumbe za dijeljenje za glavne platforme.
Kontinuirana ažuriranja: redovito commitajte promjene; GitHub Pages automatski ponovno postavlja.
Sigurnosne kopije: omogućite zaštitu GitHub repozitorija ili zrcalite repozitorij.
Sada ste pravi vlasnik web-stranice—podijelite svoju vezu GitHub Pages i pokažite svoju kreaciju svijetu!
