Najveći broj vibe codera 2026. počeo je s ChatGPT-om. Pitaš ga "napravi mi landing stranicu za moj caffe bar", on ti piše HTML/CSS/JS u chat-u, ti kopiraš kod u datoteke i — što sad? Ovaj vodič pokriva cijeli put od ChatGPT poruke do tvoje domene na WMD hostingu, uključujući situacije gdje ChatGPT napravi React aplikaciju, PHP backend, ili WordPress temu.

Kako ChatGPT generira kod — tri scenarija

ChatGPT (kao i GPT-5 u zadnjim verzijama) može vratiti kod u tri formata:

1. Code blocks u chat-u — ti kopiraš svaki blok u zasebnu datoteku
2. Canvas / artefakt — ChatGPT drži kod u editor panelu desno, eksportiraš ZIP
3. Codex CLI / GPT-5 Code agent — ChatGPT direktno piše datoteke u tvoj lokalni folder

Svaki ima nešto drugačiji workflow za deploy. Pokrivamo sva tri.

Scenarij 1: Code u chat poruci

Najčešći slučaj. Pitaš "napravi mi jednostavan online shop frontend", dobiješ:

• Blok index.html
• Blok styles.css
• Blok script.js
• Možda nekoliko dodatnih blokova za pojedine stranice

Korak 1: Kreiraj projekt na svom računalu

Otvori bilo koji text editor (VS Code, Sublime, čak Notepad++). Stvori folder, npr. moj-shop. Stvori datoteke s točnim imenima koje ChatGPT spominje, kopiraj kod iz svakog code blocka u odgovarajuću datoteku.

Bitno: imena datoteka moraju biti identična onima koje ChatGPT referencira u HTML-u (<link href="styles.css"> mora odgovarati datoteci styles.css, ne stil.css).

Korak 2: Testiraj lokalno

Otvori index.html u browseru (Chrome ili Firefox). Ako sve radi vizualno, prelazimo na deploy. Ako neki dio fali ili je razbijen, vrati se u ChatGPT i pitaj "popravi X koji ne radi", pa kopiraj novi kod.

Korak 3: Upload na WMD — najbrža metoda

Za statičnu stranicu (samo HTML/CSS/JS, bez backend logike):

1. Login u cPanel
2. File Manager → otvori public_html/ folder tvoje domene
3. Drag & drop sve datoteke i foldere u browser prozor
4. Otvori domenu u browseru — stranica je live

Trajanje: 5-10 minuta od ChatGPT poruke do live URL-a.

Scenarij 2: ChatGPT Canvas (artefakti)

ChatGPT u zadnjim verzijama otvara Canvas panel za veće projekte. Tu možeš:

• Vidjeti sve datoteke u tree strukturi
• Editirati direktno u browseru
• Eksportirati cijeli projekt kao ZIP

Postupak deploya:

1. U ChatGPT Canvas panelu klikni "Download" ili "Export ZIP"
2. Raspakiraj ZIP lokalno
3. cPanel → File Manager → public_html → Upload ZIP-a
4. Desni klik na ZIP → Extract
5. Otvori domenu — stranica je live

Ovo je značajno brže od kopiranja blok po blok jer ChatGPT zna kako pravilno strukturirati projekt.

Scenarij 3: Codex CLI / GPT-5 Code agent

Ako koristiš ChatGPT Pro ili Plus sa Codex / Code Agent funkcijom, ChatGPT može direktno pisati u tvoj lokalni folder kroz CLI alat:

codex
> Napravi mi Astro stranicu za moj portfolio s dark mode

Codex generira projekt, runs npm install, i ostavlja gotov projekt u tvom folderu. Sad postupak:

1. Lokalno: npm run build — generira dist/ folder s production datotekama
2. cPanel → File Manager → public_html
3. Upload sav sadržaj dist/ foldera (ne sam folder, već što je unutra)
4. Otvori domenu — Astro stranica je live

Alternativa: postavi Git repo i Git Deploy umjesto upload-a (vidi sljedeću sekciju).

Git Deploy — preporučeno za sve verzije iznad prvog testa

Bilo koji od tri scenarija iznad može se nadograditi s Git Deployjem. Razlog: čim počneš mijenjati stranicu (a hoćeš), File Manager upload postaje frustracija. Git Deploy automatizira sve.

Setup:

1. Lokalno: git init u folderu projekta
2. Stvori .gitignore (Claude/ChatGPT mogu to napisati): isključi node_modules, .env, dist/ ako ne treba
3. git add . i git commit -m "first deploy"
4. Push na GitHub / GitLab / Bitbucket (besplatan privatan repo)
5. cPanel → Git Version Control → Create
6. Repository URL: HTTPS URL tvog repo-a (ili SSH ako koristiš ključ)
7. Repository path: /home/korisnik/public_html (ili gdje god treba sjesti)
8. Branch: main
9. Klikni Create — cPanel kloni repo
10. Aktiviraj webhook iz GitHub-a — sad svaki push triggera deploy

Workflow nakon ovog: izmijeniš datoteku → commit → push → 30 sekundi kasnije live na domeni.

Što ako ChatGPT napravi backend

Ako tražiš "napravi mi shop s baze podataka i adminom" — ChatGPT obično bira:

• Node.js + Express + SQLite (najčešće za prototipove)
• Next.js s API routama + Prisma + PostgreSQL (modernije)
• PHP + MySQL (klasično, najbrže na cPanel-u)
• Laravel (ako ga eksplicitno tražiš)

Node.js + Express deploy:

1. cPanel → Node.js Selector → Create Application
2. Node verzija: 20.x ili 22.x
3. Application root: gdje ćeš staviti projekt (npr. /home/korisnik/express-app)
4. Application URL: tvoja domena ili poddomena
5. Startup file: index.js ili server.js (ono što ChatGPT generira kao entry point)
6. Git Deploy ili upload kod
7. U panelu klikni "Run NPM Install"
8. Postavi environment variables (DATABASE_URL, PORT itd.)
9. Restart aplikacije

PHP + MySQL deploy:

1. cPanel → MySQL Databases → Create New Database (npr. moj_shop)
2. Create New User → dodaj na bazu s svim privilegijama
3. cPanel → phpMyAdmin → Import SQL koji ChatGPT generirao (tablice, podaci)
4. Upload PHP datoteke u public_html
5. Edit config.php (ili gdje god je connection string) — postavi WMD MySQL credentials
6. cPanel → Select PHP Version → 8.3 (ili novija)
7. Otvori domenu — PHP app je live

Najčešće greške i kako ih izbjeći

1. Apsolutne putanje umjesto relativnih

ChatGPT ponekad piše /Users/ime/desktop/projekt/styles.css umjesto styles.css. To radi lokalno, ali ne na serveru. Pitaj ChatGPT: "promijeni sve putanje da budu relativne, ne apsolutne".

2. CDN linkovi koji se odbijaju zbog CORS-a

Ako ChatGPT koristi vanjski CDN za fontove ili pluginove (npr. cdn.jsdelivr.net), provjeri da nije blokiran tvojim CSP postavkama. Cloudflare ispred WMD-a obično ovo riješi.

3. Hardkodirane lokalne URL-e

Ako kod ima fetch('http://localhost:3000/api'), treba postati fetch('/api') (relativno) ili tvoja prava domena. Pitaj ChatGPT da napravi te ispravke.

4. Database connection error

ChatGPT obično generira localhost:5432 za PostgreSQL ili localhost:3306 za MySQL. Na WMD-u je host localhost točan, ali credentials moraju biti tvoji iz cPanel-a, ne primjer iz ChatGPT odgovora.

5. Build koji se ne pokreće na serveru

Next.js, Vue, Astro projekti imaju npm run build step. Ne uploadaš source kod, uploadaš build/ ili dist/ output. Pitaj ChatGPT: "kako se build-aju produkcijske datoteke za ovaj framework?" Slijedi instrukcije, uploadaj output.

Sigurnost — što provjeriti

ChatGPT generira kod brzo, ali ne uvijek sigurno. Prije live verzije provjeri:

• API ključevi: traži stringove tipa sk-..., pk_..., OPENAI_API_KEY=... u kodu — sve to mora u .env, nikad u Git repo
• Forme: ima li server-side validacije ili samo client-side? Server-side je obvezan
• SQL queryji: koristi li kod prepared statements ili string concatenation?
• Admin route-ovi: jesu li zaštićeni autentikacijom?
• Upload file forms: validira li tip i veličinu uploadanih datoteka?

WMD aktivira Imunify360 server-side WAF koji blokira većinu poznatih napada na PHP/WP, ali nije zamjena za pravilno napisan kod.

Kad ChatGPT ne stigne — escalation putevi

Vibe coding radi divno dok ne udari u tehnički zid. Ako ti se to dogodi:

• Switch na Claude Code ili Cursor — često znaju riješiti stvari koje ChatGPT ne može
• WMD support — pomažemo s deployment dijelom (cPanel postavke, baza, environment variables, SSL) na 24/7/365 telefonu ili ticketu
• Profesionalni developer — kad treba audit ili refactor, pomažemo s preporukama

Realna procjena: ChatGPT projekt → WMD vrijeme

Kako započeti

Imaš ChatGPT projekt i ne znaš kako ga prebaciti na WMD?

1. Pošalji nam ZIP cijelog foldera (ili GitHub repo link) na hello@wmd.hr
2. Opiši što projekt radi i koje su funkcije (forma, login, baza, vanjski API-ji)
3. Mi savjetujemo optimalan paket i pripremamo okruženje
4. Tipično u 30-90 minuta projekt je live

Ako tek razmišljaš o prvom ChatGPT projektu — naša preporuka je da počneš sa statičkom HTML stranicom za prvi test deploya, pa nakon što osjećaš workflow, prijeđeš na složenije projekte. Vibe coding je odličan za brzo testiranje ideje, a stabilan EU hosting daje sigurnu osnovu kad ideja postane stvarnost.