Jak za darmo hostować statyczną stronę w 2026: GitHub Pages, Cloudflare Pages i formularze kontaktowe

Wybór odpowiedniej platformy do hostingu stron statycznych może zaoszczędzić Ci setki złotych rocznie, jednocześnie zapewniając szybką, bezpieczną i łatwą w utrzymaniu witrynę. Darmowe plany znacznie dojrzały w ostatnich latach - platformy takie jak GitHub Pages i Cloudflare Pages oferują infrastrukturę gotową do zastosowań produkcyjnych, całkowicie za darmo. Jest jednak jeden problem, który większość poradników pomija: jak obsłużyć formularz kontaktowy na stronie statycznej, skoro nie ma żadnego serwera, który mógłby go przetworzyć? Ten przewodnik przeprowadzi Cię przez cały proces - od wyboru platformy, przez wdrożenie, aż po podpięcie działającego formularza kontaktowego - z konkretnymi przykładami i ograniczeniami, które warto znać zanim zaczniesz.

Dlaczego darmowy hosting statyczny jest wart uwagi

Strona statyczna serwuje gotowe pliki HTML, CSS i JavaScript bezpośrednio do przeglądarki. Nie ma PHP, nie ma środowiska uruchomieniowego Node.js ani zapytań do bazy danych przy każdym wczytaniu strony. Ta prostota jest dokładnie tym, co sprawia, że darmowy hosting stron statycznych jest tak niezawodny - nie ma nic, co mogłoby się posypać, wymagać łatania czy skalowania.

Dla małych firm, portfolio, landing page'ów SaaS i stron z dokumentacją hosting statyczny spełnia wszystkie wymagania:

• Szybkość: Pliki są serwowane z węzłów CDN edge, często w czasie poniżej 100 ms na całym świecie.
• Bezpieczeństwo: Brak środowiska uruchomieniowego po stronie serwera oznacza drastycznie mniejszą powierzchnię ataku.
• Koszt: Zarówno GitHub Pages, jak i Cloudflare Pages są bezpłatne dla projektów publicznych i wielu prywatnych.
• Prostota: Wypchnij kod do repozytorium, a strona wdroży się automatycznie.

Jedynym realnym ograniczeniem jest dynamiczna funkcjonalność. Wszystko, co wymaga logiki po stronie serwera - uwierzytelnianie użytkowników, koszyk zakupowy czy przetwarzanie formularzy - potrzebuje zewnętrznego serwisu. Miej to na uwadze, gdy będziemy przechodzić przez kolejne kroki konfiguracji.

Porównanie platform: GitHub Pages vs Cloudflare Pages

Wniosek: Jeśli Twoi odbiorcy są rozproszeni po całym świecie i zależy Ci na jak najszybszym czasie wczytywania, Cloudflare Pages wygrywa. Jeśli Twój zespół pracuje na co dzień w GitHub i chcesz najprostszej możliwej konfiguracji, GitHub Pages w zupełności wystarczy.

Krok po kroku: wdrożenie na GitHub Pages

Ten przykład zakłada, że masz gotową prostą stronę w HTML/CSS. Jeśli używasz generatora stron statycznych, takiego jak Hugo lub Jekyll, proces jest niemal identyczny.

1. Utwórz repozytorium na GitHub. Przejdź na github.com/new i utwórz publiczne repozytorium. Nazwij je your-username.github.io, jeśli chcesz, żeby strona działała pod główną domeną, lub dowolnie, jeśli ma być dostępna pod ścieżką podkatalogu.
2. Wypchnij pliki strony. Z lokalnego folderu projektu uruchom:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Włącz GitHub Pages. W repozytorium przejdź do Settings > Pages. W sekcji "Source" wybierz gałąź main i folder /root (lub /docs, jeśli tam trafia wynik budowania). Kliknij Save.
4. Poczekaj na wdrożenie. GitHub zbuduje i wdroży stronę w ciągu 1-3 minut. Adres URL (np. https://your-username.github.io) pojawi się w panelu ustawień Pages.
5. Podepnij własną domenę (opcjonalnie). Dodaj plik CNAME do głównego katalogu repozytorium z Twoją nazwą domeny (np. www.yoursite.com). Następnie zaktualizuj ustawienia DNS u swojego dostawcy, dodając rekord CNAME wskazujący na your-username.github.io. GitHub automatycznie wystawi certyfikat SSL w ciągu kilku minut.

Krok po kroku: wdrożenie na Cloudflare Pages

1. Zarejestruj się lub zaloguj do Cloudflare. Wejdź na pages.cloudflare.com i połącz swoje konto GitHub lub GitLab.
2. Utwórz nowy projekt. Kliknij "Create a project", a następnie "Connect to Git". Wybierz swoje repozytorium z listy.
3. Skonfiguruj ustawienia budowania. Jeśli Twoja strona to czysty HTML, zostaw pole polecenia budowania puste i ustaw katalog wyjściowy na / lub tam, gdzie znajduje się Twój plik index.html. Dla Hugo ustaw polecenie budowania na hugo i katalog wyjściowy na public. Dla Jekyll użyj jekyll build i katalogu wyjściowego _site.
4. Wdróż stronę. Kliknij "Save and Deploy". Cloudflare sklonuje Twoje repozytorium, uruchomi budowanie i opublikuje stronę w globalnej sieci edge. Twoja strona natychmiast otrzyma subdomenę *.pages.dev.
5. Dodaj własną domenę. W panelu projektu przejdź do "Custom domains" i wpisz swoją domenę. Jeśli domena jest już zarządzana przez Cloudflare DNS, konfiguracja zajmie jedno kliknięcie. W przeciwnym razie musisz dodać rekord CNAME u swojego rejestratora, wskazujący na adres *.pages.dev.

Każdy kolejny git push do głównej gałęzi uruchamia automatyczne ponowne wdrożenie. Cloudflare tworzy też podglądy wdrożeń dla pull requestów, co przydaje się do sprawdzania zmian przed ich upublicznieniem.

Jak dodać formularz kontaktowy do strony statycznej

Tutaj większość poradników się urywa i tu właśnie większość ludzi utyka. Formularz kontaktowy na stronie statycznej nie może sam przetwarzać danych - nie ma żadnego serwera, który nasłuchuje. Masz trzy realne opcje:

• Serwis backendowy dla formularzy (zalecane): Wskazujesz atrybut action formularza na endpoint zewnętrznego serwisu, który odbiera zgłoszenie, waliduje je i wysyła do Ciebie mailem.
• Funkcja serverless: Piszesz małą funkcję (Cloudflare Workers, AWS Lambda), która przetwarza formularz. Działa, ale wymaga pisania kodu i bieżącego utrzymania.
• JavaScript fetch(): Używasz fetch API przeglądarki, żeby wysłać dane formularza do endpointu backendowego. Szczegóły techniczne znajdziesz w naszym przewodniku o wysyłaniu danych formularza HTML za pomocą JavaScript fetch().

Najszybszą drogą do działającego formularza jest dedykowany serwis. Oto konkretny przykład z użyciem Sendform:

Konkretny przykład: działający formularz kontaktowy w 5 minut

Zanim dodasz jakikolwiek kod do swojej strony, musisz założyć konto w Sendform i utworzyć endpoint formularza. Cały proces zajmuje około dwóch minut:

1. Zarejestruj się na Sendform.net. Utwórz darmowe konto - karta kredytowa nie jest wymagana. Po rejestracji będziesz mieć gotowy domyślny projekt.
2. Utwórz formularz. W panelu kliknij "New Form". Nadaj mu nazwę, wybierz projekt i wpisz adres e-mail, na który chcesz otrzymywać zgłoszenia. Sendform zweryfikuje ten adres przed aktywowaniem endpointu.
3. Skopiuj adres URL endpointu. Po utworzeniu formularza zobaczysz unikalny adres URL endpointu w formacie https://sendform.net/!your-form-id. Skopiuj go - to właśnie ten adres wkleisz do swojego kodu HTML.

Mając gotowy endpoint, dodaj następujący kod HTML do swojej strony statycznej:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Zastąp your-form-id identyfikatorem widocznym w panelu Sendform. Każde zgłoszenie zostanie wysłane mailem na adres potwierdzony podczas konfiguracji. Żadnego kodu backendowego, żadnego serwera, żadnych miesięcznych rachunków za infrastrukturę. Bardziej zaawansowane wzorce UX, w tym strony przekierowania po wysłaniu formularza i e-maile potwierdzające, opisujemy w naszym przewodniku o najlepszych praktykach dla formularzy na stronach statycznych.

Jeśli korzystasz z kreatora stron razem ze swoją stroną statyczną, szczegółowy opis integracji znajdziesz w naszym artykule o integracji Sendform z kreatorem stron.

Najczęstsze błędy, których warto unikać

Po pomocy tysiącom użytkowników w konfiguracji darmowego hostingu stron statycznych, te błędy powodują najwięcej frustracji:

1. Brak strony błędu 404

Zarówno GitHub Pages, jak i Cloudflare Pages wyświetlą domyślną stronę błędu, gdy żądana ścieżka nie zostanie znaleziona. Utwórz własny plik 404.html w głównym katalogu. Dzięki temu użytkownicy pozostaną na Twojej stronie i zachowasz dobre wrażenia z jej użytkowania.

2. Wrzucanie sekretów do publicznego repozytorium

Klucze API, sekrety endpointów formularzy i adresy e-mail nigdy nie powinny trafiać do publicznego repozytorium GitHub. Używaj zmiennych środowiskowych w Cloudflare Pages lub odwołuj się do prywatnego pliku konfiguracyjnego wymienionego w .gitignore.

3. Budowanie formularza bez planu na backend

To najczęstszy błąd. Deweloperzy tworzą piękny formularz kontaktowy, wypychają go na GitHub Pages i w dniu premiery odkrywają, że formularz po cichu nie działa. Zdecyduj, jakiego backendu formularzy użyjesz, zanim napiszesz choćby jeden tag <input>. Narzędzia takie jak Sendform pozwalają skonfigurować formularz kontaktowy wysyłający zgłoszenia prosto na e-mail bez żadnego kodu, co całkowicie eliminuje problem backendowy.

4. Ignorowanie problemów z cache CDN

Jeśli strona nie aktualizuje się po wypchnięciu zmian, CDN może serwować nieaktualne pliki. Cloudflare Pages automatycznie czyści cache przy każdym wdrożeniu. GitHub Pages wolniej propaguje zmiany - poczekaj do 10 minut lub dodaj query string do adresów URL zasobów podczas testowania.

5. Nieprawidłowe użycie ścieżek względnych

Jeśli Twoja strona na GitHub Pages działa pod adresem username.github.io/project-name/ (podkatalog), wszystkie ścieżki do zasobów muszą uwzględniać ten prefiks. Link do /styles.css przestanie działać. Używaj ścieżek względnych (./styles.css) lub skonfiguruj ustawienie baseURL generatora stron statycznych tak, żeby odpowiadało podkatalogowi.

6. Pomijanie automatyzacji przepływu pracy formularza

Gdy formularz zaczyna zbierać zgłoszenia, możesz zrobić znacznie więcej niż tylko odbierać maile. Sendform obsługuje webhooki i integracje, które pozwalają automatycznie kierować zgłoszenia do Slack, CRM-a lub arkusza kalkulacyjnego. Nasz przewodnik o automatyzacji przepływów pracy formularzy za pomocą webhooków i API pokazuje dokładnie, jak to skonfigurować bez pisania kodu backendowego.

Podsumowanie

Darmowy hosting stron statycznych nigdy nie był tak rozbudowany jak teraz. GitHub Pages sprawdza się świetnie w zespołach zakorzenionych w ekosystemie GitHub, podczas gdy Cloudflare Pages oferuje lepszą wydajność globalną i hojniejszy darmowy plan. Prawdziwym wyzwaniem nie jest sam hosting - to dynamiczne funkcje, a szczególnie formularze kontaktowe, które sprawiają problemy. Łącząc dowolną z tych platform z dedykowanym serwisem formularzy, otrzymujesz w pełni funkcjonalną, profesjonalną stronę bez żadnych kosztów infrastrukturalnych. Zacznij od jednego z powyższych przewodników, opublikuj swoją stronę, a następnie podepnij formularz kontaktowy przez Sendform, żeby od pierwszego dnia niezawodnie odbierać zgłoszenia.

Dodaj formularz kontaktowy do swojej strony statycznej w kilka minut

Użyj Sendform, żeby zbierać zgłoszenia z formularzy na dowolnej stronie statycznej hostowanej na GitHub Pages lub Cloudflare Pages. Żadnego kodu backendowego, żadnej konfiguracji serwera, żadnych komplikacji. Po prostu ustaw atrybut action formularza na swój endpoint i gotowe.

Zacznij za darmo na Sendform.net →

Najczęściej zadawane pytania