Jak zrobić stronę internetową w ChatGPT: trzy sposoby, które działają

Aby zrobić stronę internetową w ChatGPT, możesz poprosić go o kod HTML i CSS strony, a następnie samodzielnie umieścić te pliki u dostawcy hostingu; możesz też użyć go do zaplanowania podstron i napisania treści przed zbudowaniem strony w kreatorze; albo podłączyć kreator AI, taki jak Mythex, do ChatGPT, aby z tego samego czatu zbudował, hostował i opublikował stronę. Pierwszy sposób jest darmowy i wystarcza na stronę jednopodstronicową; trzeci jest tym, czego potrzebujesz, gdy strona wymaga formularzy zapisujących dane, logowania lub regularnych aktualizacji. Ten przewodnik pokazuje każdą metodę z promptami i wyjaśnia, gdzie każda z nich się kończy.

Czego ChatGPT potrafi, a czego nie potrafi sam

ChatGPT jest bardzo dobry w pisaniu: kodu, nagłówków, treści podstron i planów. Z pudełka nie jest firmą hostingową. Nie nadaje stronie publicznego adresu, nie uruchamia bazy danych i nie przechowuje plików strony między projektami tak, jak robi to kreator. Każda poniższa metoda to inna odpowiedź na tę lukę.

Metoda 1: ChatGPT pisze kod, ty go hostujesz

To klasyczne podejście, które dobrze działa przy prostej, statycznej stronie: portfolio, stronie lądowania, stronie ślubnej.

Krok 1: Poproś o kompletną stronę w jednym pliku

Bądź konkretny co do treści i układu:

Napisz kompletną jednostronicową stronę internetową jako jeden plik HTML z CSS w znaczniku style. Jest dla Mai Haddad, freelancerki-ilustratorki z Ammanu. Sekcje: nagłówek z jej imieniem i napisem „Ilustracje do książek i marek”, siatka sześciu zdjęć z portfolio (użyj zastępczych ścieżek do obrazów, które mogę podmienić), krótki akapit o mnie, lista trzech usług z cenami startowymi oraz sekcja kontaktowa z jej adresem e-mail jako link mailto. Czysty, nowoczesny wygląd, dużo białej przestrzeni, działa na telefonach. Bez frameworków JavaScript.

Jeden plik ułatwia zapis i wgranie.

Krok 2: Zapisz i otwórz plik

Skopiuj kod do edytora tekstu, zapisz jako index.html i otwórz w przeglądarce. Jeśli coś wygląda źle, opisz to ChatGPT: „siatka zdjęć na komputerze jest jedną kolumną; zrób trzy kolumny powyżej 900 px szerokości”.

Krok 3: Podmień zastępcze elementy

Zamień zastępcze zdjęcia na własne i popraw teksty, które ChatGPT wymyślił. Dokładnie sprawdź ceny, adresy e-mail i nazwiska; AI pewnie wypełnia luki.

Krok 4: Umieść stronę w sieci

Wgraj plik na darmowy hosting statyczny, na przykład GitHub Pages, albo na dowolny hosting, za który już płacisz. Dostaniesz publiczny adres. Aby użyć własnej domeny, postępuj zgodnie z instrukcjami swojego hostingu; nasz przewodnik jak podłączyć własną domenę wyjaśnia część DNS.

Gdzie kończy się metoda 1

• Formularze zapisujące dane. Formularz kontaktowy potrzebuje miejsca, do którego wysyła zgłoszenia. Będziesz potrzebować usługi formularzy albo serwera.
• Logowanie i strefy dla członków. Wymagają zaplecza i bazy danych.
• Wiele podstron. Utrzymanie spójnych nagłówków i menu w dziesięciu ręcznie wklejanych plikach jest żmudne.
• Aktualizacje. Każda zmiana oznacza prośbę o nowy kod, wklejenie go i ponowne wgranie.

Metoda 2: ChatGPT planuje, kreator buduje

Tutaj ChatGPT zajmuje się myśleniem i pisaniem, a kreator stron buduje i hostuje.

Krok 1: Zaplanuj stronę z ChatGPT

Prowadzę małą rodzinną piekarnię w Manchesterze, która przyjmuje zamówienia na torty. Zaproponuj podstrony, których potrzebuje moja strona, co ma mówić każda z nich i jedno działanie, które chcę, by odwiedzający wykonał na każdej z nich. Maksymalnie pięć podstron.

Krok 2: Napisz treści

Poproś o tekst każdej podstrony, a następnie przepisz go własnym głosem. Dodaj prawdziwe szczegóły, których ChatGPT nie może znać: godziny otwarcia, ceny, obszary dostaw, to, czym twoje torty się wyróżniają.

Krok 3: Zbuduj stronę w kreatorze

Wklej plan i treści do kreatora stron. W narzędziu typu przeciągnij i upuść umieszczasz tekst w szablonie. W kreatorze AI możesz podać cały plan w jednej wiadomości, a on zbuduje podstrony; na przykład w kreatorze stron Mythex:

Zbuduj stronę dla rodzinnej piekarni w Manchesterze według tego planu i tych treści: [wklej]. Dodaj formularz zamówienia, który zapisuje każde zgłoszenie (imię, telefon, rodzaj tortu, potrzebną datę, wiadomość), abym mógł je zobaczyć na stronie administracyjnej, do której tylko ja mam dostęp. Ciepły, domowy wygląd, działa na telefonach.

Formularz zamówień zapisuje tu dane w prawdziwej bazie, czego nie potrafi wklejony plik HTML. Więcej o tej ścieżce znajdziesz w przewodniku jak zrobić stronę internetową z AI.

Metoda 3: buduj i publikuj z poziomu ChatGPT

Najnowsza opcja to podłączenie kreatora do ChatGPT, tak by ChatGPT mógł bezpośrednio używać narzędzi kreatora. Zostajesz w rozmowie w ChatGPT; kreator dostarcza projekt, podgląd, bazę danych i hosting.

Mythex działa w ten sposób dzięki aplikacji dla ChatGPT (łącznik MCP). Podłączasz ją z ustawień konta w Mythex; podłączenie działa w każdym planie, a narzędzia uruchamiające piaskownicę projektu wymagają planu Pro. Po podłączeniu możesz napisać coś w rodzaju:

Korzystając z Mythex, stwórz nową stronę dla mojej piekarni ze stroną główną, stroną menu z tortami i cenami oraz formularzem zamówienia zapisującym dane w bazie. Pokaż mi podgląd i opublikuj, gdy powiem, że wygląda dobrze.

ChatGPT tworzy wtedy projekt, pisze kod, uruchamia go i publikuje pod publicznym adresem URL, gdy zatwierdzisz. Zmiany to po prostu kolejne wiadomości w tym samym czacie. Takie samo podejście z łącznikiem działa także w Claude, Cursor i Codex. Informacje o tym, jak to działa i które kreatory to obsługują, znajdziesz w artykule kreatory aplikacji AI z MCP.

Którą metodę wybrać?

Wskazówki dotyczące promptów, które działają w każdej metodzie

• Podaj prawdziwe fakty z góry. Imię, lokalizację, usługi, ceny, dane kontaktowe. Mniej wymyślonych szczegółów oznacza mniej sprzątania.
• Opisz odwiedzającego i cel. „Rodzic szukający tortu urodzinowego, który ma w końcu wysłać zapytanie o zamówienie”.
• Proś o układ przystosowany do telefonów. Większość odwiedzających korzysta z telefonów.
• Zmieniaj jedną rzecz w wiadomości po powstaniu pierwszej wersji.
• Proś wprost o podstawy SEO: unikalny tytuł i opis na każdej podstronie, prawdziwe nagłówki, tekst alternatywny przy obrazach. Zobacz SEO dla stron tworzonych przez AI.

Nasz przewodnik jak pisać prompty dla kreatorów aplikacji AI zawiera więcej wzorców.

Częste problemy i rozwiązania

• Wygląd jest ogólny. Podaj punkt odniesienia: „jak spokojna skandynawska kawiarnia, dużo bieli i jeden stonowany zielony”.
• Kod został ucięty. Poproś ChatGPT, by kontynuował od ostatniej linii, albo podzielił stronę na sekcje i podawał je po jednej.
• Wymyślił opinie lub statystyki. Usuń je. Fałszywe recenzje podważają zaufanie, a w wielu miejscach są sprzeczne z przepisami o ochronie konsumentów.
• Strona przestaje działać po zmianie. Zachowaj kopię ostatniej działającej wersji przed wklejeniem nowego kodu. Kreatory takie jak Mythex zapisują punkty kontrolne, dzięki którym możesz cofnąć zmiany.

Przed publikacją

Przeczytaj każde słowo na każdej stronie. Sprawdź, czy dane kontaktowe działają. Otwórz stronę na telefonie. Upewnij się, że obrazy są twoje lub mają odpowiednią licencję. Następnie opublikuj i udostępnij ją tam, gdzie już są twoi odwiedzający. Jeśli chcesz, by całość nic nie kosztowała, jak zrobić stronę internetową za darmo szczegółowo omawia darmowe opcje hostingu.

Pytania