Kako napraviti web stranicu uz ChatGPT: tri načina koja funkcioniraju

Web stranicu možeš napraviti uz ChatGPT tako da od njega zatražiš HTML i CSS stranice, pa te datoteke sam postaviš na uslugu hostinga; ili ga koristiš za planiranje stranica i pisanje teksta prije izrade u web builderu; ili povežeš AI builder poput Mythexa unutar ChatGPT-a, pa on iz istog chata može izraditi, hostati i objaviti stranicu umjesto tebe. Prvi način je besplatan i dobar za jednostranične stranice; treći je ono što trebaš kad stranica zahtijeva obrasce koji spremaju podatke, prijave ili redovita ažuriranja. Ovaj vodič prikazuje svaku metodu s upitima i jasno kaže gdje koja staje.

Što ChatGPT može, a što ne može sam

ChatGPT je vrlo dobar u pisanju: kodu, naslovima, tekstu stranica i planovima. Sam po sebi nije tvrtka za hosting. Ne daje tvojoj stranici javnu adresu, ne vodi bazu podataka i ne čuva datoteke tvoje stranice između projekata na način na koji to radi builder. Svaka metoda u nastavku je drugačiji odgovor na taj jaz.

Metoda 1: ChatGPT piše kod, ti ga hostaš

Ovo je klasičan pristup i dobro funkcionira za jednostavnu, statičku stranicu: portfelj, landing stranicu, stranicu za vjenčanje.

Korak 1: Zatraži potpunu stranicu u jednoj datoteci

Budi konkretan u sadržaju i rasporedu:

Napiši potpunu jednostraničnu web stranicu kao jednu HTML datoteku s CSS-om unutar style oznake. Namijenjena je Maji Haddad, slobodnoj ilustratorici u Ammanu. Odjeljci: zaglavlje s njezinim imenom i „Ilustracija za knjige i brendove”, mreža od šest slika iz portfelja (koristi placeholder putanje koje mogu zamijeniti), kratak odjeljak o meni, popis triju usluga s početnim cijenama i odjeljak za kontakt s njezinom e-adresom kao mailto poveznicom. Čisto, moderno, puno bijelog prostora, radi na telefonima. Bez JavaScript okvira.

Zahtjev za jednu datoteku olakšava spremanje i učitavanje.

Korak 2: Spremi je i otvori

Kopiraj kod u uređivač teksta, spremi ga kao index.html i otvori u pregledniku. Ako nešto ne izgleda dobro, opiši to ChatGPT-u: „mreža slika je na desktopu u jednom stupcu; neka bude tri stupca iznad 900 px širine.”

Korak 3: Zamijeni placeholdere

Zamijeni placeholder slike svojima i zamijeni tekst koji je ChatGPT izmislio. Pažljivo provjeri cijene, e-adrese i imena; AI samouvjereno popunjava praznine.

Korak 4: Stavi stranicu na internet

Upload datoteku na besplatni statički hosting poput GitHub Pages ili na bilo koji web hosting koji već plaćaš. Dobit ćeš javnu adresu. Za korištenje vlastite domene slijedi upute svog hostinga; naš vodič o povezivanju vlastite domene objašnjava DNS dio.

Gdje metoda 1 staje

• Obrasci koji spremaju podatke. Obrazac za kontakt treba mjesto na koje će slati podatke. Trebat će ti servis za obrasce ili poslužitelj.
• Prijave i područja za članove. Ona zahtijevaju backend i bazu podataka.
• Mnogo stranica. Održavanje istih zaglavlja i izbornika kroz deset ručno kopiranih datoteka postaje zamorno.
• Ažuriranja. Svaka promjena znači novi zahtjev za kod, lijepljenje i ponovni upload.

Metoda 2: ChatGPT planira, builder gradi

Ovdje ChatGPT radi razmišljanje i pisanje, a web builder gradnju i hosting.

Korak 1: Isplaniraj stranicu uz ChatGPT

Vodim malu obiteljsku pekaru u Manchesteru koja prima narudžbe torti. Predloži stranice koje moja web stranica treba, što svaka stranica treba reći i jednu radnju koju želim da posjetitelji poduzmu na svakoj stranici. Neka bude najviše pet stranica.

Korak 2: Napiši tekst

Zatraži tekst za svaku stranicu, pa ga prepiši svojim glasom. Dodaj stvarne detalje koje ChatGPT ne može znati: radno vrijeme, cijene, područja dostave, po čemu su tvoje torte drugačije.

Korak 3: Izradi u builderu

Zalijepi plan i tekst u web builder. U alatu s povlačenjem i ispuštanjem tekst stavljaš u predložak. U AI builderu možeš cijeli plan dati kao jednu poruku i on izrađuje stranice; primjerice u Mythex web builderu:

Izradi web stranicu za obiteljsku pekaru u Manchesteru prema ovom planu i tekstu: [zalijepi]. Uključi obrazac za zahtjev za narudžbu koji sprema svaki zahtjev (ime, telefon, vrsta torte, datum, poruka) kako bih ih mogao vidjeti na admin stranici u koju se samo ja mogu prijaviti. Topao, domaći dizajn, radi na telefonima.

Obrazac za narudžbe ovdje sprema podatke u pravu bazu, što zalijepljena HTML datoteka ne bi mogla. Više o ovom pristupu pronađi u vodiču kako napraviti web stranicu uz AI.

Metoda 3: Izradi i objavi iz ChatGPT-a

Najnovija mogućnost je povezati builder s ChatGPT-om tako da ChatGPT može koristiti njegove alate izravno. Ostaješ u razgovoru s ChatGPT-om; builder osigurava projekt, pregled, bazu podataka i hosting.

Mythex tako radi kroz svoju aplikaciju za ChatGPT (MCP konektor). Povezuješ ga iz postavki računa u Mythexu; povezivanje radi na bilo kojem planu, a alati koji pokreću sandbox tvojeg projekta zahtijevaju Pro. Nakon povezivanja možeš reći nešto poput:

Koristeći Mythex, napravi novu web stranicu za moju pekaru s početnom stranicom, stranicom s jelovnikom koji sadrži torte i cijene te obrascem za zahtjev za narudžbu koji sprema u bazu podataka. Pokaži mi pregled i objavi je kad kažem da izgleda dobro.

ChatGPT tada stvara projekt, piše kod, pokreće ga i objavljuje na javnu adresu kad odobriš. Promjene su samo nove poruke u istom chatu. Isti pristup s konektorom radi i iz Claudea, Cursora i Codexa. Za pozadinu o tome kako to funkcionira i koji builderi to podržavaju, pogledaj AI buildere za aplikacije s MCP-om.

Koju metodu odabrati?

Savjeti za upite koji vrijede za sve metode

• Daj stvarne činjenice odmah. Ime, lokacija, usluge, cijene, kontakt podaci. Manje izmišljenih detalja znači manje čišćenja.
• Opiši posjetitelja i cilj. „Roditelj koji traži tortu za rođendan, koji bi na kraju trebao poslati zahtjev za narudžbu.”
• Traži izgled prilagođen telefonu. Većina posjetitelja koristi telefone.
• Mijenjaj jednu stvar po poruci kad prva verzija postoji.
• Izričito traži osnove SEO-a: jedinstven naslov i opis za svaku stranicu, prave naslove, alt tekst na slikama. Vidi SEO za web stranice izgrađene uz AI.

Naš vodič o pisanju upita za AI buildere za aplikacije ima više obrazaca.

Česti problemi i rješenja

• Dizajn izgleda generički. Daj referencu: „kao mirna skandinavska kafićna, puno bijele boje i jedna prigušena zelena”.
• Kod je odsječen. Zamoli ChatGPT da nastavi od zadnjeg retka ili da podijeli stranicu na odjeljke i daje ti jedan po jedan.
• Izmislio je preporuke ili statistiku. Ukloni ih. Lažne recenzije narušavaju povjerenje, a na mnogim mjestima su u suprotnosti sa zakonima o zaštiti potrošača.
• Stranica se pokvari nakon promjene. Prije lijepljenja novog koda sačuvaj kopiju posljednje ispravne verzije. Builderi poput Mythexa čuvaju checkpointe pa možeš vratiti stanje.

Prije objave

Pročitaj svaku riječ na svakoj stranici. Provjeri da kontakt podaci rade. Otvori stranicu na telefonu. Provjeri jesu li slike tvoje ili pravilno licencirane. Zatim objavi i podijeli je tamo gdje su tvoji posjetitelji već. Ako želiš da cijela stvar ne košta ništa, kako napraviti web stranicu besplatno detaljnije pokriva opcije besplatnog hostinga.

Pitanja