Jak stworzyć stronę internetową w HTML, CSS i JavaScript z pomocą AI — kompletny przewodnik

Ten artykuł jest dla osób, które chcą mieć pełną kontrolę nad swoją stroną internetową. Nie przez kreator, nie przez WordPress — przez czysty kod HTML, CSS i JavaScript, napisane z pomocą sztucznej inteligencji. Narzędzia AI takie jak Claude czy Gemini potrafią wygenerować kompletny, działający kod strony na podstawie Twojego opisu. Ty musisz wiedzieć, jak ten kod odebrać, gdzie go zapisać i jak przenieść na serwer. Dokładnie tego Cię tutaj nauczę.

Przeprowadzę Cię przez cały proces — od przygotowania środowiska pracy na komputerze, przez komunikację z AI i generowanie kodu, aż po wgranie gotowej strony na serwer przez Total Commander i jej uruchomienie pod własną domeną. Każdy krok jest opisany z taką szczegółowością, żeby dało się go wykonać nawet bez wcześniejszego kontaktu z kodem.

Jeśli szukasz prostszej drogi — stworzenia strony na WordPressie bez pisania kodu — przeczytaj mój poradnik o tworzeniu strony internetowej krok po kroku. A jeśli wolisz zlecić całą robotę specjaliście, sprawdź ile to kosztuje i umów się na bezpłatną konsultację.

Ten artykuł jest jednym z najobszerniejszych na stronie — liczy około 6000 słów i składa się z siedmiu części. Nie trzeba go przerabiać za jednym razem. Można go traktować jak checklistę albo kurs w siedmiu krokach — wracać do kolejnych części w miarę potrzeby. Warto zapisać go w zakładkach przeglądarki.

Dlaczego strona w czystym HTML zamiast WordPressa?

WordPress to świetne narzędzie i sam go czasem wykorzystuję. Ale ma swoje ograniczenia, o których rzadko się mówi — szczególnie w kontekście małych, prostych stron firmowych.

WordPress to system zarządzania treścią, który wymaga bazy danych, PHP na serwerze, regularnych aktualizacji i dbania o bezpieczeństwo. Każda niezaktualizowana wtyczka to potencjalna furtka dla włamywacza. Każdy motyw to setki plików, z których większości Twoja strona nigdy nie użyje. Do tego dochodzi czas ładowania — WordPress generuje strony dynamicznie przy każdym wejściu użytkownika, co wymaga mocy obliczeniowej serwera.

Strona w czystym HTML to zupełnie inna filozofia. Masz kilka plików — HTML, CSS, ewentualnie JavaScript — i nic więcej. Nie ma bazy danych, nie ma systemu logowania, nie ma panelu administracyjnego. Pliki leżą na serwerze i przeglądarka po prostu je wyświetla. Efekt? Strona ładuje się błyskawicznie, jest praktycznie niemożliwa do zhakowania (bo nie ma co hakować — nie ma systemu logowania ani bazy danych) i nie wymaga żadnych aktualizacji.

Oczywiście jest haczyk — żeby zmienić treść na stronie w HTML, musisz edytować pliki. Nie masz panelu administracyjnego z przyciskiem „Edytuj wpis". Ale jeśli Twoja strona to wizytówka firmy, która zmienia się raz na kilka miesięcy (nowy numer telefonu, nowa usługa w ofercie, zmiana godzin otwarcia), to ten „haczyk" w praktyce nie istnieje. A z pomocą AI edycja pliku HTML jest kwestią minuty — dosłownie wysyłasz do Claude obecny plik i mówisz co zmienić.

Podsumowując — strona w czystym HTML ma sens, kiedy potrzebujesz szybkiej, bezpiecznej i taniej w utrzymaniu wizytówki firmowej, a nie rozbudowanego portalu z blogiem, sklepem i systemem rezerwacji. Jeśli chcesz wiedzieć więcej o tym, czym jest strona firmowa i dlaczego lokalna firma jej potrzebuje, opisałem to w osobnym artykule.

Czego potrzebujesz zanim zaczniesz

Zanim wygenerujesz pierwszą linijkę kodu, przygotuj trzy rzeczy:

Pierwsza to domena i hosting. Domena to adres Twojej strony (np. mojafirma.pl), a hosting to serwer, na którym będą leżeć pliki. Rejestrujesz je u dostawcy hostingu. Sam korzystam z dhosting.pl i polecam ich z konkretnych powodów: to polska firma z ponad 17-letnim stażem, dane przechowywane są w Polsce (zgodność z RODO), ma autorski panel zarządzania (dPanel), a do tego bezpłatny certyfikat SSL i wsparcie techniczne po polsku. Dla strony w czystym HTML wystarczy pakiet Start Web Hosting za 89 zł netto za pierwszy rok. Możesz też przetestować za darmo przez 14 dni.

Jeśli chcesz wiedzieć więcej o tym, czym jest domena lub czym jest hosting i jak go wybrać, mam na to osobne artykuły.

Druga rzecz to konto w serwisie AI. W tym poradniku pokażę dwie ścieżki: Claude (od firmy Anthropic) i Gemini (od Google). Obie mają darmowe wersje, które wystarczą do wygenerowania strony. Płatne plany dają więcej możliwości (lepsze modele, więcej wiadomości, dodatkowe funkcje), ale na start nie są konieczne.

Trzecia rzecz to programy na komputerze: edytor tekstu do kodu (Visual Studio Code — darmowy) i Total Commander do przesyłania plików na serwer (shareware — można używać za darmo).

Teraz przejdźmy do konkretów.

Część I: Przygotowanie środowiska pracy na komputerze

Struktura folderów — fundament porządku

Zanim zaczniesz cokolwiek generować, przygotuj na swoim komputerze strukturę folderów, w której będą „leżeć" pliki Twojej strony. To ważne, bo dokładnie tę strukturę przeniesiesz potem na serwer — plik po pliku, folder po folderze.

Utwórz na dysku (np. na Pulpicie lub w Dokumentach) główny folder o nazwie odpowiadającej Twojej domenie. Wewnątrz niego utwórz podfoldery. Oto struktura, którą polecam:

mojafirma.pl/
├── index.html          ← strona główna
├── uslugi.html         ← podstrona z ofertą
├── o-mnie.html         ← podstrona "o firmie"
├── kontakt.html        ← podstrona kontaktowa
├── polityka-prywatnosci.html  ← obowiązkowa strona prawna
├── css/
│   └── style.css       ← arkusz stylów (wygląd strony)
├── js/
│   └── script.js       ← skrypty JavaScript (interaktywność)
└── img/
    ├── logo.png        ← logo firmy
    ├── hero.jpg        ← zdjęcie główne
    └── ...             ← pozostałe grafiki

Każdy z tych elementów ma swoją rolę. Plik index.html to zawsze strona główna — serwer automatycznie wyświetla ten plik, gdy ktoś wpisze Twój adres w przeglądarkę. Folder css/ zawiera arkusz stylów, który kontroluje kolory, czcionki, układ elementów na stronie. Folder js/ przechowuje skrypty JavaScript — na przykład obsługę menu mobilnego, formularza kontaktowego czy animacji. Folder img/ to miejsce na wszystkie grafiki.

Dlaczego taka a nie inna organizacja? Bo jest czytelna, skalowalna i zgodna z powszechnie przyjętą konwencją w branży. Gdy kiedyś ktoś inny (lub Ty za pół roku) otworzy te pliki — od razu zrozumie co jest gdzie.

Ważna zasada: nazwy plików i folderów pisz małymi literami, bez polskich znaków, bez spacji. Zamiast spacji używaj myślnika. Zamiast „Usługi firmy.html" napisz „uslugi.html" lub „uslugi-firmy.html". Serwery rozróżniają wielkość liter, a polskie znaki i spacje mogą powodować problemy z wyświetlaniem.

Instalacja i konfiguracja Visual Studio Code

Visual Studio Code (w skrócie VS Code) to darmowy edytor kodu od Microsoftu. Jest lekki, szybki i doskonale nadaje się do edycji plików HTML, CSS i JavaScript. Możesz w nim przeglądać, modyfikować i zapisywać pliki swojej strony.

Instalacja:

Wejdź na stronę code.visualstudio.com i pobierz wersję odpowiednią dla Twojego systemu (Windows, macOS lub Linux). Instalacja przebiega standardowo — uruchom pobrany plik i postępuj zgodnie z instrukcjami. Podczas instalacji na Windows zaznacz opcje „Add to PATH" i „Register Code as an editor for supported file types" — ułatwi to późniejszą pracę.

Pierwsze uruchomienie i konfiguracja:

Po uruchomieniu VS Code zobaczysz ekran powitalny. Zamknij go i otwórz folder swojej strony: menu File → Open Folder → wskaż folder mojafirma.pl, utworzony wcześniej. W lewym panelu pojawi się drzewo plików — dokładnie ta struktura, przygotowana wcześniej.

Przydatne rozszerzenia:

VS Code ma system rozszerzeń, które dodają mu nowe funkcje. Kliknij ikonę kwadratów po lewej stronie (lub wciśnij Ctrl+Shift+X) żeby otworzyć panel rozszerzeń. Wyszukaj i zainstaluj następujące:

Prettier (autor: Prettier) — automatycznie formatuje kod, żeby był czytelny i uporządkowany. Nie wpływa na działanie strony, ale znacząco ułatwia czytanie i edytowanie kodu.

HTML CSS Support — podpowiada nazwy klas CSS i atrybutów HTML podczas pisania.

Te dwa rozszerzenia wystarczą do wygodnej pracy ze stroną w HTML. Więcej rozszerzeń (w tym integrację z AI) opiszę w dalszej części artykułu.

Podgląd strony w przeglądarce — wbudowany serwer HTTP Pythona

Żeby zobaczyć jak Twoja strona wygląda w przeglądarce podczas pracy, potrzebujesz lokalnego serwera. Wiele popularnych rozszerzeń VS Code do tego celu (np. Live Server z 72 milionami pobrań) ma poważne luki bezpieczeństwa — w lutym 2026 ujawniono krytyczną podatność CVE-2025-65717, która umożliwiała zdalną kradzież plików z komputera developera. Jeśli masz zainstalowane rozszerzenie Live Server — odinstaluj je.

Najbezpieczniejszym i najprostszym rozwiązaniem jest wbudowany serwer HTTP Pythona. Nie wymaga instalowania żadnych rozszerzeń VS Code — korzysta z Pythona, który prawdopodobnie już masz na komputerze (jest domyślnie zainstalowany na macOS i większości dystrybucji Linuxa).

Na Windows musisz zainstalować Pythona ręcznie:

Wejdź na python.org/downloads i kliknij duży przycisk „Download Python" — pobierze najnowszą stabilną wersję. Uruchom pobrany plik instalacyjny. Na pierwszym ekranie instalatora koniecznie zaznacz opcję „Add python.exe to PATH" — to checkbox na samym dole okna. Bez tego komenda python nie będzie działać w terminalu. Następnie kliknij „Install Now" i poczekaj aż instalacja się zakończy.

Żeby sprawdzić czy Python jest zainstalowany i dostępny, otwórz terminal w VS Code (menu Terminal → New Terminal lub skrót Ctrl+`) i wpisz:

python --version

Jeśli zobaczysz numer wersji (np. Python 3.12.5) — wszystko działa. Jeśli system odpowie „nie rozpoznano polecenia" — spróbuj python3 --version lub py --version (Windows czasem używa innej nazwy). Jeśli żadna komenda nie działa, Python nie został dodany do PATH — uruchom instalator ponownie, kliknij „Modify" i upewnij się, że opcja PATH jest zaznaczona.

Jak uruchomić podgląd strony:

W VS Code otwórz terminal (Ctrl+`). Upewnij się, że terminal jest w folderze Twojej strony (powinien być, jeśli folder został otwarty przez File → Open Folder). Wpisz komendę:

python -m http.server 8000

W terminalu pojawi się komunikat Serving HTTP on 0.0.0.0 port 8000. Otwórz przeglądarkę i wpisz adres http://localhost:8000 — zobaczysz swoją stronę. Jeśli w folderze jest plik index.html, wyświetli się automatycznie.

Żeby zatrzymać serwer, wróć do terminala i wciśnij Ctrl+C.

Jedna różnica w porównaniu z rozszerzeniami typu Live Server: serwer Pythona nie odświeża strony automatycznie po każdej zmianie w kodzie. Po edycji pliku musisz ręcznie odświeżyć stronę w przeglądarce klawiszem F5. To drobna niedogodność w zamian za pełne bezpieczeństwo — serwer Pythona jest częścią standardowej biblioteki języka, rozwijany i audytowany przez społeczność od ponad 20 lat.

Część II: Tworzenie strony z pomocą AI

Teraz dochodzimy do sedna — jak wykorzystać sztuczną inteligencję do napisania kodu Twojej strony. Opiszę trzy podejścia, od najprostszego do najbardziej zaawansowanego:

1. Claude Desktop — generujesz kod w rozmowie, kopiujesz pliki ręcznie
2. Google Gemini — generujesz kod przez przeglądarkę, kopiujesz pliki ręcznie
3. VS Code z rozszerzeniem AI — AI pisze kod bezpośrednio w Twoich plikach (zaawansowane)

Zacznij od pierwszego lub drugiego podejścia. Trzecie jest dla osób, które poczują się pewnie z kodem i zechcą przyspieszyć pracę.

Podejście A: Tworzenie strony z Claude Desktop

Czym jest Claude Desktop i jak go skonfigurować

Claude Desktop to aplikacja na komputer (Windows i macOS) od firmy Anthropic, która daje dostęp do Claude — jednego z najzdolniejszych modeli AI na rynku. Zaletą aplikacji desktopowej nad wersją przeglądarkową jest wygodniejsza praca z dłuższymi konwersacjami i łatwiejsze kopiowanie kodu.

Krok 1 — Załóż konto Anthropic:

Wejdź na claude.ai i zarejestruj się. Możesz użyć adresu e-mail lub konta Google. Darmowe konto (Free) daje dostęp do modelu Claude Sonnet, który w zupełności wystarczy do wygenerowania strony. Jeśli chcesz korzystać z modelu Claude Opus (potężniejszego i lepszego w złożonych zadaniach), potrzebujesz planu Pro za 20 USD miesięcznie.

Krok 2 — Pobierz aplikację Claude Desktop:

Przejdź na claude.ai/download i pobierz wersję dla swojego systemu. Zainstaluj i uruchom aplikację. Zaloguj się tymi samymi danymi z rejestracji na stronie.

Krok 3 — Zapoznaj się z interfejsem:

Po zalogowaniu zobaczysz okno czatu. Na dole jest pole do wpisywania wiadomości, nad nim historia rozmowy. Po prawej stronie (lub w osobnym panelu) mogą pojawiać się tzw. Artefakty — to interaktywne elementy, które Claude generuje w odpowiedzi na Twoje prośby. Artefaktem może być fragment kodu, podgląd strony HTML, wykres, czy dokument.

Artefakty są kluczowe dla naszego procesu. Gdy poprosisz Claude o wygenerowanie kodu HTML, wyświetli go właśnie jako artefakt — z przyciskiem „Kopiuj" i możliwością podglądu.

Jak komunikować się z Claude, żeby dostać dobry kod

Jakość wygenerowanego kodu zależy bezpośrednio od jakości Twojego opisu. Im precyzyjniej opiszesz czego potrzebujesz, tym lepszy wynik otrzymasz. To nie jest magia — to instrukcja, którą AI interpretuje dosłownie.

Oto szablon wiadomości, który możesz wykorzystać jako punkt startowy. Skopiuj go, uzupełnij swoimi danymi i wyślij do Claude:

Stwórz kompletną stronę internetową dla mojej firmy. Oto szczegóły:

FIRMA:
- Nazwa: [nazwa Twojej firmy]
- Branża: [np. hydraulik, salon kosmetyczny, kancelaria prawna]
- Lokalizacja: [miasto]
- Telefon: [numer]
- Email: [adres email]
- Godziny pracy: [np. pon-pt 8:00-16:00]

STRUKTURA STRONY:
- Strona główna (index.html) — nagłówek z nazwą firmy i hasłem,
  sekcja "co robimy" z krótkim opisem usług, sekcja z opiniami klientów,
  sekcja kontaktowa z telefonem i formularzem
- Podstrona usługi (uslugi.html) — lista usług z opisami i cenami
- Podstrona o firmie (o-mnie.html) — krótki tekst o firmie,
  doświadczenie, podejście do pracy
- Podstrona kontakt (kontakt.html) — formularz kontaktowy,
  mapa dojazdu, dane firmy

WYMAGANIA TECHNICZNE:
- Czysty HTML5, CSS3 i JavaScript (bez frameworków)
- Strona musi być w pełni responsywna (działać na telefonach i tabletach)
- CSS w osobnym pliku css/style.css
- JavaScript w osobnym pliku js/script.js
- Menu nawigacyjne wspólne dla wszystkich podstron
- Hamburger menu na urządzeniach mobilnych
- Formularz kontaktowy (frontend — walidacja w JS)
- Sekcja z opinami klientów
- Stopka z danymi firmy, linkami do podstron i informacją o prawach autorskich
- Szybkie ładowanie — bez zewnętrznych bibliotek CSS/JS
- Kolorystyka: [podaj kolory lub napisz "zaproponuj profesjonalną kolorystykę"]

Wygeneruj kod dla każdego pliku osobno:
1. Najpierw index.html
2. Potem style.css
3. Potem script.js
4. Potem uslugi.html
5. Potem o-mnie.html
6. Potem kontakt.html
7. Na końcu polityka-prywatnosci.html

Zacznij od pliku index.html.

Tak sformułowana instrukcja daje Claude pełny kontekst — wie co to za firma, co ma być na stronie, jak strona ma wyglądać i w jakiej kolejności generować pliki.

Dlaczego prosisz o pliki osobno? Bo Claude ma ograniczoną długość odpowiedzi. Gdybyś poprosił o wszystko naraz, mógłby uciąć kod w połowie. Generowanie plik po pliku daje lepsze rezultaty i łatwiej je kontrolować.

Jak odbierać i zapisywać wygenerowany kod

Po wysłaniu powyższego promptu Claude wygeneruje kod pliku index.html i wyświetli go jako artefakt. Teraz musisz ten kod przenieść do pliku na swoim komputerze. Masz dwie możliwości:

Opcja 1 — Pobierz artefakt jako plik: Jeśli Claude wygenerował artefakt HTML, w prawym dolnym rogu panelu artefaktów znajdziesz przycisk pobierania (ikona strzałki w dół). Kliknij go — plik zostanie pobrany do folderu Pobrane na Twoim komputerze. Przenieś go do odpowiedniego miejsca w strukturze folderów Twojej strony.

Opcja 2 — Skopiuj kod ręcznie: W panelu artefaktów kliknij przycisk „Kopiuj kod" (ikona kopiowania). Następnie otwórz VS Code, utwórz nowy plik (File → New File), wklej kod (Ctrl+V) i zapisz plik (Ctrl+S) pod właściwą nazwą w odpowiednim folderze.

Po zapisaniu pliku index.html napisz do Claude:

Świetnie. Teraz wygeneruj plik css/style.css z kompletnym arkuszem stylów
dla tej strony.

Claude wygeneruje CSS. Skopiuj go i zapisz jako style.css w folderze css/. Powtórz procedurę dla kolejnych plików — script.js (zapisz w folderze js/), potem kolejne pliki HTML.

Podgląd strony w przeglądarce

Po zapisaniu przynajmniej trzech plików (index.html, css/style.css, js/script.js) możesz zobaczyć jak strona wygląda. Uruchom serwer Pythona: otwórz terminal w VS Code (Ctrl+`), upewnij się że jesteś w folderze strony i wpisz python -m http.server 8000. Następnie otwórz przeglądarkę i wejdź na adres http://localhost:8000. Zobaczysz swoją stronę — dokładnie tak, jak będzie wyglądać na serwerze.

Alternatywnie możesz znaleźć plik index.html w Eksploratorze Windows i kliknąć go dwukrotnie — strona też się otworzy, ale w trybie file:///. Różnica jest istotna: tryb file:/// potrafi blokować działanie niektórych skryptów JavaScript (ze względu na politykę bezpieczeństwa przeglądarki zwaną CORS) oraz ładowanie zewnętrznych czcionek. Jeśli strona wygląda dobrze po dwukliku — w porządku. Ale jeśli coś nie działa (np. formularz, animacja, czcionki), zanim zaczniesz szukać błędu w kodzie — uruchom stronę przez python -m http.server. Jest duża szansa, że problem zniknie, bo wynikał z ograniczeń trybu file:///, a nie z Twojego kodu. Po każdej zmianie w pliku odśwież stronę w przeglądarce klawiszem F5.

Jak poprawiać i ulepszać stronę w rozmowie z Claude

Pierwszy wygenerowany kod rzadko jest idealny. To normalne. Strona może wymagać poprawek — inny kolor, inna czcionka, dodatkowa sekcja, poprawione odstępy. Tutaj właśnie ujawnia się siła pracy z AI — poprawki są szybkie i precyzyjne.

Oto kilka przykładowych instrukcji, które możesz wysłać do Claude:

Aby zmienić kolorystykę: „Zmień kolor główny nagłówków z niebieskiego na ciemnozielony (#2D5A27). Kolor przycisków ustaw na pomarańczowy (#E87C3E). Zaktualizuj plik style.css."

Aby dodać sekcję: „Dodaj do index.html sekcję 'Dlaczego my' z trzema kolumnami: 'Doświadczenie' (ikona zegara), 'Uczciwość' (ikona tarczy), 'Gwarancja' (ikona gwiazdki). Użyj prostych ikon w SVG."

Aby poprawić responsywność: „Menu na telefonie nie działa — kliknięcie hamburgera nic nie robi. Sprawdź plik script.js i popraw obsługę menu mobilnego."

Aby zmienić tekst: „Na stronie uslugi.html zmień opis pierwszej usługi na: [wklej nowy tekst]."

Każda taka poprawka to nowa wiadomość w tej samej rozmowie. Claude pamięta kontekst całej konwersacji, więc wie jak wygląda Twoja strona i co już wygenerował. Po każdej poprawce Claude wyśle zaktualizowany kod — skopiuj go i zastąp odpowiedni plik na swoim komputerze.

Wskazówka: możesz też wysłać Claude zrzut ekranu strony z zaznaczonymi problemami. Claude rozumie obrazy i potrafi na ich podstawie zidentyfikować co poprawić w kodzie.

Podejście B: Tworzenie strony z Google Gemini

Czym jest Gemini i jak z niego korzystać

Gemini to model AI od Google, dostępny na gemini.google.com. Jego kluczową funkcją dla naszych celów jest Canvas — interaktywny panel, w którym Gemini generuje kod i wyświetla jego podgląd. Działa podobnie do artefaktów w Claude, ale z kilkoma różnicami.

Gemini jest dostępny za darmo z kontem Google. Wersja darmowa korzysta z modelu Gemini Flash, który jest szybki i wystarczająco dobry do generowania kodu stron. Subskrypcja Google AI Pro (wcześniej Google One AI Premium) daje dostęp do modelu Gemini Pro, który generuje bardziej dopracowany kod z lepszym designem. Na luty 2026 najnowszym modelem jest Gemini 3.1 Pro — wyróżnia się szczególnie dobrym generowaniem interfejsów użytkownika.

Krok 1 — Zaloguj się do Gemini:

Wejdź na gemini.google.com i zaloguj się kontem Google. Jeśli nie masz konta Google — załóż je (to bezpłatne).

Krok 2 — Włącz Canvas:

Canvas to tryb pracy Gemini, w którym generowany kod wyświetla się w osobnym panelu z podglądem. Możesz go aktywować na dwa sposoby: albo bezpośrednio poprosisz Gemini „wygeneruj stronę w Canvas", albo klikniesz ikonę Canvas w pasku narzędzi nad polem wiadomości (jeśli jest dostępna w Twojej wersji).

Krok 3 — Wygeneruj stronę:

Użyj podobnego promptu jak w przypadku Claude. Możesz go dostosować — Gemini równie dobrze rozumie szczegółowe instrukcje:

Używając Canvas, stwórz kompletną stronę internetową wizytówkę
dla firmy [nazwa] z branży [branża] w [miasto].

Strona ma składać się z jednego pliku HTML z osadzonym CSS i JavaScript.
Ma zawierać: nagłówek z logo i nawigacją, sekcję hero z hasłem i przyciskiem
CTA, sekcję usług (3-4 usługi w kafelkach), sekcję "o firmie",
sekcję z opiniami klientów, formularz kontaktowy i stopkę.

Strona musi być w pełni responsywna, nowoczesna wizualnie
i szybko się ładować.

Dane kontaktowe:
- Telefon: [numer]
- Email: [email]
- Adres: [adres]
- Godziny: [godziny]

Gemini wygeneruje stronę i wyświetli jej podgląd w panelu Canvas. Zobaczysz działającą stronę, którą możesz od razu ocenić.

Ważna różnica: jeden plik vs wiele plików

Zauważ, że w przykładowym prompcie dla Gemini poprosiłem o stronę w jednym pliku HTML z osadzonym CSS i JavaScript. To dlatego, że Canvas najlepiej radzi sobie z pojedynczymi plikami — generuje jeden kompletny dokument HTML, w którym style CSS są w sekcji <style>, a JavaScript w sekcji <script>.

Takie podejście (wszystko w jednym pliku) ma swoje zalety — prostota, jeden plik do skopiowania — i wady — trudniejsza późniejsza edycja, powtarzający się kod na wielu podstronach. Dla prostej strony wizytówki z jedną lub dwiema podstronami to wystarczające rozwiązanie.

Jeśli chcesz osobnych plików (tak jak w strukturze opisanej na początku), poproś Gemini: „Teraz rozdziel ten kod na osobne pliki: index.html, css/style.css i js/script.js. Wygeneruj każdy z nich osobno." Gemini wygeneruje je w kolejnych wiadomościach.

Jak kopiować kod z Gemini

W panelu Canvas masz kilka opcji:

Przycisk „Kopiuj kod" — kopiuje cały wygenerowany kod do schowka. Otwórz VS Code, utwórz nowy plik, wklej kod i zapisz pod właściwą nazwą.

Możesz też kliknąć „Pokaż kod" (jeśli widzisz podgląd strony) żeby przełączyć się na widok kodu źródłowego, a potem go skopiować.

Proces iterowania (poprawiania) wygląda tak samo jak w Claude — piszesz co zmienić, Gemini aktualizuje kod, kopiujesz zaktualizowaną wersję.

Claude vs Gemini — którą AI wybrać?

Oba narzędzia nadają się do generowania stron. Oto praktyczne różnice, które mogą pomóc Ci zdecydować.

Claude (szczególnie model Opus) generuje bardziej uporządkowany, semantyczny kod HTML z lepszą strukturą CSS. Lepiej radzi sobie ze złożonymi wieloplikowymi projektami i utrzymywaniem spójności między plikami. Artefakty pozwalają na wygodne pobieranie i kopiowanie kodu. Wersja darmowa ma ograniczoną liczbę wiadomości dziennie.

Gemini (szczególnie Gemini 3.1 Pro) jest szybszy w generowaniu i generuje bardziej atrakcyjny wizualnie design „z pudełka". Canvas daje natychmiastowy podgląd strony. Darmowa wersja jest hojniejsza w limicie wiadomości. Gorzej radzi sobie z utrzymaniem spójności w wieloplikowych projektach.

Moja rekomendacja: zacznij od tego narzędzia, które już znasz lub którego interfejs bardziej Ci odpowiada. Jeśli generujesz prostą stronę wizytówkę w jednym pliku — Gemini i Canvas będą szybsze. Jeśli budujesz rozbudowaną stronę z kilkoma podstronami i osobnymi plikami CSS/JS — Claude da lepsze rezultaty w dłuższej konwersacji.

Podejście C: VS Code z rozszerzeniem AI (dla zaawansowanych)

To podejście eliminuje konieczność ręcznego kopiowania kodu między AI a plikami. Zamiast tego AI pisze kod bezpośrednio w Twoich plikach, wewnątrz VS Code. Jest to wygodniejsze i szybsze, ale wymaga nieco więcej konfiguracji i zrozumienia jak to działa.

Opcja 1: Rozszerzenie Cline (dawniej Claude Dev)

Cline to rozszerzenie do VS Code, które zamienia edytor w autonomiczne środowisko programistyczne z AI. Działa z różnymi modelami — Claude Sonnet, Claude Opus, GPT-4 i innymi. Jego wyróżniającą cechą jest tryb „Plan → Review → Act": Cline najpierw pokazuje Ci co zamierza zrobić, czekasz na Twoją akceptację, a potem wykonuje zmiany w plikach.

Instalacja Cline:

Otwórz VS Code, przejdź do panelu rozszerzeń (Ctrl+Shift+X), wyszukaj „Cline" i kliknij „Install". Po instalacji ikona Cline pojawi się na lewym pasku bocznym.

Konfiguracja klucza API:

Cline wymaga klucza API do modelu, z którego chcesz korzystać. Dla Claude potrzebujesz klucza z console.anthropic.com. Załóż konto, przejdź do sekcji API Keys, utwórz nowy klucz i skopiuj go. W VS Code kliknij ikonę Cline i w ustawieniach wklej klucz API.

Klucz API to nie to samo co konto na claude.ai — to osobne konto deweloperskie z rozliczeniem za zużycie (płacisz za ilość przetworzonych tokenów). Koszt wygenerowania całej strony to zwykle kilka do kilkunastu złotych, w zależności od modelu i liczby iteracji.

Alternatywnie, jeśli masz subskrypcję Claude Pro, możesz skonfigurować Cline tak, żeby korzystał z Twojego konta przez Claude Max — szczegóły znajdziesz w dokumentacji rozszerzenia.

Jak używać Cline do tworzenia strony:

Po skonfigurowaniu klucza, otwórz folder swojej strony w VS Code, kliknij ikonę Cline i w polu czatu napisz:

Stwórz kompletną stronę firmową w czystym HTML, CSS i JavaScript.
Firma: [nazwa], branża: [branża], miasto: [miasto].
Utwórz pliki: index.html, css/style.css, js/script.js,
uslugi.html, o-mnie.html, kontakt.html.
Strona ma być responsywna, z menu hamburgerowym na mobile,
formularzem kontaktowym i sekcją opinii klientów.

Cline przeanalizuje Twoją prośbę, pokaże plan działania (które pliki utworzy i co w nich będzie) i poczeka na Twoją akceptację. Po kliknięciu „Accept" zacznie tworzyć pliki bezpośrednio w Twoim folderze. Zobaczysz na żywo jak pojawiają się nowe pliki w drzewie folderów.

Kluczowa zaleta: nie musisz nic kopiować. Pliki od razu lądują tam, gdzie powinny.

Opcja 2: Rozszerzenie Continue z Gemini

Continue to drugie popularne rozszerzenie AI do VS Code. Jest w pełni open-source i wspiera wiele dostawców modeli, w tym Google Gemini.

Instalacja Continue:

W panelu rozszerzeń VS Code (Ctrl+Shift+X) wyszukaj „Continue" i zainstaluj. Po instalacji pojawi się ikona Continue na lewym pasku bocznym.

Konfiguracja z Gemini:

Kliknij ikonę Continue, w ustawieniach wybierz dostawcę modelu „Google Gemini" i podaj klucz API. Klucz API do Gemini uzyskasz na aistudio.google.com — kliknij „Get API Key", utwórz nowy klucz i skopiuj go.

Google oferuje darmowy limit użycia API Gemini, który wystarczy na wygenerowanie wielu stron. Jedno zastrzeżenie, o którym warto wiedzieć: w darmowym planie Google AI Studio dane przesyłane przez API mogą być wykorzystywane przez Google do trenowania i ulepszania swoich modeli. Przy generowaniu kodu strony firmowej (nazwy, adresy, numery telefonów) to raczej nie problem — te dane i tak będą publicznie widoczne na stronie. Ale nie wysyłaj przez darmowe API wrażliwych danych biznesowych, haseł, danych klientów czy wewnętrznych dokumentów firmy. Jeśli zależy Ci na pełnej prywatności danych, płatny plan Google AI Pro wyłącza wykorzystywanie Twoich danych do treningu modeli.

Jak używać Continue:

Continue działa inaczej niż Cline — ma tryb Chat (rozmowa o kodzie), Edit (modyfikacja zaznaczonego fragmentu) i Autocomplete (podpowiedzi podczas pisania). Do tworzenia strony od zera najwygodniejszy jest tryb Chat — piszesz instrukcję, Continue generuje kod, a Ty decydujesz czy go zastosować.

Wpisz w czacie Continue instrukcję tworzenia strony (analogiczną do wcześniejszych promptów). Continue wygeneruje kod i zaproponuje utworzenie plików. Zatwierdź — pliki pojawią się w Twoim folderze.

Opcja 3: Claude Code w VS Code

Claude Code to oficjalne rozszerzenie Anthropic do VS Code. Wymaga subskrypcji Claude Pro, Max, Teams lub Enterprise — albo rozliczenia pay-as-you-go (płatność za zużycie przez API, bez stałej subskrypcji). Oferuje ścisłą integrację z edytorem — wizualne porównywanie zmian (diff), podgląd planu działania, możliwość wskazywania plików przez @nazwaPliku.

Instalacja:

W panelu rozszerzeń wyszukaj „Claude Code" i zainstaluj oficjalne rozszerzenie od Anthropic. Po instalacji kliknij ikonę Claude Code i zaloguj się swoim kontem Anthropic (tym samym, którego używasz na claude.ai).

Kluczowa różnica vs Cline/Continue: Claude Code to oficjalne narzędzie Anthropic z najlepszą integracją z modelami Claude. Cline to narzędzie społeczności, które daje więcej kontroli i elastyczności (wybór dowolnego modelu). Continue to narzędzie open-source z najszerszym wsparciem dostawców. Dla naszego celu — generowania strony HTML — każde z nich wykona zadanie.

Część III: Co powinno być na Twojej stronie

AI wygeneruje kod, ale to Ty decydujesz co na stronie będzie. Ta sekcja to lista elementów, które powinny znaleźć się na profesjonalnej stronie firmowej.

Strona główna (index.html)

Strona główna to Twoja wizytówka w Internecie — pierwsze wrażenie, które decyduje czy ktoś zostanie czy odejdzie. Powinna zawierać:

Nagłówek (header) z logo firmy (lub nazwą), menu nawigacyjnym prowadzącym do podstron i wyróżnionym przyciskiem kontaktowym (np. „Zadzwoń" lub „Umów wizytę"). Na urządzeniach mobilnych menu powinno zwijać się w ikonę hamburgera (trzy poziome kreski).

Sekcja hero — to duża, przyciągająca uwagę sekcja zaraz pod nagłówkiem. Zawiera główne hasło (np. „Hydraulik w Poznaniu — przyjadę tego samego dnia"), krótki opis (1-2 zdania wyjaśniające co robisz i dla kogo) oraz przycisk CTA (Call to Action), np. „Zadzwoń teraz" lub „Umów bezpłatną wycenę".

Sekcja usług — krótkie przedstawienie 3-4 głównych usług. Każda usługa w osobnym kafelku z ikoną, krótkim tytułem i opisem w 1-2 zdaniach. Link „Więcej" prowadzący do pełnej strony usług.

Sekcja „Dlaczego my" / Przewagi — 3-4 kluczowe powody, dla których klient powinien wybrać właśnie Ciebie. Na przykład: doświadczenie (ile lat na rynku), gwarancja na usługi, szybki czas reakcji, dojazd gratis.

Sekcja opinii klientów — cytaty od zadowolonych klientów z imieniem i miastem. Opinie budują zaufanie. Jeśli jeszcze nie masz opinii — dodaj tę sekcję, ale wypełnij ją gdy pojawią się pierwsze rekomendacje.

Sekcja kontaktowa — numer telefonu (klikalny na mobilnych, żeby od razu można było zadzwonić), formularz kontaktowy, adres firmy.

Stopka (footer) — nazwa firmy, NIP, adres, linki do podstron, link do polityki prywatności, informacja o prawach autorskich.

Dodatkowe podstrony

Usługi — szczegółowy opis każdej usługi z cenami (jeśli możesz je podać), zakresem pracy i ewentualnie czasem realizacji. Przejrzystość cenowa buduje zaufanie — klient wie czego się spodziewać zanim zadzwoni.

O mnie / O firmie — kim jesteś, jak długo działasz, co Cię wyróżnia, jakie jest Twoje podejście do pracy. Ludzie kupują od ludzi — pokaż się jako osoba, nie jako bezosobowa firma.

Kontakt — formularz kontaktowy, wszystkie możliwe sposoby kontaktu (telefon, email, media społecznościowe), mapa dojazdu (jeśli masz fizyczną lokalizację), godziny pracy.

Polityka prywatności — obowiązkowa jeśli zbierasz jakiekolwiek dane (formularz kontaktowy, Google Analytics). Poproś Claude o wygenerowanie polityki prywatności zgodnej z RODO — podaj mu nazwę firmy, adres, NIP, jakie dane zbierasz i w jakim celu.

Jeśli chcesz pogłębić temat pisania treści na stronę, przeczytaj mój artykuł o tym, jak samodzielnie napisać teksty na stronę firmową.

Część IV: Optymalizacja przed wgraniem na serwer

Zanim przeniesiesz pliki na serwer, wykonaj kilka czynności, które sprawią, że strona będzie szybsza i lepiej widoczna w Google.

Optymalizacja grafik

Grafiki to najczęstsza przyczyna wolnego ładowania stron. Zdjęcie prosto z aparatu lub telefonu waży 3-8 MB — to niedopuszczalnie dużo. Na stronie firmowej żadna grafika nie powinna przekraczać 200 KB (a idealne jest poniżej 100 KB).

Przed wgraniem na stronę każde zdjęcie powinno przejść przez trzy kroki. Pierwszy to zmiana rozmiaru — grafika o szerokości 1920 pikseli wystarczy jako tło na pełnym ekranie, a dla mniejszych elementów 800 pikseli jest optymalnym rozmiarem. Drugi krok to kompresja — skorzystaj z darmowych narzędzi online jak TinyPNG lub Squoosh, które zmniejszają rozmiar pliku bez widocznej utraty jakości. Trzeci krok to wybór formatu — dla zdjęć używaj WebP (nowoczesny format, mniejszy niż JPEG przy tej samej jakości) lub JPEG. Dla grafik z przezroczystością (np. logo) używaj PNG lub SVG.

Zoptymalizowane grafiki umieść w folderze img/.

Podstawowe SEO

Nawet prosta strona w HTML powinna mieć podstawową optymalizację pod wyszukiwarki. Poproś Claude lub Gemini żeby w wygenerowanym kodzie zawarł:

Poprawne tagi <title> i <meta name="description"> na każdej podstronie — to tytuł i opis strony widoczny w wynikach Google.

Poprawną hierarchię nagłówków — jeden <h1> na podstronę (główny temat), <h2> dla podsekcji, <h3> dla dalszych zagłębień.

Atrybuty alt przy każdym obrazku — krótki opis tego, co jest na zdjęciu.

Semantyczne znaczniki HTML5: <header>, <nav>, <main>, <section>, <article>, <footer> — pomagają Google zrozumieć strukturę strony.

Więcej o podstawach SEO i o 5 działaniach SEO, które warto wykonać od razu po uruchomieniu strony przeczytasz w moich osobnych artykułach.

Sprawdzenie responsywności

Otwórz stronę w przeglądarce Chrome, kliknij prawym przyciskiem myszy → „Zbadaj" (Inspect), a potem kliknij ikonę urządzenia mobilnego w lewym górnym rogu panelu deweloperskiego (lub wciśnij Ctrl+Shift+M). Zobaczysz jak strona wygląda na różnych rozmiarach ekranów.

Sprawdź szczególnie: czy menu mobilne działa (hamburger rozwija się po kliknięciu), czy tekst jest czytelny bez powiększania, czy przyciski są wystarczająco duże żeby trafić palcem, czy nic nie „wychodzi" poza ekran tworząc poziomy scrollbar.

Jeśli coś wygląda źle — opisz problem Claude lub Gemini i poproś o poprawkę. Wyślij zrzut ekranu z zaznaczonym problemem — AI potrafi na tej podstawie zidentyfikować co poprawić w CSS.

Część V: Przeniesienie strony na serwer — Total Commander

Masz gotową stronę na swoim komputerze. Teraz czas przenieść ją na serwer, żeby była dostępna pod Twoją domeną dla wszystkich w Internecie.

Czym jest FTP i dlaczego używamy Total Commandera

FTP (File Transfer Protocol) to protokół do przesyłania plików między komputerem a serwerem. Działa podobnie jak kopiowanie plików z jednego folderu do drugiego — z tą różnicą, że drugi „folder" jest na serwerze w centrum danych.

Total Commander to menedżer plików dla Windows, który oprócz standardowego zarządzania plikami ma wbudowanego klienta FTP. Oznacza to, że możesz w jednym oknie widzieć pliki na swoim komputerze (po lewej stronie) i pliki na serwerze (po prawej) — i kopiować je między sobą przeciąganiem lub klawiszem F5.

Instalacja Total Commandera

Pobierz Total Commandera ze strony producenta: ghisler.com. Kliknij przycisk „Download" i wybierz wersję 64-bit (lub 32-bit jeśli masz starszy komputer). Zainstaluj program standardowo — uruchom pobrany plik i postępuj zgodnie z instrukcjami.

Total Commander jest dystrybuowany jako shareware z 30-dniowym okresem próbnym. Przez ten miesiąc możesz testować program bezpłatnie i ocenić, czy Ci odpowiada. Po upływie 30 dni, zgodnie z warunkami licencji, musisz wykupić licencję (kosztuje ok. 170 zł za wersję osobistą) lub odinstalować program. Program technicznie nie blokuje się po okresie próbnym — przy każdym uruchomieniu wyświetla okno z przypomnieniem o rejestracji — ale korzystanie z niego bez licencji po 30 dniach jest naruszeniem warunków użytkowania. Jeśli zależy Ci na w pełni darmowym rozwiązaniu wyłącznie do przesyłania plików na serwer, alternatywami są FileZilla (darmowa, open-source) lub WinSCP (darmowy, open-source). Konfiguracja FTP w tych programach wygląda analogicznie — podajesz te same dane (host, login, hasło, port). Total Commander ma natomiast tę przewagę, że służy jednocześnie jako codzienny menedżer plików — kupujesz jedno narzędzie i używasz go do wszystkiego.

Skąd wziąć dane do połączenia FTP

Dane do połączenia FTP znajdziesz w panelu zarządzania hostingiem. Jeśli korzystasz z dhosting.pl (co polecam), zaloguj się do dPanelu pod adresem dpanel.pl danymi, otrzymanymi przy zakładaniu konta.

W dPanelu przejdź do sekcji Konta FTP w menu po lewej stronie. Zobaczysz listę utworzonych kont FTP. Jeśli lista jest pusta — utwórz nowe konto klikając przycisk „+Dodaj". Ustaw login i hasło.

Potrzebne dane to:

Host (adres serwera): format TWÓJ_LOGIN.ftp.dhosting.pl (gdzie TWÓJ_LOGIN to Twoja nazwa konta w dhosting). Ten adres znajdziesz też w wiadomości powitalnej, otrzymanej e-mailem po aktywacji konta.

Login (nazwa użytkownika): Twój login do konta FTP — domyślnie jest to Twój główny login w dhosting.

Hasło: hasło do konta FTP, ustawione przy tworzeniu konta. W razie zapomnienia, możesz je zmienić w dPanelu w sekcji Konta FTP.

Port: 21 dla standardowego FTP lub 22 dla SFTP (szyfrowane połączenie). Jeśli chcesz korzystać z SFTP (co jest bezpieczniejsze), w dPanelu przejdź do Zaawansowane → Secure Shell (SSH) i włącz dostęp SSH jednym kliknięciem.

Konfiguracja połączenia FTP w Total Commander — krok po kroku

Uruchom Total Commandera. W górnym menu kliknij Sieć → Połączenia FTP (lub użyj skrótu klawiszowego Ctrl+F). Otworzy się okno z listą zapisanych połączeń — na razie jest pusta.

Kliknij przycisk Nowe połączenie. Pojawi się formularz konfiguracji. Uzupełnij go następująco:

Sesja: wpisz dowolną nazwę, po której rozpoznasz to połączenie, np. „dhosting — mojafirma.pl". Ta nazwa jest tylko dla Ciebie — nie wpływa na połączenie.

Nazwa hosta [:port]: wpisz adres serwera FTP, np. ftps://twojlogin.ftp.dhosting.pl. Jeśli używasz SFTP, dodaj port po dwukropku: twojlogin.ftp.dhosting.pl:22.

SSL/TLS: zaznacz tę opcję jeśli chcesz szyfrowane połączenie (zalecane). Jeśli używasz SFTP na porcie 22, zaznacz tę opcję.

Użytkownik: wpisz login do konta FTP.

Hasło: wpisz hasło do konta FTP.

Użyj hasła głównego do zabezpieczenia hasła: zaznacz tę opcję dla bezpieczeństwa — Total Commander zaszyfruje zapisane hasło. Przy pierwszym użyciu będziesz musiał ustawić hasło główne programu.

Zdalny katalog: wpisz /public_html — to folder na serwerze, w którym muszą znaleźć się pliki Twojej strony. Ustawienie go tutaj sprawi, że po połączeniu od razu zobaczysz właściwy folder.

Lokalny katalog: wpisz ścieżkę do folderu ze stroną na Twoim komputerze, np. C:\Users\TwojeImie\Desktop\mojafirma.pl. Dzięki temu po połączeniu po lewej stronie Total Commandera od razu zobaczysz pliki swojej strony.

Użyj trybu pasywnego do transferu (jak w przeglądarce WWW): zaznacz tę opcję — rozwiązuje większość problemów z połączeniem, szczególnie gdy korzystasz z routera lub sieci firmowej.

Kliknij OK żeby zapisać konfigurację.

Połączenie z serwerem i przesyłanie plików

Teraz połącz się z serwerem. W oknie połączeń FTP (Sieć → Połączenia FTP lub Ctrl+F) zaznacz zapisane połączenie i kliknij Połącz. Po chwili Total Commander nawiąże połączenie z serwerem.

Zobaczysz ekran podzielony na dwa panele:

Lewy panel — pliki na Twoim komputerze (folder ze stroną). Jeśli katalog lokalny został ustawiony przy konfiguracji, powinny tu być widoczne pliki index.html, css/, js/, img/ itd.

Prawy panel — pliki na serwerze (folder /public_html). Na początku może tu być pusty lub zawierać plik domyślny typu index.html od dostawcy hostingu.

Ważna zasada: pliki Twojej strony muszą trafić do katalogu public_html na serwerze. To jest „korzeń" Twojej domeny — wszystko co w nim umieścisz, będzie dostępne pod adresem Twojej strony. Plik index.html w public_html wyświetli się po wpisaniu Twojej domeny w przeglądarkę.

Jak skopiować pliki:

W lewym panelu zaznacz wszystkie pliki i foldery swojej strony. Żeby zaznaczyć wszystko, użyj skrótu Ctrl+A (lub kliknij pierwszy element, potem z wciśniętym Shiftem kliknij ostatni). Upewnij się, że prawy panel pokazuje wnętrze katalogu public_html.

Wciśnij klawisz F5 (Kopiuj) lub przeciągnij zaznaczone pliki z lewego panelu do prawego. Total Commander zapyta o potwierdzenie — kliknij OK. Rozpocznie się przesyłanie plików.

Poczekaj aż wszystkie pliki się przesłą. Dla typowej strony firmowej (kilka plików HTML, CSS, JS i kilka zdjęć) potrwa to od kilku sekund do minuty.

Co powinno trafić gdzie — mapa kopiowania

Żeby było absolutnie jasne, oto dokładna mapa tego, co z jakiego folderu na komputerze trafia do jakiego folderu na serwerze:

KOMPUTER (lewy panel)              →  SERWER (prawy panel)
─────────────────────                  ──────────────────────
mojafirma.pl/index.html            →  /public_html/index.html
mojafirma.pl/uslugi.html           →  /public_html/uslugi.html
mojafirma.pl/o-mnie.html           →  /public_html/o-mnie.html
mojafirma.pl/kontakt.html          →  /public_html/kontakt.html
mojafirma.pl/polityka-prywatnosci.html → /public_html/polityka-prywatnosci.html
mojafirma.pl/css/style.css         →  /public_html/css/style.css
mojafirma.pl/js/script.js          →  /public_html/js/script.js
mojafirma.pl/img/logo.png          →  /public_html/img/logo.png
mojafirma.pl/img/hero.jpg          →  /public_html/img/hero.jpg
mojafirma.pl/img/[pozostałe]       →  /public_html/img/[pozostałe]

Struktura folderów na serwerze musi być identyczna jak na komputerze. Jeśli w kodzie HTML masz odwołanie do pliku css/style.css, to na serwerze ten plik musi znajdować się w public_html/css/style.css. Jeśli ścieżki się nie zgodzą — strona nie będzie miała stylów, skryptów lub grafik.

Weryfikacja po wgraniu

Po przesłaniu plików otwórz przeglądarkę i wpisz adres swojej domeny (np. mojafirma.pl). Jeśli domena jest już skonfigurowana i propagacja DNS się zakończyła — powinieneś zobaczyć swoją stronę.

Jeśli zamiast strony widzisz błąd 404 lub stronę domyślną hostingu, sprawdź kilka rzeczy. Upewnij się, że plik index.html jest bezpośrednio w folderze public_html (a nie w podfolderze, np. public_html/mojafirma.pl/index.html — to częsty błąd). Sprawdź w dPanelu czy domena jest przypisana do właściwego katalogu. Jeśli domena została dopiero zarejestrowana, propagacja DNS może potrwać do 24-48 godzin — w tym czasie strona może być niedostępna pod nową domeną.

Jeśli strona się wyświetla ale wygląda inaczej niż lokalnie (brak stylów, brak grafik), problem jest prawie na pewno w ścieżkach do plików. Sprawdź w kodzie HTML czy odwołania do CSS, JS i grafik używają ścieżek względnych (np. css/style.css, a nie C:\Users\...\css\style.css).

Część VI: Konfiguracja po uruchomieniu

Certyfikat SSL

Jeśli korzystasz z dhosting.pl, darmowy certyfikat Let's Encrypt jest w cenie hostingu. Aktywuj go w dPanelu — instrukcja jest w sekcji pomocy dostawcy. Po aktywacji Twoja strona będzie dostępna pod adresem https://mojafirma.pl z ikoną kłódki w przeglądarce.

Dlaczego to ważne? Po pierwsze, przeglądarki oznaczają strony bez SSL jako „Niezabezpieczone" — co odstrasza odwiedzających. Po drugie, Google faworyzuje strony z SSL w wynikach wyszukiwania. Po trzecie, SSL chroni dane przesyłane przez formularze (np. formularz kontaktowy).

Więcej o tym, czym jest SSL i jak działa, przeczytasz w bazie wiedzy.

Google Search Console i Analytics

Tak samo jak w przypadku strony na WordPressie, strona w HTML powinna być podłączona do narzędzi Google. Różnica polega na sposobie dodania kodu śledzenia — zamiast wtyczki, dodajesz go bezpośrednio do kodu HTML.

Poproś Claude: „Dodaj do sekcji <head> pliku index.html kod śledzenia Google Analytics 4. Mój Measurement ID to G-XXXXXXXXXX." Claude wygeneruje odpowiedni fragment kodu, który wkleisz do pliku. Pamiętaj o dodaniu tego samego kodu do wszystkich podstron.

Analogicznie z Google Search Console — po weryfikacji własności domeny (np. przez rekord DNS u dostawcy domeny) wygeneruj i prześlij mapę strony (sitemap.xml). Poproś Claude: „Wygeneruj plik sitemap.xml dla strony z podstronami: index.html, uslugi.html, o-mnie.html, kontakt.html. Domena: mojafirma.pl."

Jeśli prowadzisz firmę lokalną, koniecznie skonfiguruj Profil Firmy w Google — to osobne narzędzie, które pozwala Twojej firmie pojawić się na mapach Google i w wynikach lokalnych.

Jak aktualizować stronę po wgraniu

Gdy chcesz zmienić coś na stronie (tekst, cenę, numer telefonu), proces jest prosty:

Otwórz plik, który chcesz zmienić, w VS Code na swoim komputerze. Wprowadź zmiany (ręcznie lub z pomocą AI — wyślij Claude aktualny plik i opisz co zmienić). Zapisz plik. Połącz się z serwerem przez Total Commander (Sieć → Połączenia FTP → wybierz zapisane połączenie → Połącz). Skopiuj zmieniony plik na serwer, nadpisując starą wersję (F5, potwierdź nadpisanie). Odśwież stronę w przeglądarce (Ctrl+F5 — wymusza pełne odświeżenie).

Cały proces zajmuje kilka minut. A jeśli korzystasz z VS Code z rozszerzeniem AI (Cline lub Continue), edycja z AI jest jeszcze szybsza — opisujesz zmianę, AI ją wprowadza, zapisujesz i przesyłasz.

Część VII: Wskazówki i najczęstsze problemy

Strona nie wyświetla się po wgraniu na serwer

Najczęstsze przyczyny: plik index.html nie jest w katalogu public_html (jest w podfolderze), literówka w nazwie pliku (Index.html zamiast index.html — serwery Linux rozróżniają wielkość liter), domena nie jest jeszcze aktywna (propagacja DNS trwa do 48 godzin).

Strona wygląda inaczej niż lokalnie

Brakuje stylów CSS lub grafik. Sprawdź w kodzie HTML czy ścieżki do plików są poprawne i względne. Poprawnie: <link href="css/style.css">. Niepoprawnie: <link href="C:/Users/Jan/Desktop/mojafirma.pl/css/style.css"> lub <link href="/css/style.css"> (ukośnik na początku może powodować problemy w niektórych konfiguracjach).

Formularz kontaktowy nie wysyła wiadomości

Formularz w czystym HTML/JavaScript działa tylko po stronie przeglądarki — może walidować dane, ale nie potrafi sam wysyłać emaili. Do wysyłania emaili potrzebujesz skryptu po stronie serwera (PHP) lub zewnętrznej usługi. Najprostsze rozwiązanie to skorzystanie z darmowego serwisu typu Formspree lub EmailJS — pozwalają one odbierać wiadomości z formularzy bez pisania kodu serwerowego. Poproś Claude o integrację wybranego serwisu z Twoim formularzem.

Menu hamburgerowe nie działa na telefonie

Sprawdź czy plik js/script.js jest prawidłowo podlinkowany w HTML (powinien być przed zamykającym tagiem </body>). Wyślij Claude zrzut ekranu problemu i treść pliku script.js z prośbą o diagnozę.

Strona wolno się ładuje

W 95% przypadków winne są grafiki. Skompresuj je przez TinyPNG lub Squoosh. Drugą przyczyną mogą być zewnętrzne czcionki — ładowanie Google Fonts dodaje dodatkowe zapytania do serwera. Rozważ użycie czcionek systemowych (Arial, Verdana, Georgia) lub pobierz pliki czcionek i osadź je lokalnie.

Ile kosztuje samodzielna strona HTML z AI?

Podsumujmy realne koszty na pierwszy rok:

Domena .pl — 50–100 zł rocznie. Hosting (dhosting.pl Start Web Hosting) — 89 zł netto za pierwszy rok. Certyfikat SSL — bezpłatny (Let's Encrypt w cenie hostingu). Total Commander — bezpłatny (shareware). VS Code — bezpłatny. Claude — bezpłatny (plan Free) lub 20 USD/miesiąc (plan Pro). Gemini — bezpłatny lub z subskrypcją Google AI Pro.

Od drugiego roku koszty to odnowienie domeny (~80 zł) i hostingu (229 zł w pakiecie Start) — razem około 300 zł rocznie.

Szczegółowe porównanie kosztów różnych ścieżek tworzenia strony znajdziesz w artykule ile kosztuje strona internetowa.

Kiedy samodzielna strona HTML nie wystarczy

Ten poradnik pokazuje, że stworzenie strony w czystym HTML z pomocą AI jest realne i osiągalne dla osoby bez doświadczenia technicznego. Ale chcę być uczciwy — są sytuacje, w których to podejście ma swoje ograniczenia.

Jeśli potrzebujesz bloga z regularnym publikowaniem artykułów — WordPress z panelem administracyjnym będzie wygodniejszy. Edytowanie plików HTML za każdym razem gdy chcesz dodać wpis, szybko stanie się uciążliwe.

Jeśli potrzebujesz sklepu internetowego — potrzebujesz systemu zarządzania produktami, płatnościami i zamówieniami. To domena WooCommerce, Shopify lub dedykowanych rozwiązań.

Jeśli zależy Ci na profesjonalnym SEO od pierwszego dnia — strona zrobiona przez specjalistę, który rozumie strukturę danych, schema markup, Core Web Vitals i strategię treści, da lepsze rezultaty szybciej. Nie dlatego, że AI nie potrafi generować dobrego kodu — potrafi. Ale SEO to więcej niż kod — to strategia, linkowanie wewnętrzne, analiza konkurencji i ciągła optymalizacja.

Jeśli dojdziesz do wniosku, że wolisz oddać to w ręce kogoś doświadczonego — umów się na bezpłatną konsultację. Tworzę strony dla lokalnych firm usługowych w pakiecie od 2500 zł, z domeną, hostingiem, konfiguracją Google i opieką po wdrożeniu.

Artykuł zaktualizowany: luty 2026. Interfejsy narzędzi AI, ich funkcje i cenniki mogą się zmieniać — zawsze sprawdzaj aktualny stan na stronach dostawców.