Dodanie strony ze statycznymi plikami

ServBay to potężne lokalne narzędzie do tworzenia środowiska developerskiego WWW, obsługujące wiele języków i baz danych. Oprócz obsługi dynamicznych stron, ServBay świetnie nadaje się do hostowania i testowania stron opartych o statyczne pliki, takich jak proste strony czy aplikacje frontendowe zbudowane z HTML, CSS i JavaScript.

Ten przewodnik poprowadzi Cię krok po kroku przez proces dodawania i konfiguracji strony opartej o statyczne pliki w ServBay.

Przegląd

Strony ze statycznymi plikami to takie, których zawartość serwowana jest bezpośrednio przez serwer WWW, bez uruchamiania po stronie serwera żadnych skryptów (jak PHP, Node.js, Python itp.). Tego typu strony zawierają zwykle pliki HTML, arkusze stylów CSS, pliki JavaScript, obrazy, czcionki i inne zasoby.

Dzięki ServBay możesz wygodnie hostować lokalnie stronę opartą o statyczne pliki, co zdecydowanie ułatwia development, debugowanie i testowanie – zwłaszcza gdy chcesz symulować dostęp przez domenę, połączenie HTTPS albo testować CORS (Cross-Origin Resource Sharing) w warunkach zbliżonych do produkcyjnych.

Typowe scenariusze użycia

Tworzenie i testowanie czysto frontendowych projektów (HTML/CSS/JS).
Hostowanie statycznych dokumentacji lub blogów.
Testowanie, jak różne serwery WWW (Caddy/Nginx) obsługują statyczne zasoby.
Symulowanie lokalnie dostępu przez domenę i HTTPS.
Testowanie buildów frontendowych frameworków (np. React, Vue, Angular).

Wymagania wstępne

Masz zainstalowane i uruchomione ServBay na systemie macOS.
Posiadasz przygotowane pliki statycznej strony, którą chcesz wdrożyć.

Instrukcja krok po kroku

Wykonaj poniższe kroki, aby dodać swoją statyczną stronę do ServBay:

Krok 1: Przygotuj pliki swojej strony

Na początek upewnij się, że wszystkie pliki Twojej statycznej strony (np. index.html, style.css, script.js itp.) znajdują się w jednym, oddzielnym folderze.

Zaleca się, aby katalog strony utworzyć w domyślnym katalogu serwera WWW ServBay: /Applications/ServBay/www. Dzięki temu utrzymasz porządek i łatwą organizację plików. Przykładowo, jeśli chcesz utworzyć stronę o nazwie my-static-site, stwórz folder o tej nazwie w /Applications/ServBay/www/ i umieść tam wszystkie pliki strony.

bash

# Tworzenie przykładowego katalogu w terminalu
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Tworzenie prostego pliku index.html
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 静态网站示例</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>Gratulacje! Statyczna strona ServBay została poprawnie skonfigurowana!</h1>
    <p>Przeglądasz tę lokalną stronę statyczną dzięki ServBay.</p>
</body>
</html>' > index.html

# Twój aktualny układ plików powinien wyglądać np. tak:
# /Applications/ServBay/www/servbay-static-demo/index.html

Krok 2: Dodaj stronę w ServBay

Otwórz aplikację ServBay.
W lewym panelu nawigacyjnym kliknij Strony (uwaga: w starszych wersjach mogło to być "Hosty", w nowych wersjach przyjęto nazwę "Strony").
Na dole listy stron kliknij przycisk Dodaj. Pojawi się okno konfiguracji.

Krok 3: Skonfiguruj ustawienia strony

W oknie konfiguracji wypełnij/wybierz poniższe informacje:

Domena (Domain): Wpisz domenę, przez którą chcesz lokalnie odwiedzać stronę. Zaleca się stosować domeny z końcówką .servbay.demo, np. static.servbay.demo albo my-static-site.servbay.demo. ServBay automatycznie skonfiguruje lokalne rozwiązywanie takiej domeny – nie musisz edytować pliku hosts ręcznie.
- Wyjaśnienie: Domeny z końcówką .servbay.demo pozwalają uniknąć konfliktów z prawdziwymi domenami online, a wbudowany resolver DNS ServBay zapewni, że lokalnie wskazują one na Twój komputer.
Ścieżka (Path): Kliknij ikonę folderu po prawej stronie i wskaż katalog z plikami strony utworzonymi w Kroku 1, np. /Applications/ServBay/www/servbay-static-demo/.
- Wyjaśnienie: Ścieżka to katalog, z którego serwer WWW (Caddy lub Nginx) będzie serwował pliki Twojej strony – tzw. Document Root. Po wejściu na http://static.servbay.demo/ serwer będzie szukał pliku index.html lub innego domyślnego pliku w tym katalogu. Upewnij się, że wskazujesz na katalog, nie na pojedynczy plik (nie wybieraj konkretnego pliku jak index.html).
Port: Zwykle zostaw domyślną wartość. Standardowe porty to 80 (HTTP) i 443 (HTTPS). Jeśli chcesz użyć niestandardowego portu, możesz go tutaj ustawić.
Serwer WWW (Web Server): Wybierz preferowany serwer WWW. Dla statycznych stron zarówno Caddy, jak i Nginx są bardzo dobrym wyborem.
- Caddy: Łatwa konfiguracja, automatyczna obsługa HTTP/2 i HTTPS (w połączeniu z ServBay User CA), domyślnie polecany przez ServBay.
- Nginx: Wysoka wydajność, elastyczność, powszechnie używany w produkcji.
- Wybierz jeden z dostępnych.
Wersja PHP: Dla statycznej strony wybierz Brak (None).
Wersja Node.js: Dla statycznej strony wybierz Brak (None).
Wersja Python: Dla statycznej strony wybierz Brak (None).
Wersja Go: Dla statycznej strony wybierz Brak (None).
Wersja Java: Dla statycznej strony wybierz Brak (None).
SSL: Jeśli chcesz testować lokalnie swoją stronę przez HTTPS, zaznacz tę opcję. ServBay z pomocą własnego ServBay User CA automatycznie skonfiguruje lokalny, zaufany certyfikat SSL, co ułatwi testowanie funkcji HTTPS.
CORS: Jeśli Twoja strona musi korzystać z cross-origin (np. ładowanie czcionek lub danych z innej lokalnej domeny), zaznacz tę opcję i skonfiguruj odpowiednie nagłówki. ServBay umożliwia konfigurację nagłówków CORS per strona.

Krok 4: Zapisz i zastosuj zmiany

Po wpisaniu wszystkich danych kliknij przycisk Zapisz na dole okna.
Wróć do listy stron i upewnij się, że pojawiła się tu nowa pozycja.
Kliknij przycisk Zastosuj zmiany na górze listy stron.
- Wyjaśnienie: Kliknięcie Zastosuj zmiany wymusza przeładowanie konfiguracji serwera WWW (Caddy lub Nginx), co uaktywnia nowe ustawienia. Ten krok jest niezbędny – bez niego dodana strona nie będzie widoczna.

Sprawdzenie konfiguracji

Po zastosowaniu zmian otwórz przeglądarkę i wpisz skonfigurowaną domenę (np. http://static.servbay.demo lub https://static.servbay.demo jeśli używasz SSL).

Jeśli wszystko skonfigurowano prawidłowo, zobaczysz zawartość swojej statycznej strony – np. stronę index.html z przykładu.

Wskazówki i uwagi

Upewnij się, że Ścieżka wskazuje katalog z plikami strony.
Po każdej zmianie (dodaniu, edycji czy usunięciu strony) zawsze kliknij Zastosuj zmiany.
Przy statycznych stronach ustawianie obsługi języków serwera (PHP, Node.js itp.) na Brak jest najlepszą praktyką — to minimalizuje zużycie zasobów i ewentualne ryzyka bezpieczeństwa.
W przypadku problemów sprawdź, czy ServBay jest uruchomiony, czy serwer WWW (Caddy/Nginx) działa poprawnie oraz czy domena wpisana w przeglądarce jest dokładnie zgodna z tą skonfigurowaną w ServBay.

Najczęstsze pytania (FAQ)

Q: Po wejściu na domenę widzę komunikat „Nie można uzyskać dostępu do tej strony” lub „Serwer nie został znaleziony”. Co robić?

Sprawdź, czy ServBay jest uruchomiony.
Upewnij się, że kliknąłeś/aś Zastosuj zmiany w ServBay.
Zweryfikuj, czy domena wpisana w przeglądarce jest zgodna z tą skonfigurowaną (włącznie z prefiksami http:// lub https://).
Sprawdź, czy Ścieżka wskazuje właściwy katalog z plikami strony.
Zajrzyj do logów ServBay — mogą zawierać dodatkowe szczegóły o błędach.

Q: Strona zamiast wyświetlać index.html pokazuje listę katalogów. Dlaczego?

A: Najczęściej oznacza to, że w katalogu głównym strony serwer nie znalazł domyślnego pliku startowego (index.html). Upewnij się, że w Document Root istnieje plik dokładnie o tej nazwie (i poprawnym rozszerzeniu — zwróć uwagę na wielkość liter).

Q: Czy dla statycznej strony można skonfigurować HTTPS?

A: Tak, w konfiguracji strony w ServBay zaznacz opcję SSL. ServBay wygeneruje i zaufa automatycznie certyfikatowi SSL (ServBay User CA), co umożliwi lokalny dostęp przez HTTPS.

Podsumowanie

Korzystając z ServBay, z łatwością dodasz i będziesz zarządzać lokalnie stronami ze statycznymi plikami – zarówno prostymi stronami HTML, jak i zaawansowanymi buildami frameworków frontendowych. Dzięki funkcjom zarządzania stronami, lokalnemu rozwiązywaniu domen oraz wsparciu dla SSL, możesz znacznie efektywniej testować i rozwijać projekty frontendowe w środowisku zbliżonym do produkcyjnego.

Dodanie strony ze statycznymi plikami ​

Przegląd ​

Typowe scenariusze użycia ​

Wymagania wstępne ​

Instrukcja krok po kroku ​

Krok 1: Przygotuj pliki swojej strony ​

Krok 2: Dodaj stronę w ServBay ​

Krok 3: Skonfiguruj ustawienia strony ​

Krok 4: Zapisz i zastosuj zmiany ​

Sprawdzenie konfiguracji ​

Wskazówki i uwagi ​

Najczęstsze pytania (FAQ) ​

Podsumowanie ​