Weboldal készítése ChatGPT-vel: három működő módszer

Weboldalt a ChatGPT-vel háromféleképpen készíthetsz: megkérheted, hogy írja meg az oldal HTML- és CSS-fájljait, amelyeket aztán magad teszel fel egy tárhelyszolgáltatóhoz; használhatod az oldalak megtervezésére és a szöveg megírására, mielőtt egy weboldal-építőben felépíted; vagy összekötheted a ChatGPT-t egy AI-builderrel, például a Mythexszel, hogy a ChatGPT-n belül, ugyanabból a chatből építse, tárolja és tegye közzé az oldalt. Az első módszer ingyenes, és egyoldalas oldalhoz megfelelő; a harmadik akkor kell, ha az oldalnak adatot mentő űrlap, bejelentkezés vagy rendszeres frissítés kell. Ez az útmutató minden módszert bemutat promptokkal, és világosan jelzi, hol szorul korlátok közé.

Mit tud a ChatGPT önmagában, és mit nem

A ChatGPT nagyon jó az íráshoz: kódot, főcímeket, oldalszöveget és terveket készít. Alapállapotában azonban nem tárhelyszolgáltató. Nem ad az oldalnak nyilvános címet, nem futtat adatbázist, és a projektek között nem őrzi meg az oldal fájljait úgy, ahogy egy builder. Az alábbi módszerek mindegyike más választ ad erre a hiányra.

1. módszer: a ChatGPT írja a kódot, te teszed közzé

Ez a klasszikus megközelítés, és egyszerű, statikus oldalnál jól működik: portfólió, céloldal, esküvői oldal.

1. lépés: Kérj egy teljes, egyfájlos oldalt

Légy konkrét a tartalommal és az elrendezéssel kapcsolatban:

Írj egy teljes, egyoldalas weboldalt egyetlen HTML-fájlként, a CSS a style-címkén belül legyen. Maya Haddadnak készül, egy ammáni szabadúszó illusztrátornak. Szakaszok: fejléc a nevével és a „Illusztráció könyveknek és márkáknak” felirattal, hat portfólióképből álló rács (cserélhető kép-elérési utakkal), rövid bemutatkozó bekezdés, három szolgáltatás listája kezdőárakkal, és kapcsolati szakasz a mailto-linkkel ellátott e-mail-címével. Tiszta, modern megjelenés, bő fehér tér, telefonon is működjön. Ne használj JavaScript-keretrendszert.

Az egy fájl megkönnyíti a mentést és a feltöltést.

2. lépés: Mentsd és nyisd meg

Másold a kódot egy szövegszerkesztőbe, mentsd index.html néven, és nyisd meg a böngészőben. Ha valami nem stimmel, írd le a ChatGPT-nek: „a képrács asztali gépen egy oszlopban jelenik meg; legyen három oszlop 900 pixelnél szélesebb képernyőn.”

3. lépés: Cseréld le a helyőrzőket

Cseréld le a helyőrző képeket a sajátjaidra, és cseréld le a ChatGPT által kitalált szövegeket. Gondosan ellenőrizd az árakat, e-mail-címeket és neveket, mert az AI magabiztosan tölti ki a hiányokat.

4. lépés: Tedd közzé

Töltsd fel a fájlt egy ingyenes statikus tárhelyre, például a GitHub Pagesre, vagy bármely már fizetett webtárhelyre. Kapsz egy nyilvános címet. Saját domain használatához kövesd a tárhelyszolgáltató útmutatóját; a saját domain összekötéséről szóló útmutatónk a DNS-részt magyarázza el.

Hol ér véget az 1. módszer

• Adatot mentő űrlapok. A kapcsolatfelvételi űrlapnak kell egy hely, ahová a beküldések kerülnek. Ehhez űrlapszolgáltatás vagy szerver kell.
• Bejelentkezés és tagi területek. Ezekhez háttérrendszer és adatbázis kell.
• Sok oldal. Tíz kézzel beillesztett fájlban nehéz következetesen tartani a fejlécet és a menüt.
• Frissítések. Minden változtatáshoz új kódot kell kérned, beillesztened és újra feltöltened.

2. módszer: a ChatGPT tervez, a builder épít

Itt a ChatGPT végzi a gondolkodást és az írást, a weboldal-builder pedig az építést és a tárhelyet.

1. lépés: Tervezd meg az oldalt a ChatGPT-vel

Egy kis családi cukrászdát vezetek Manchesterben, amely torták rendelését veszi fel. Javasolj oldalakat, amelyekre a weboldalamnak szüksége van, írd le, mit kell mondania minden oldalnak, és azt az egy műveletet, amelyet minden oldalon szeretnél, hogy a látogató végrehajtson. Legfeljebb öt oldal legyen.

2. lépés: Írd meg a szöveget

Kérd minden oldal szövegét, majd írd át a saját hangodon. Adj hozzá olyan valós részleteket, amelyeket a ChatGPT nem ismerhet: nyitvatartás, árak, kiszállítási területek, az, ami a tortáidat különlegessé teszi.

3. lépés: Építsd meg builderben

Illesszd be a tervet és a szöveget egy weboldal-builderbe. Egy drag-and-drop eszközben a szöveget sablonba helyezed. Egy AI-builderben az egész tervet egyetlen üzenetben is megadhatod, és az elkészíti az oldalakat; például a Mythex weboldal-építőben:

Készíts weboldalt egy manchesteri családi cukrászdának az alábbi terv és szöveg alapján: [illeszd be]. Legyen rajta egy rendelési űrlap, amely minden kérést elment (név, telefonszám, tortatípus, szükséges dátum, üzenet), hogy az adminfelületen láthassam őket, ahová csak én jelentkezhetek be. Meleg, otthonos dizájn, telefonon is működjön.

Az itteni rendelési űrlap valódi adatbázisba ment, ami a beillesztett HTML-fájlnak nem menne. Erről az útvonalról többet a weboldal készítése AI-val útmutatóban olvashatsz.

3. módszer: Építs és tegyél közzé a ChatGPT-n belülről

A legújabb lehetőség, hogy egy buildert kapcsolsz a ChatGPT-hez, így a ChatGPT közvetlenül használhatja a builder eszközeit. A ChatGPT-beszélgetésben maradsz; a projektet, az előnézetet, az adatbázist és a tárhelyet a builder biztosítja.

A Mythex így működik a ChatGPT-alkalmazásán keresztül (MCP-összekötő). A Mythexben a fiókbeállításokból köthetsz össze, ez bármely csomagon működik, a projekt sandboxát futtató eszközök viszont Pro csomaghoz kellenek. Ha összekötötted, valami ilyesmit kérhetsz a ChatGPT-től:

A Mythex segítségével hozz létre egy új weboldalt a cukrászdámnak: főoldal, menüoldal tortákkal és árakkal, valamint egy adatbázisba mentő rendelési űrlap. Mutasd meg az előnézetet, és ha jónak mondom, tedd közzé.

A ChatGPT ezután létrehozza a projektet, megírja a kódot, lefuttatja, és jóváhagyásod után közzéteszi nyilvános címen. A változtatások ugyanebben a chatben további üzenetek. Ugyanez az összekötési módszer működik a Claude, a Cursor és a Codex felől is. Ennek működéséről és arról, mely builderek támogatják, az MCP-s AI app builderek útmutatóban olvashatsz.

Melyik módszert válaszd?

Promptolási tippek minden módszerhez

• Add meg a valós tényeket az elején. Név, helyszín, szolgáltatások, árak, elérhetőségek. Kevesebb kitalált részlet kevesebb utómunkát jelent.
• Írd le a látogatót és a célt. „Egy szülő, aki születésnapi tortát keres, és végül rendelési kérést küld.”
• Kérj telefonra optimalizált elrendezést. A legtöbb látogató telefonon jön.
• Egy változtatás üzenetenként, amint elkészült az első verzió.
• Kérd kifejezetten a SEO-alapokat: egyedi cím és leírás oldalanként, valódi címsorok, alt szöveg a képeken. Lásd SEO AI-val épített weboldalakhoz.

Az AI app builderekhez írt promptok útmutatónk további mintákat ad.

Gyakori problémák és megoldásaik

• Általánosnak tűnik a dizájn. Adj referenciát: „mint egy nyugodt skandináv kávézó, sok fehérrel és egy visszafogott zölddel”.
• Levágódott a kód. Kérd meg a ChatGPT-t, hogy folytassa az utolsó sortól, vagy bontsa az oldalt szakaszokra, és egyszerre egyet adjon.
• Kitalált véleményeket vagy statisztikákat tett be. Töröld őket. A hamis vélemények rontják a bizalmat, és sok helyen fogyasztóvédelmi szabályokat sértenek.
• A változtatás után elromlik az oldal. Új kód beillesztése előtt mentsd az utolsó működő verziót. Az olyan builderek, mint a Mythex, mentési pontokat készítenek, hogy vissza lehessen állni.

Közzététel előtt

Olvasd el minden oldal minden szavát. Ellenőrizd, hogy a kapcsolati adatok működnek-e. Nyisd meg az oldalt telefonon. Győződj meg róla, hogy a képek a tieid vagy megfelelő licenccel rendelkeznek. Aztán tedd közzé, és oszd meg ott, ahol a látogatóid már jelen vannak. Ha az egészet ingyen szeretnéd megoldani, a weboldal ingyen készítése útmutató részletesebben tárgyalja az ingyenes tárhelylehetőségeket.

Kérdések