Jak vytvořit web s ChatGPT: tři způsoby, které fungují

Web s ChatGPT vytvoříte třemi způsoby: můžete si nechat napsat HTML a CSS a soubory nahrát na hostingovou službu sami, použít ho k plánování stránek a psaní textů před stavbou v nástroji pro tvorbu webů, nebo připojit AI builder jako Mythex přímo do ChatGPT, takže může web ze stejného chatu vytvořit, zahostovat a publikovat. První způsob je zdarma a vhodný pro jednostránkový web; třetí potřebujete, až web bude mít formuláře ukládající data, přihlášení nebo pravidelné úpravy. Tento průvodce ukazuje každou metodu s prompty a jasně říká, kde která končí.

Co ChatGPT umí a neumí sám

ChatGPT je velmi dobrý v psaní: kódu, nadpisů, textů stránek a plánů. Sám o sobě ale není hostingová firma. Vašemu webu nedá veřejnou adresu, neprovozuje databázi a mezi projekty neuchovává soubory webu tak, jak to dělá builder. Každá metoda níže je jiná odpověď na tuto mezeru.

Metoda 1: ChatGPT napíše kód, web hostujete sami

Toto je klasický postup a funguje dobře u jednoduchého statického webu: portfolia, přistávací stránky, svatební stránky.

Krok 1: Vyžádejte si kompletní stránku v jednom souboru

Buďte konkrétní v obsahu a rozvržení:

Napiš kompletní jednostránkový web jako jeden HTML soubor s CSS uvnitř značky style. Je pro Maya Haddad, freelance ilustrátorku v Ammánu. Sekce: záhlaví s jejím jménem a „Ilustrace pro knihy a značky“, mřížka šesti portfolio obrázků (použij zástupné cesty k obrázkům, které mohu nahradit), krátký odstavec o mně, seznam tří služeb s počátečními cenami a kontaktní sekce s jejím e-mailem jako odkazem mailto. Čistý, moderní vzhled, hodně bílého prostoru, funguje na telefonech. Bez JavaScriptových frameworků.

Jeden soubor vám usnadní uložení a nahrání.

Krok 2: Uložte a otevřete

Zkopírujte kód do textového editoru, uložte jako index.html a otevřete v prohlížeči. Pokud něco nevypadá dobře, popište to ChatGPT: „mřížka obrázků je na počítači jedním sloupcem; nad šířkou 900 px ji udělej na tři sloupce.“

Krok 3: Nahraďte zástupné prvky

Vyměňte zástupné obrázky za vlastní a nahraďte texty, které ChatGPT vymyslel. Zkontrolujte ceny, e-maily a jména pečlivě; AI mezery vyplňuje sebejistě.

Krok 4: Zveřejněte web

Nahrajte soubor na bezplatný statický hosting, například GitHub Pages, nebo na jakýkoli webhosting, který už platíte. Dostanete veřejnou adresu. Pokud chcete vlastní doménu, postupujte podle instrukcí vašeho hostingu; náš průvodce připojením vlastní domény vysvětluje část s DNS.

Kde metoda 1 končí

• Formuláře ukládající data. Kontaktní formulář potřebuje místo, kam odeslání přijde. Budete potřebovat formulářovou službu nebo server.
• Přihlášení a oblasti pro členy. Ty vyžadují backend a databázi.
• Mnoho stránek. Udržet záhlaví a menu konzistentní napříč deseti ručně vkládanými soubory je zdlouhavé.
• Úpravy. Každá změna znamená vyžádat nový kód, vložit ho a znovu nahrát.

Metoda 2: ChatGPT plánuje, builder staví

Zde ChatGPT dělá přemýšlení a psaní, zatímco nástroj pro tvorbu webů staví a hostuje.

Krok 1: Naplánujte web s ChatGPT

Provozuji malou rodinnou pekárnu v Manchesteru, která přijímá objednávky dortů. Navrhni stránky, které můj web potřebuje, co má každá stránka říkat a jednu akci, kterou chci, aby návštěvníci na každé stránce provedli. Drž se pěti stránek nebo méně.

Krok 2: Napište texty

Vyžádejte si text každé stránky a pak ho přepište vlastním hlasem. Doplňte skutečné detaily, které ChatGPT znát nemůže: otevírací dobu, ceny, oblasti doručení, čím se vaše dorty liší.

Krok 3: Postavte web v builderu

Vložte plán a texty do nástroje pro tvorbu webů. V nástroji typu drag-and-drop text umístíte do šablony. V AI builderu můžete dát celý plán jako jednu zprávu a on stránky postaví; například v tvůrci webů Mythex:

Postav web pro rodinnou pekárnu v Manchesteru podle tohoto plánu a textů: [vložit]. Zahrň formulář žádosti o objednávku, který ukládá každou žádost (jméno, telefon, typ dortu, požadované datum, zprávu), abych je mohl vidět na administrační stránce, do které se přihlásím jen já. Vřelý, domácký design, funguje na telefonech.

Formulář objednávek zde ukládá do skutečné databáze, což vložený HTML soubor dělat nemohl. Více o této cestě najdete v návodu, jak vytvořit web s AI.

Metoda 3: Vytvořte a publikujte přímo z ChatGPT

Nejnovější možností je připojit builder k ChatGPT, aby ChatGPT mohl přímo používat nástroje builderu. Zůstanete v konverzaci s ChatGPT; builder poskytuje projekt, náhled, databázi a hosting.

Mythex funguje takto přes svou aplikaci pro ChatGPT (konektor MCP). Připojíte ho z Nastavení účtu v Mythexu; připojení funguje na libovolném tarifu, ale nástroje, které spouštějí sandbox vašeho projektu, vyžadují Pro. Jakmile je připojeno, můžete ChatGPT napsat něco takového:

Pomocí Mythexu vytvoř nový web pro moji pekárnu s domovskou stránkou, stránkou s menu s dorty a cenami a formulářem žádosti o objednávku, který ukládá do databáze. Ukaž mi náhled a až řeknu, že vypadá dobře, publikuj ho.

ChatGPT pak vytvoří projekt, napíše kód, spustí ho a po vašem schválení ho publikuje na veřejnou URL. Změny jsou jen další zprávy ve stejném chatu. Stejný přístup s konektorem funguje i z Claude, Cursoru a Codexu. Pozadí toho, jak to funguje a které buildery to podporují, najdete v článku AI nástroje pro tvorbu aplikací s MCP.

Kterou metodu zvolit?

Tipy k promptům, které fungují u každé metody

• Uveďte skutečná fakta hned na začátku. Jméno, místo, služby, ceny, kontaktní údaje. Méně vymyšlených detailů znamená méně úklidu.
• Popište návštěvníka a cíl. „Rodič hledající narozeninový dort, který by měl nakonec odeslat žádost o objednávku.“
• Žádejte rozvržení nejdřív pro telefon. Většina návštěvníků používá telefony.
• Měňte jednu věc v každé zprávě, jakmile existuje první verze.
• Výslovně žádejte základy SEO: unikátní titulek a popis pro každou stránku, skutečné nadpisy, alt texty u obrázků. Viz SEO pro weby vytvořené AI.

Náš průvodce psaním promptů pro AI nástroje pro tvorbu aplikací obsahuje další vzory.

Časté problémy a jejich řešení

• Design vypadá obecně. Dejte referenci: „jako klidná skandinávská kavárna, hodně bílé a jedna tlumená zelená“.
• Kód se ořízl. Požádejte ChatGPT, aby pokračoval od posledního řádku, nebo aby rozdělil stránku na sekce a dával je po jedné.
• Vymyslel reference nebo statistiky. Odstraňte je. Falešné recenze podrývají důvěru a na mnoha místech jsou v rozporu s pravidly ochrany spotřebitele.
• Web se po změně rozbije. Před vložením nového kódu si uschovejte kopii poslední funkční verze. Buildery jako Mythex ukládají kontrolní body, takže se můžete vrátit zpět.

Před publikováním

Přečtěte každé slovo na každé stránce. Ověřte, že kontaktní údaje fungují. Otevřete web na telefonu. Ujistěte se, že obrázky jsou vaše nebo řádně licencované. Pak publikujte a sdílejte tam, kde už vaši návštěvníci jsou. Pokud chcete, aby to celé nestálo nic, jak vytvořit web zdarma popisuje možnosti bezplatného hostingu podrobněji.

Otázky