Kako narediti spletno stran s ChatGPT-jem: trije načini, ki delujejo

Spletno stran lahko naredite s ChatGPT-jem tako, da ga prosite, naj napiše HTML in CSS strani, nato pa ti datoteki sami naložite na gostiteljsko storitev; ali ga uporabite za načrtovanje strani in pisanje besedila, preden gradite v graditelju spletnih strani; ali povežete AI graditelja, kot je Mythex, znotraj ChatGPT-ja, da stran iz istega klepeta zgradi, gosti in objavi. Prvi način je brezplačen in primeren za enostransko stran; tretji je pravi, ko stran potrebuje obrazce, ki shranjujejo podatke, prijave ali redne posodobitve. Ta vodnik prikazuje vsak način s pozivi in jasno pove, kje se posamezen način ustavi.

Kaj ChatGPT zmore sam in česa ne

ChatGPT je zelo dober pri pisanju: kode, naslovov, besedila strani in načrtov. Sam od sebe ni podjetje za gostovanje. Vaši strani ne dodeli javnega naslova, ne vodi podatkovne baze in datotek strani ne hrani med projekti, kot to počne graditelj. Vsak spodnji način je drugačen odgovor na to vrzel.

1. način: ChatGPT napiše kodo, vi jo gostite

To je klasičen pristop in dobro deluje za preprosto statično stran: portfelj, pristajalno stran, stran za poroko.

1. korak: zahtevajte popolno enodatotečno stran

Bodite natančni glede vsebine in postavitve:

Napiši popolno enostransko spletno stran kot eno HTML datoteko s CSS-jem v oznaki style. Namenjena je Mayi Haddad, samostojni ilustratorki v Ammanu. Razdelki: glava z njenim imenom in »Ilustracije za knjige in blagovne znamke«, mreža šestih slik iz portfelja (uporabi nadomestne poti slik, ki jih lahko zamenjam), kratek odstavek o meni, seznam treh storitev z začetnimi cenami in razdelek za stik z njenim e-naslovom kot povezavo mailto. Čist, sodoben videz, veliko belega prostora, deluje na telefonih. Brez JavaScript ogrodij.

Ena datoteka olajša shranjevanje in nalaganje.

2. korak: shranite in odprite

Kodo kopirajte v urejevalnik besedila, shranite kot index.html in jo odprite v brskalniku. Če nekaj ni prav, opišite to ChatGPT-ju: »mreža slik je na računalniku v enem stolpcu; naredi tri stolpce nad 900 px širine.«

3. korak: zamenjajte nadomestna mesta

Nadomestne slike zamenjajte s svojimi in zamenjajte besedilo, ki ga je ChatGPT izmislil. Cene, e-pošte in imena pazljivo preverite; AI zapolnjuje vrzeli samozavestno.

4. korak: objavite na spletu

Datoteko naložite na brezplačno statično gostiteljstvo, na primer GitHub Pages, ali na kateri koli spletni gostitelj, za katerega že plačujete. Dobili boste javni naslov. Če želite uporabljati lastno domeno, sledite navodilom svojega gostitelja; naš vodnik o povezovanju lastne domene razlaga del z DNS-jem.

Kje se način 1 ustavi

• Obrazci, ki shranjujejo podatke. Kontaktni obrazec potrebuje mesto, kamor pošilja oddaje. Potrebovali boste storitev za obrazce ali strežnik.
• Prijave in območja za člane. Ta potrebujejo zaledni del in podatkovno bazo.
• Veliko strani. Ohranjanje enake glave in menija v desetih ročno prilepljenih datotekah postane naporno.
• Posodobitve. Vsaka sprememba pomeni nove zahteve za kodo, prilepljanje in ponovno nalaganje.

2. način: ChatGPT načrtuje, graditelj gradi

Tu ChatGPT opravi razmišljanje in pisanje, graditelj spletnih strani pa gradnjo in gostovanje.

1. korak: načrtujte stran s ChatGPT-jem

Vodim majhno družinsko pekarno v Manchestru, ki sprejema naročila tort. Predlagaj strani, ki jih bo moja spletna stran potrebovala, kaj naj vsaka stran pove in eno dejanje, ki ga želim, da obiskovalci opravijo na vsaki strani. Ostani pri največ petih straneh.

2. korak: napišite besedilo

Za besedilo vsake strani ga zahtevajte, nato ga prepišite v svojem glasu. Dodajte resnične podrobnosti, ki jih ChatGPT ne more vedeti: delovni čas, cene, območja dostave, kaj dela vaše torte drugačne.

3. korak: zgradite v graditelju

Načrt in besedilo prilepite v graditelj spletnih strani. V orodju za povleci in spusti besedilo postavite v predlogo. V AI graditelju lahko celoten načrt podate v enem sporočilu in stran se zgradi; na primer v graditelju spletnih strani Mythex:

Zgradi spletno stran za družinsko pekarno v Manchestru po tem načrtu in besedilu: [prilepi]. Vključi obrazec za naročilo, ki shrani vsako zahtevo (ime, telefon, vrsta torte, datum, sporočilo), da jih lahko vidim na skrbniški strani, v katero se lahko prijavim samo jaz. Topel, domač videz, deluje na telefonih.

Obrazec za naročila tu shranjuje v resnično podatkovno bazo, česar prilepljena datoteka HTML ne zmore. Za več o tej poti glejte kako narediti spletno stran z umetno inteligenco.

3. način: gradnja in objava znotraj ChatGPT-ja

Najnovejša možnost je povezava graditelja z ChatGPT-jem, da lahko ChatGPT uporablja orodja graditelja neposredno. Ostanete v pogovoru s ChatGPT-jem; graditelj zagotavlja projekt, predogled, podatkovno bazo in gostovanje.

Mythex deluje prek svoje aplikacije za ChatGPT (povezava MCP) na ta način. Povežete jo iz nastavitev računa v Mythexu; povezava deluje na katerem koli paketu, orodja, ki poganjajo peskovnik vašega projekta, pa potrebujejo paket Pro. Ko je povezava vzpostavljena, lahko ChatGPT-ju rečete nekaj takega:

Z uporabo Mythexa ustvari novo spletno stran za mojo pekarno z domačo stranjo, stranjo z menijem tort in cenami ter obrazcem za naročilo, ki shranjuje v podatkovno bazo. Pokaži mi predogled in jo objavi, ko rečem, da izgleda prav.

ChatGPT nato ustvari projekt, napiše kodo, jo zažene in objavi na javnem naslovu, ko odobrite. Spremembe so samo nova sporočila v istem klepetu. Enak pristop povezave deluje tudi iz Clauda, Cursorja in Codexa. Za ozadje, kako to deluje, in kateri graditelji to podpirajo, glejte AI graditelje aplikacij z MCP.

Kateri način izbrati?

Nasveti za pozive, ki veljajo za vse načine

• Dajte resnična dejstva na začetek. Ime, kraj, storitve, cene, kontaktni podatki. Manj izmišljenih podrobnosti pomeni manj čiščenja.
• Opišite obiskovalca in cilj. »Starš, ki išče torto za rojstni dan in naj na koncu pošlje zahtevo za naročilo.«
• Zahtevajte postavitve, ki so najprej za telefon. Večina obiskovalcev uporablja telefone.
• Spremenite eno stvar na sporočilo, ko obstaja prva različica.
• Izrecno zahtevajte osnove SEO: edinstven naslov in opis za vsako stran, prave naslove, alternativno besedilo na slikah. Glejte SEO za spletne strani, zgrajene z AI.

Naš vodnik o pisanju pozivov za graditelje aplikacij z AI ima več vzorcev.

Pogoste težave in rešitve

• Oblikovanje izgleda generično. Podajte referenco: »kot miren skandinavski kavarniški lokal, veliko belega in ena utišana zelena barva«.
• Koda je obrezana. Prosite ChatGPT, naj nadaljuje od zadnje vrstice, ali naj stran razdeli na razdelke in vam jih da po enega.
• Izmislil si je mnenja ali statistike. Odstranite jih. Lažne ocene uničujejo zaupanje, v mnogih krajih pa so v nasprotju s pravili varstva potrošnikov.
• Stran se po spremembi pokvari. Pred prilepljanjem nove kode shranite kopijo zadnje delujoče različice. Graditelji, kot je Mythex, hranijo kontrolne točke, da se lahko vrnete nazaj.

Preden objavite

Preberite vsako besedo na vsaki strani. Preverite, da kontaktni podatki delujejo. Odprite stran na telefonu. Poskrbite, da so slike vaše ali ustrezno licencirane. Nato objavite in delite stran tam, kjer so že vaši obiskovalci. Če želite, da vse skupaj ne stane ničesar, kako narediti spletno stran brezplačno podrobneje opisuje brezplačne možnosti gostovanja.

Vprašanja