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, tylko 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ę.

Poradnik składa się z siedmiu części. Można przechodzić przez nie kolejno i wracać do instrukcji podczas pracy nad stroną. Wygenerowany kod jest wersją roboczą: przed publikacją trzeba sprawdzić jego działanie, treść i sposób przetwarzania danych.

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 wymaga utrzymania PHP, bazy danych, motywów i wtyczek oraz instalowania potrzebnych aktualizacji. Generuje strony dynamicznie, ale pamięć podręczna może ograniczyć tę pracę i przyspieszyć odpowiedzi serwera. O wydajności i bezpieczeństwie decydują także konfiguracja hostingu, jakość kodu i sposób obsługi witryny.

Strona statyczna udostępnia gotowe pliki HTML, CSS i JavaScript. Jeśli nie ma panelu administracyjnego, bazy danych ani wtyczek CMS, odpada część elementów wymagających zabezpieczania. Nie oznacza to odporności na włamanie ani braku utrzymania. Nadal trzeba chronić konta domeny i hostingu, aktualizować używane narzędzia i biblioteki, kontrolować zewnętrzne skrypty oraz wykonywać kopie zapasowe. Dodany formularz z obsługą na serwerze tworzy kolejny element wymagający zabezpieczenia.

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 rzecz to domena i hosting. Domena jest adresem strony, a hosting przechowuje jej pliki. W dalszej instrukcji dhosting.pl i jego dPanel służą jako przykład. Przy wyborze dostawcy sprawdź cenę pierwszego roku i odnowienia, HTTPS, szyfrowany transfer plików, kopie zapasowe oraz dostępność PHP, jeśli planujesz własną obsługę formularza. Samo przechowywanie danych w Polsce nie przesądza o zgodności całego przetwarzania z RODO.

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: Visual Studio Code do edycji kodu oraz Total Commander dla Windows do przesyłania plików. VS Code jest bezpłatny. Total Commander ma 30-dniowy okres próbny, a dalsze używanie wymaga zakupu licencji.

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  ← informacje o przetwarzaniu danych
├── 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

Do podglądu HTML, CSS i JavaScript można użyć modułu http.server ze standardowej biblioteki Pythona. Nie wymaga dodatkowego rozszerzenia VS Code. To prosty serwer do pracy lokalnej, a nie narzędzie do udostępniania strony klientom w internecie.

Używaj aktualnej, wspieranej wersji Pythona. Dostępność interpretera trzeba sprawdzić na własnym komputerze; nie należy zakładać, że jest zainstalowany fabrycznie. Sam wybór standardowej biblioteki nie gwarantuje bezpieczeństwa.

Instalacja Pythona, jeśli nie jest dostępny:

Pobierz Pythona z oficjalnej strony i postępuj według instrukcji dla swojego systemu. Instalator lub menedżer instalacji może wyglądać inaczej niż na starszym zrzucie poniżej. Po instalacji otwórz nowy terminal i sprawdź polecenie uruchamiające interpreter.

Ż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, interpreter działa. Gdy polecenie nie jest rozpoznawane, sprawdź py --version na Windows lub python3 --version na macOS i Linuksie. W dalszych komendach zastąp python nazwą, która działa w Twoim terminalu. Jeśli żadna nie działa, sprawdź instalację i ustawienia PATH według instrukcji Pythona.

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 --bind 127.0.0.1

W komunikacie uruchomienia powinien pojawić się adres 127.0.0.1 i port 8000. Otwórz http://127.0.0.1:8000. Opcja --bind 127.0.0.1 ogranicza nasłuchiwanie do tego komputera; bez niej serwer domyślnie nasłuchuje na wszystkich interfejsach. Polecenie uruchamiaj wyłącznie w folderze plików przeznaczonych do podglądu. Nie umieszczaj w nim haseł, kopii zapasowych ani dowiązań do prywatnych katalogów. Dokumentacja Pythona opisuje te ustawienia i ograniczenia.

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

Po zapisaniu zmian odśwież przeglądarkę klawiszem F5; ten serwer nie odświeża strony automatycznie. Służy do podglądu plików statycznych i nie uruchamia PHP. Formularz wymagający PHP trzeba przetestować w środowisku z PHP, a po wdrożeniu ponownie sprawdzić działanie przez HTTPS.

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 na razie jako prototyp: etykiety pól i walidacja w JS.
  Bez integracji wysyłki pokaż informację, że formularz jest testowy.
  Nie wyświetlaj komunikatu o wysłaniu wiadomości bez odpowiedzi serwera.
- Opinie wyłącznie z przekazanych, prawdziwych materiałów; bez fikcyjnych cytatów
- Nie dodawaj prywatnych kluczy API, haseł ani nieuzgodnionych skryptów zewnętrznych
- 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 szkic polityka-prywatnosci.html z oznaczeniem brakujących danych
   Nie deklaruj zgodności prawnej bez weryfikacji rzeczywistego działania strony.

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 --bind 127.0.0.1. Następnie otwórz przeglądarkę i wejdź na adres http://127.0.0.1:8000. Sprawdzisz jej lokalny wygląd. Hosting może inaczej obsługiwać ścieżki, HTTPS i formularz, dlatego po publikacji potrzebny jest kolejny test.

Dwukrotne kliknięcie pliku index.html otwiera go w trybie file:///. Nie jest to równoważny test strony udostępnianej przez HTTP: moduły JavaScript i część żądań do innych plików mogą działać inaczej. Do testów używaj opisanego podglądu pod http://127.0.0.1:8000 i odświeżaj stronę po zapisaniu zmian.

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]

Opinie tylko z dostarczonych materiałów. Nie wymyślaj danych firmy.
Formularz jest prototypem bez wysyłki: oznacz to i nie pokazuj pozornego sukcesu.
Nie umieszczaj haseł ani prywatnych kluczy API w kodzie.

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: prostotę i jeden plik do skopiowania. Ma też wady: trudniejszą późniejszą edycję i 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 może analizować projekt, tworzyć pliki i uruchamiać narzędzia. Wybór dostawcy modelu, uprawnień i sposobu zatwierdzania działań zależy od konfiguracji. Dla początkującego najważniejsze jest oddzielenie omówienia planu od wykonania zmian oraz sprawdzanie działań, które ingerują w komputer.

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.

Abonament aplikacji do rozmów z AI nie oznacza automatycznie dostępu do API w rozszerzeniu. Wybierz metodę uwierzytelnienia oficjalnie wspieraną przez aktualną wersję Cline i sprawdź osobno zasady rozliczenia. Klucz przechowuj w ustawieniach narzędzia, nigdy w plikach strony wysyłanych na hosting.

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,
prototypem formularza bez wysyłki i prawdziwymi opiniami z moich materiałów.
Nie generuj fikcyjnych opinii ani komunikatu o wysłaniu bez odpowiedzi serwera.
Nie umieszczaj sekretów w plikach strony. Najpierw pokaż plan i zakres zmian.

Najpierw poproś Cline o plan i sprawdź proponowany zakres pracy. Dopiero potem dopuść tworzenie plików. Sposób zatwierdzania zależy od wersji i ustawień rozszerzenia; nie zakładaj, że narzędzie zawsze zapyta przed wykonaniem polecenia. Podczas nauki pozostaw kontrolę nad zapisami, instalacją programów i uruchamianiem komend.

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.

Zasady przetwarzania danych przez Gemini API zależą od regionu i rodzaju usługi. Warunki Google przewidują dla Europejskiego Obszaru Gospodarczego, w tym Polski, stosowanie zasad użycia danych usług płatnych także do bezpłatnego limitu API. Nie jest to obietnica pełnej prywatności ani skutek zakupu Google AI Pro. Przed użyciem sprawdź warunki Gemini API i ustawienia konta. Do ćwiczeń używaj danych przykładowych; haseł, kluczy i dokumentów klientów nie dołączaj do rozmowy.

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.

Jak sprawdzić kod AI przed publikacją

Odpowiedź AI i poprawny podgląd nie potwierdzają, że strona jest gotowa. Pracuj na kopii projektu lub zapisuj kolejne wersje. Rozszerzeniu udostępniaj folder tej strony; sprawdzaj proponowane zmiany, instalacje i polecenia przed ich wykonaniem.

• Przejrzyj treść: potwierdź dane firmy, ceny, zdjęcia i opinie. Usuń treści przykładowe. AI nie powinno wymyślać referencji ani gwarancji.
• Sprawdź pliki i połączenia: skontroluj różnice w kodzie oraz adresy zewnętrznych skryptów i usług. W HTML i JavaScript nie może być hasła do poczty, hostingu ani prywatnego klucza API. Publiczny identyfikator usługi to inna kategoria: stosuj go tylko zgodnie z jej dokumentacją.
• Przetestuj działanie: otwórz każdą podstronę na komputerze i telefonie, kliknij menu i przyciski, sprawdź obsługę klawiaturą oraz ponów test po odświeżeniu. W narzędziach przeglądarki sprawdź błędy konsoli i brakujące pliki w zakładce Sieć.
• Zweryfikuj formularz osobno: wykonaj test poprawnej wysyłki, błędnych danych i niedostępnego serwera. Komunikat sukcesu wymaga potwierdzenia przyjęcia żądania; doręczenie wiadomości potwierdź w skrzynce odbiorczej.

Drugie narzędzie AI może pomóc w przeglądzie, ale nie zastąpi tych testów. Jeśli nie potrafisz ocenić obsługi formularza lub ochrony danych, zleć sprawdzenie tego fragmentu przed udostępnieniem go klientom. Do tego czasu wystarczą klikalny telefon i adres e-mail.

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.

Informacje o przetwarzaniu danych: dopasuj je do faktycznych formularzy, analityki i usług zewnętrznych. AI może przygotować szkic oraz listę brakujących informacji, ale nie potwierdzi zgodności strony z RODO samym wygenerowaniem dokumentu. Ustal administratora, cele i podstawy przetwarzania, odbiorców danych, okresy przechowywania oraz prawa osób. Przy formularzu zapewnij dostęp do tych informacji; treść wymaga weryfikacji z rzeczywistą konfiguracją i obowiązującymi przepisami, w szczególności art. 13 RODO.

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.

FTP, FTPS i SFTP: który protokół wybrać?

Total Commander pozwala kopiować pliki między dwoma panelami: komputerem i hostingiem. Do transferu wybierz szyfrowane połączenie obsługiwane przez dostawcę. Zwykły FTP nie szyfruje danych logowania ani plików.

• FTPS to FTP zabezpieczone TLS. Dalsza instrukcja pokazuje jawny tryb FTPS (explicit TLS), zwykle na porcie 21, z opcją SSL/TLS w oknie połączeń Total Commandera.
• SFTP działa przez SSH, zwykle na porcie 22. W Total Commanderze wymaga osobnej wtyczki SFTP z listy producenta. Zmiana portu na 22 w oknie FTP i zaznaczenie SSL/TLS nie konfiguruje SFTP.

Potwierdź protokół, port i dane konta w panelu hostingu. Certyfikat HTTPS strony nie włącza automatycznie szyfrowania transferu plików.

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 dla Windows ma 30-dniowy okres próbny. Po nim należy kupić licencję albo odinstalować program. Brak technicznej blokady nie przedłuża okresu bezpłatnego używania. Aktualną cenę końcową sprawdź u producenta. Jeśli wybierasz inny program do transferu, upewnij się, że obsługuje protokół wymagany przez Twój hosting.

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

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 i protokół: skopiuj adres serwera z panelu lub dokumentacji swojego konta. Nie wyprowadzaj go samodzielnie z nazwy domeny. Potwierdź obsługę FTPS; dla SFTP odczytaj oddzielne ustawienia dostępu SSH/SFTP.

Login: użyj nazwy konkretnego konta do transferu. Nie musi być taka sama jak login do panelu administracyjnego. Jeśli hosting to umożliwia, ogranicz konto do katalogu danej strony.

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: przyjmij wartość podaną przez hosting. Dla opisanego tutaj jawnego FTPS jest to zwykle 21. SFTP zwykle używa 22 i wymaga dostępu SSH/SFTP przyznanego dla konta. Sam numer portu nie określa ani nie włącza szyfrowania.

Konfiguracja FTPS 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 FTPS z panelu hostingu, z portem podanym przez dostawcę, jeśli jest inny niż domyślny. Nie wpisuj tu ustawień SFTP.

SSL/TLS: zaznacz tę opcję, aby użyć FTPS. Program doda przedrostek ftps://. Instrukcję tego ustawienia pokazuje także pomoc polskiego dostawcy MSERWIS; dane konta zawsze pobieraj ze swojego hostingu.

Użytkownik: wpisz login do konta FTP.

Hasło: podaj hasło konta transferowego. Możesz pozostawić pole puste i wpisywać hasło przy łączeniu.

Hasło główne: jeśli zapisujesz hasło połączenia w programie, zabezpiecz je hasłem głównym. Nie zapisuj danych dostępowych w folderze przeznaczonym do publikacji.

Zdalny katalog: wskaż katalog dokumentów przypisany do domeny w panelu hostingu. Może to być public_html, katalog konkretnej domeny lub katalog widoczny jako / dla ograniczonego konta FTP. Nie zakładaj, że zawsze jest nim /public_html.

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, aby zapisać konfigurację. Zrzut powyżej przedstawia przykładowe konto: nie kopiuj z niego hosta ani katalogu.

Jeśli hosting wymaga SFTP

Zainstaluj aktualną wtyczkę SFTP udostępnioną na stronie producenta Total Commandera, zgodnie z jej instrukcją. Otwórz ją z Otoczenia sieciowego jako Secure FTP i utwórz połączenie wewnątrz wtyczki. Podaj host, port oraz sposób logowania udostępniony dla SSH/SFTP. Przy pierwszym połączeniu porównaj odcisk klucza serwera z informacją uzyskaną z panelu lub pomocy hostingu, zanim go zaakceptujesz. Nie używaj do tego okna „Połączenia FTP”.

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

Dla FTPS otwórz Sieć → Połączenia FTP, wybierz zapisaną konfigurację i kliknij Połącz. Jeśli pojawi się błąd certyfikatu lub propozycja przejścia na nieszyfrowane FTP, przerwij połączenie i wyjaśnij problem z dostawcą. Nie wyłączaj TLS w celu obejścia błędu. Przy SFTP połącz się przez wtyczkę Secure FTP. Po udanym połączeniu kopiowanie plików odbywa się podobnie.

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: katalog dokumentów domeny na hostingu. Przed kopiowaniem upewnij się, że otwierasz właściwą stronę i właściwy katalog. W dalszej mapie używam przykładowej nazwy /public_html.

Najpierw wykonaj kopię plików, które będziesz zastępować, poza katalogiem publicznym. Ustal, jak przywrócić poprzednią wersję. CERT Polska zaleca wykonywanie kopii i sprawdzanie możliwości odzyskania danych. Do katalogu domeny przesyłaj zawartość przygotowanego folderu publikacyjnego, nie cały katalog roboczy z dokumentami, plikami .env, kluczami, logami czy archiwami.

Jak skopiować pliki:

W lewym panelu zaznacz wyłącznie pliki do publikacji: HTML, CSS, JavaScript, grafiki i świadomie przygotowane pliki obsługi strony. Sprawdź listę przed transferem. Prawy panel powinien pokazywać wnętrze potwierdzonego katalogu domeny.

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

Poniższa mapa zakłada, że katalogiem Twojej domeny jest /public_html. Jeśli panel hostingu wskazuje inny katalog, użyj go zamiast tej nazwy. Zachowaj wzajemne położenie plików i folderów:

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 widzisz błąd 404 albo stronę domyślną hostingu, sprawdź przypisanie domeny do katalogu i położenie index.html. Plik powinien znajdować się w katalogu dokumentów domeny, a nie o jeden folder głębiej. Po zmianach DNS czas widoczności zależy między innymi od pamięci podręcznej i TTL; oczekiwanie nie naprawi błędnego rekordu ani niewłaściwego katalogu.

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).

Po uruchomieniu HTTPS sprawdź wszystkie podstrony, menu, grafiki i formularz na komputerze oraz telefonie. Powtórz test po pełnym odświeżeniu. Sam widok strony głównej nie potwierdza poprawnego wdrożenia.

Część VI: Konfiguracja po uruchomieniu

Certyfikat SSL

Aktywuj certyfikat TLS i HTTPS według instrukcji hostingu. Sprawdź automatyczne odnawianie certyfikatu, przekierowanie z HTTP na HTTPS oraz to, czy grafiki, skrypty i formularz również używają HTTPS.

HTTPS szyfruje połączenie przeglądarki z serwerem i pozwala zweryfikować tożsamość serwera dla danej domeny. Nie usuwa błędów kodu, nie zastępuje zabezpieczenia formularza ani nie gwarantuje bezpieczeństwa całej strony.

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.

Jeśli wdrażasz GA4, zaplanuj razem z tagiem sposób obsługi zgód i informacji o przetwarzaniu danych. Nie traktuj samego wklejenia identyfikatora G-XXXXXXXXXX jako kompletnego wdrożenia. Sprawdź, jakie żądania wysyła strona przed wyborem, po odmowie i po akceptacji; do czasu ustalenia właściwej konfiguracji można uruchomić stronę bez analityki.

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:

Zachowaj kopię działającej wersji. Zmień plik w VS Code, obejrzyj różnice i przetestuj stronę lokalnie. Połącz się przez zapisane FTPS albo wtyczkę SFTP, sprawdź katalog docelowy i prześlij zmienione pliki. Następnie sprawdź opublikowaną stronę po pełnym odświeżeniu (Ctrl+F5). W razie problemu przywróć przygotowaną kopię.

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

Sprawdź, czy index.html znajduje się w katalogu przypisanym do domeny, a nie w dodatkowym podfolderze. Porównaj wielkość liter w nazwach plików oraz ustawienia domeny i DNS. Katalog nie musi nazywać się public_html.

Strona wygląda inaczej niż lokalnie

Sprawdź brakujące żądania w zakładce Sieć przeglądarki oraz wielkość liter w nazwach plików. css/style.css wskazuje ścieżkę względem bieżącego adresu, a /css/style.css względem katalogu głównego witryny. Oba warianty mogą być poprawne, zależnie od miejsca publikacji. Ścieżka do dysku komputera, np. C:/.../css/style.css, nie zadziała u odwiedzającego.

Formularz kontaktowy nie wysyła wiadomości

HTML i JavaScript tworzą interfejs formularza. Wysłanie wiadomości wymaga działającego adresu odbierającego dane: własnego skryptu na serwerze (np. PHP) albo usługi formularzy. Sam przycisk z komunikatem „Wysłano” nie wysyła e-maila.

1. Wybierz sposób wysyłki. Ustal adres odbiorczy formularza, skrzynkę docelową, limity i koszty usługi oraz to, kto otrzyma dane. Dla własnego PHP przygotuj konfigurację poczty po stronie serwera; lokalny http.server Pythona jej nie uruchomi.
2. Zabezpiecz odbiór danych. Serwer lub usługa musi sprawdzać pola i ich długość niezależnie od JavaScriptu. Dodaj ograniczenie liczby żądań i ochronę przed spamem. Hasła SMTP i prywatne klucze API przechowuj poza publicznymi plikami strony. OWASP wyjaśnia, dlaczego walidację w przeglądarce można ominąć.
3. Obsłuż rzeczywisty wynik. Pokaż sukces dopiero po potwierdzeniu przyjęcia żądania przez usługę. Przy błędzie lub braku połączenia zachowaj wpisaną treść i podaj inny sposób kontaktu.
4. Wykonaj test przez HTTPS. Wyślij dane testowe do własnej skrzynki i potwierdź doręczenie oraz możliwość odpowiedzi. Sprawdź też puste lub błędne pola, niedostępny serwer i ponowne kliknięcie. Udany komunikat na stronie nie jest dowodem doręczenia e-maila.

Przy formularzu umieść informację o przetwarzaniu danych. Zbieraj tylko potrzebne pola. Jeżeli obsługa wysyłki nie jest gotowa, nie publikuj pozornie działającego formularza; pokaż telefon i adres e-mail.

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

Zmierz stronę w narzędziach przeglądarki i sprawdź największe zasoby oraz czas odpowiedzi serwera. Duże grafiki, skrypty zewnętrzne i pliki czcionek są możliwymi przyczynami. Dopiero na podstawie pomiaru wybierz kompresję zdjęć, ograniczenie skryptów lub zmianę sposobu ładowania czcionek.

Ile kosztuje samodzielna strona HTML z AI?

Budżet zależy od hostingu, narzędzi i sposobu obsługi formularza. Porównuj ceny końcowe z podatkami oraz osobno koszt pierwszego roku i odnowienia.

• Domena i hosting: opłaty według cennika dostawcy. Sprawdź, czy HTTPS, kopie zapasowe i poczta są w wybranym pakiecie.
• Total Commander: 30 dni testów bez opłaty, następnie zakup licencji albo rezygnacja z programu.
• VS Code i Python: korzystanie z opisanych narzędzi nie wymaga płatnej subskrypcji.
• AI: można rozpocząć od planu bezpłatnego w dostępnym limicie; abonamenty i API rozliczane za użycie mogą zwiększyć koszt pracy.
• Dodatki i utrzymanie: uwzględnij ewentualną usługę formularza, płatne materiały oraz czas na testy, poprawki i późniejsze aktualizacje.

Sam brak WordPressa nie przesądza o niższej cenie domeny i hostingu. Strona HTML może mieć niski koszt infrastruktury, ale własna praca oraz płatne narzędzia również należą do kosztu jej wykonania.

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 wolisz zlecić wykonanie strony, umów konsultację z KrokDo. Aktualny pakiet nowej strony obejmuje stronę główną i do 4 podstron, teksty, podstawowe SEO oraz 3 miesiące wsparcia technicznego. Cena wynosi 2500 zł, jako kwota końcowa na fakturze bez VAT. Domena i hosting są opłacane oddzielnie u dostawcy. Szczegóły zakresu znajdują się w ofercie na stronie głównej.