Hosting statycznych stron - opublikuj swoja piramidę

Zbudowałeś piramidę - ale nikt jej nie zobaczy, jeśli zostanie ukryta na Twoim dysku! Plik otwarty z dysku ma adres zaczynający się od file://, który działa tylko na Twoim komputerze, więc link wysłany znajomemu nic mu nie pokaże. Hosting to miejsce, gdzie Twoja strona będzie dostępna dla całego świata przez internet. Dla statycznych stron HTML/CSS/JS istnieją darmowe usługi hostingowe.

Czym jest strona statyczna?

Strona statyczna to strona złożona z gotowych plików HTML, CSS i JavaScript. Nie wymaga serwera backendowego ani bazy danych. Przeglądarka pobiera pliki i wyświetla je bezpośrednio. Serwer niczego nie oblicza - wydaje wszystkim te same pliki, jak skryba rozdający identyczne kopie zwoju, dlatego taki hosting jest prosty i często darmowy. Strony z logowaniem czy bazą danych poznasz w kolejnych światach.

Przygotuj pliki przed publikacją

Zanim wyślesz pliki w świat, sprawdź trzy rzeczy. Pierwsza: w <head> każdej strony musi być meta tag viewport, bez którego telefon pokaże pomniejszoną wersję dla komputera:

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ustawia szerokość strony na szerokość ekranu urządzenia, a initial-scale=1.0 wyłącza początkowe pomniejszenie. Druga rzecz to ścieżki względne, np. images/piramida.jpg zamiast /images/piramida.jpg: na GitHub Pages projekt leży w podkatalogu z nazwą repozytorium, więc ścieżka od ukośnika trafiłaby w złe miejsce. Trzecia: serwery rozróżniają wielkość liter, więc Piramida.jpg i piramida.jpg to dwa różne pliki.

GitHub Pages

GitHub Pages to darmowy hosting od GitHuba, dostępny dla publicznych repozytoriów na każdym koncie. Idealne rozwiązanie na początek:

Jak opublikować stronę na GitHub Pages:

1. Stwórz repozytorium na GitHub (np. moja-piramida)
2. Prześlij pliki HTML, CSS, JS do repozytorium
3. Wejdź w Settings -> Pages
4. Wybierz gałąź (branch) - zazwyczaj main
5. Kliknij Save
6. Twoja strona będzie dostępna pod adresem: https://twoj-login.github.io/moja-piramida/

Pierwsza publikacja może potrwać kilka minut, a każda kolejna zmiana wysłana do repozytorium zaktualizuje stronę automatycznie. Jeśli repozytorium nazwiesz dokładnie twoj-login.github.io, strona będzie dostępna pod samym adresem https://twoj-login.github.io/.

Struktura plików dla GitHub Pages:

Najważniejsza zasada dotyczy nazwy strony głównej. Gdy adres wskazuje katalog, a nie konkretny plik, serwer szuka w nim pliku index.html i wyświetla go jako stronę domyślną:

1<!-- Plik musi nazywać się index.html -->
2moja-piramida/
3  index.html       <!-- Główna strona -->
4  style.css        <!-- Style -->
5  script.js        <!-- JavaScript -->
6  images/          <!-- Folder z obrazami -->
7    piramida.jpg
8    sfinks.png

Dlatego adres kończący się na /moja-piramida/ pokaże index.html, a inne podstrony otworzysz, dopisując nazwę pliku, np. about.html. Bez pliku index.html adres główny nie wyświetli Twojej strony.

Netlify

Netlify to nowoczesna platforma hostingowa z darmowym planem. Oferuje:

• Drag & drop deployment - przeciągnij folder z plikami
• Automatyczne HTTPS - darmowy certyfikat SSL
• Własna domena - możesz podpiąć swoją domenę
• Continuous deployment - automatyczny deploy z GitHuba

Deploy na Netlify:

1. Wejdź na app.netlify.com
2. Przeciągnij folder z plikami na stronę
3. Gotowe! Strona jest dostępna pod adresem https://losowa-nazwa.netlify.app

Losową nazwę subdomeny zmienisz w ustawieniach projektu. Netlify obsługuje też formularze: po dodaniu specjalnego atrybutu do <form> zgłoszenia trafiają do panelu, bez pisania własnego serwera.

Vercel

Vercel to platforma od twórców Next.js, ale świetnie działa też dla statycznych stron:

• Import z GitHuba - połącz repozytorium
• Automatyczne buildy - każdy push = nowy deploy
• Preview deploys - podgląd zmian przed publikacją
• Darmowe HTTPS - automatyczny certyfikat

Dla gałęzi i pull requestów Vercel tworzy osobne adresy podglądu, więc zmianę możesz pokazać mentorowi, zanim trafi na stronę główną. Darmowy plan Hobby jest przeznaczony do projektów osobistych, niekomercyjnych.

Porównanie platform

Na pierwszą stronę polecam GitHub Pages: przy okazji poćwiczysz Git, który przyda Ci się w każdym kolejnym świecie. Netlify wybierz, gdy chcesz opublikować folder w minutę bez Gita, a Vercel - gdy zaczniesz budować aplikacje w Next.js.

Własna domena

Każda platforma pozwala podpiąć własną domenę:

1. Kup domenę (np. na OVH, nazwa.pl, Cloudflare)
2. Skonfiguruj DNS - ustaw rekordy CNAME lub A
3. Dodaj domenę w ustawieniach platformy hostingowej

Rekord CNAME kieruje subdomenę, np. www, na adres platformy, a rekordy A wskazują adresy IP jej serwerów - dokładne wartości podaje dokumentacja. Zmiany w DNS mogą rozchodzić się nawet do 24 godzin, a certyfikat HTTPS platforma wystawi sama. W projekcie końcowym opublikujesz w ten sposób stronę muzeum.

Praktyka

W edytorze poniżej znajdziesz przykładową strukturę plików i porównanie platform. Zaplanuj według niej foldery własnego projektu, zanim go opublikujesz:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Hosting statycznych stron</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Hosting statycznych stron</h1>
11
12    <section>
13        <h2>Struktura plikow do publikacji</h2>
14        <div class="tree">
15            <pre>
16moja-strona/
17  index.html       &lt;-- Strona glowna
18  about.html       &lt;-- Podstrona
19  css/
20    style.css      &lt;-- Arkusz stylow
21  js/
22    script.js      &lt;-- Skrypt
23  images/
24    logo.svg       &lt;-- Logo
25    hero.jpg       &lt;-- Zdjecie glowne
26    favicon.ico    &lt;-- Ikona zakladki
27            </pre>
28        </div>
29    </section>
30
31    <section>
32        <h2>Platformy hostingowe</h2>
33
34        <article class="platform">
35            <h3>GitHub Pages</h3>
36            <p>Darmowy hosting od GitHuba.
37               Adres: <code>login.github.io/repo</code></p>
38            <ul>
39                <li>Integracja z Git</li>
40                <li>Automatyczne HTTPS</li>
41                <li>Wlasna domena</li>
42            </ul>
43        </article>
44
45        <article class="platform">
46            <h3>Netlify</h3>
47            <p>Nowoczesna platforma z drag &amp; drop deploy.
48               Adres: <code>nazwa.netlify.app</code></p>
49            <ul>
50                <li>Drag &amp; drop deploy</li>
51                <li>Automatyczne HTTPS</li>
52                <li>Formularze kontaktowe</li>
53            </ul>
54        </article>
55
56        <article class="platform">
57            <h3>Vercel</h3>
58            <p>Platforma od tworcow Next.js.
59               Adres: <code>nazwa.vercel.app</code></p>
60            <ul>
61                <li>Import z GitHuba</li>
62                <li>Preview deploys</li>
63                <li>Automatyczne HTTPS</li>
64            </ul>
65        </article>
66    </section>
67</body>
68</html>

Pamiętaj: piramida ukryta w piasku nie przyciągnie żadnych pielgrzymów - dopiero hosting otwiera jej bramy dla całego świata.