Predgovor
Nakon izrade sajta pomoću AI alata kao što su ChatGPT, Canva, Gemini Canvas, Claude Artifacts ili Sider Web Creator, sledeće veliko pitanje je kako upravljati veb hostingom na GitHub Pages kako biste mogli da posetite sajt preko sopstvenog domena. Ovaj vodič vas vodi korak po korak kroz ceo proces—od izvoza projekta u Sider Web Creator do dobijanja potpuno funkcionalnog veb sajta pod vašim ličnim domenom—uz demistifikaciju veb hostinga i konfiguracije GitHub Pages usput.
🎯 Šta ćete naučiti
Kako pravilno preuzeti i razumeti datoteke projekta generisane pomoću veštačke inteligencije pre nego što odaberete radni tok veb‑hostinga GitHub Pages.
Uputstva korak po korak za besplatno postavljanje sajta na GitHub Pages.
Kako kupiti i povezati sopstveni prilagođeni domen unutar podešavanja GitHub Pages i povezati ga sa DNS zapisima najbolje prakse.
Profesionalni saveti kako da sajt izgleda potpuno profesionalno i pouzdano nakon što se aktivira GitHub Pages podešavanje.
Većina platformi za statički hosting—uključujući GitHub Pages—očekuje čistu fasciklu za izgradnju, tako da prvo morate da prikupite svoje datoteke.
1.1 Preuzmite datoteke projekta
Nakon što Web Creator završi generisanje sajta, kliknite na dugme Download u gornjem desnom uglu.
Sačekajte dok sistem pakuje vaš projekat.
Dobićete .zip datoteku spremnu za otpremanje na GitHub Pages.
Ekstrahujte zip datoteku bilo gde na svom računaru.
1.2 Razumevanje strukture datoteka (Važno!)
my‑website/
├── dist/ ⭐ Produkcijska verzija za **GitHub Pages**
│ ├── index.html → Početna stranica
│ ├── assets/ → Stilovi i skripte
│ └── …
├── src/ 📝 Fascikla sa izvornim kodom
├── package.json 📦 Konfiguracija projekta
└── …ostale datoteke
Ključni podsetnik: Samo sadržaj unutar dist/ se objavljuje na GitHub Pages.
1.3 Lokalni test pregleda
Uđite u fasciklu dist/.
Dvaput kliknite na index.html.
Sajt se otvara u vašem pregledaču.
Proverite da li sve radi pre nego što pošaljete na GitHub Pages.
🚀 Korak 2: Izaberite platformu za postavljanje
Iako je GitHub Pages heroj ovog vodiča, evo brzog poređenja:
| |
|---|
🌟 GitHub Pages (fokus ovog vodiča) | Potpuno besplatno • Postavljanje prevlačenjem i otpuštanjem ili git push • Besplatan HTTPS • Globalni CDN • Prilagođeni domeni • Izvorni CI sa GitHub Actions |
| Globalna edge mreža • 100% besplatno • Izuzetno brzo |
| Dotjerani UI • Bogat funkcijama |
📤 Korak 3: Postavljanje na GitHub Pages (Detaljan vodič)
Iako GitHub Pages živi unutar developerske platforme, smatrajte ga ultra‑modernim veb hostingom sa praktičnošću pritiska na dugme.
3.1 Registrujte se i kreirajte repozitorijum
Posetite github.com i prijavite se.
Kliknite na + New repository.
Nazovite ga my‑website i izaberite Public (ili Private ako imate plaćeni plan; GitHub Pages sada podržava privatne repozitorijume).
Ostavite Initialize with README neoznačeno ako planirate da pošaljete kasnije.
3.2 Dodajte datoteke svog sajta
Metod A: Otpremanje prevlačenjem i otpuštanjem (najbolje za početnike)
U kartici Code repozitorijuma kliknite na Add file → Upload files.
Otpustite sve unutar dist/.
Pomerite se nadole i kliknite na Commit changes.
Metod B: Git CLI (najbolje za programere)
# Klonirajte prazan repozitorijum
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 "Initial **GitHub Pages** deploy"
git push origin main
Bilo koji put vas ostavlja sa statičkim datotekama u korenu repozitorijuma—savršeno za GitHub Pages.
3.3 Omogućite GitHub Pages
Idite na Settings → Pages.
Pod Source izaberite Deploy from a branch → main (/root).
Kliknite na Save. GitHub Pages se gradi za ~30 s i vraća URL kao što je https://<user>.github.io/my‑website/.
3.4 Preuzmite svoju podrazumevanu URL adresu
Posetite vezu da biste potvrdili da se sve učitava. GitHub Pages automatski služi putem globalnog CDN-a.
🌐 Korak 4: Kupite i povežite sopstveni domen
4.1 Kupite domen
Predloženi registrari (svi se lepo slažu sa GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Izaberite kratak .com gde je to moguće.
4.2 Dodajte domen u GitHub Pages
I dalje u Settings → Pages, pronađite Custom domain.
Unesite mywebsite.com ili www.mywebsite.com.
Kliknite na Save. GitHub Pages automatski piše CNAME datoteku.
4.3 Konfigurišite DNS zapise
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Sačekajte 10 min–24 h za propagaciju. Ove IP adrese su konstantne za GitHub Pages. |
4.4 Primenite HTTPS
Nakon što se DNS propagira, osvežite podešavanja Pages i prebacite Enforce HTTPS. Let’s Encrypt sertifikati se izdaju automatski.
✨ Korak 5: Učinite da sajt izgleda profesionalno
5.1 Dodajte prilagođenu ikonicu favikona
Pripremite ikonu od 32×32 px pod nazivom favicon.ico.
Postavite je u koren repozitorijuma.
Commit i push; GitHub Pages je odmah služi.
5.2 Umetnite prilagođene meta informacije
Uredite index.html u korenu repozitorijuma:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analitika (opciono)
Nalepite GA / Plausible isečke unutar <head>; GitHub Pages poštuje zaglavlja keširanja.
🔧 Rešavanje problema
Prazna stranica? Potvrdite da je index.html u korenu repozitorijuma i da su putanje do sredstava relativne.
Domen se vraća na .github.io? Dvaput proverite A/CNAME zapise i sačekajte pun TTL.
HTTPS preklopnik je onemogućen? DNS još nije ispravan; proverite pomoću dig.
🎉 Rezime
Čestitamo! Sada imate:
✅ Uspešno ste preuzeli svoj veb sajt generisan pomoću veštačke inteligencije, spreman za hosting na GitHub Pages.
✅ Postavili ste ga besplatno na GitHub Pages.
✅ Osigurali ste svoj prilagođeni domen.
✅ Dotjerali ste GitHub Pages okruženje da izgleda potpuno profesionalno.
Vaš sajt je sada:
🌐 Na mreži 24/7, pokreće ga GitHub Pages CDN.
🏷️ Služi se pod profesionalnim domenom.
🔒 Zaštićen HTTPS enkripcijom.
⚡ Globalno brz zahvaljujući GitHub Pages edge čvorovima.
🗝️ U potpunosti u vašem vlasništvu i pod vašom kontrolom.
💡 Sledeći koraci
SEO optimizacija: dodajte ciljane ključne reči i meta opise da biste poboljšali rangiranje pretrage za vaše GitHub Pages podešavanje.
Deljenje na društvenim mrežama: integrirajte dugmad za deljenje za glavne platforme.
Kontinuirana ažuriranja: redovno commitujte promene; GitHub Pages automatski ponovo postavlja.
Rezervne kopije: omogućite zaštitu GitHub repozitorijuma ili preslikajte repozitorijum.
Sada ste pravi vlasnik veb sajta—podelite svoju GitHub Pages vezu i pokažite svoju kreaciju svetu!
