Jak wrzucić stronę do internetu: domena, DNS, hosting i VPS

• Domena to nazwa, DNS wskazuje drogę, a hosting przechowuje i udostępnia projekt.
• Najpierw opublikuj stronę pod adresem technicznym, dopiero potem zmieniaj DNS.
• Do wizytówki lub portfolio polecam hosting statyczny; do samodzielnej nauki administracji możesz wybrać VPS.
• Przed wysłaniem sprawdź pliki, po wysłaniu sprawdź stronę i HTTPS.
• Zapisz sposób aktualizacji, wykonaj kopię projektu i ustaw przypomnienie o odnowieniu usług.

Domena, na przykład example.com, jest nazwą używaną w adresie strony. Rejestrator to firma obsługująca jej rejestrację. Hosting jest miejscem działania strony, a serwer to komputer, który odpowiada na żądania odwiedzających.

DNS łączy te elementy: jego rekordy, czyli wpisy konfiguracyjne, zawierają między innymi informacje o adresie IP przypisanym do nazwy. Adres IP identyfikuje urządzenie w sieci. Opis rekordów DNS w dokumentacji Cloudflare wyjaśnia również role wpisów dotyczących poczty i serwerów nazw.

Schemat pokazuje uproszczoną drogę do strony:

flowchart TD
    A[Odwiedzający wpisuje domenę] --> B[DNS wskazuje adres]
    B --> C[Przeglądarka łączy się z serwerem]
    C --> D[Serwer udostępnia stronę]
    D --> E[Przeglądarka wyświetla treść]

Sama rejestracja nazwy nie zastępuje publikacji plików. Dlatego polecam osobno zanotować: gdzie masz domenę, gdzie edytujesz DNS i gdzie działa strona. Nie zakładaj, że wszystkie trzy odpowiedzi oznaczają ten sam panel.

Strona statyczna składa się z gotowych plików: HTML opisuje treść, CSS wygląd, a JavaScript zachowanie w przeglądarce. Backend to część aplikacji wykonywana na serwerze, na przykład obsługująca logowanie lub zapis danych.

GitHub Pages publikuje pliki HTML, CSS i JavaScript z repozytorium. Repozytorium to miejsce przechowywania plików i historii zmian. Usługa nie uruchamia języków po stronie serwera, takich jak PHP czy Python.

Hosting współdzielony oznacza korzystanie z zasobów wspólnego środowiska. VPS daje większą swobodę konfiguracji, ale wymaga wiedzy potrzebnej do zarządzania systemem i aplikacjami, co opisuje porównanie hostingu i VPS przygotowane przez OVHcloud.

Jeśli projekt łączy się z API, czyli interfejsem komunikacji między programami, sprawdź również, gdzie działa usługa obsługująca te połączenia. Pomocny będzie poradnik o komunikacji przez API.

1. Utwórz osobny folder projektu. Umieszczaj w nim tylko to, co zamierzasz opublikować.
2. Sprawdź, czy masz gotowe pliki strony, czy kod wymagający budowania, czyli przekształcenia go w wersję do publikacji. W drugim przypadku najpierw wykonaj instrukcję budowania z dokumentacji swojego projektu.
3. Usuń z zestawu publikowanych plików hasła, prywatne klucze i kopie baz danych. Nie wysyłaj pliku .env, czyli pliku ze zmiennymi konfiguracyjnymi, bez sprawdzenia jego zawartości.
4. Otwórz stronę lokalnie i sprawdź teksty, obrazy oraz odnośniki.

Do ćwiczenia użyj małej strony bez dodatkowych zależności. W edytorze tekstu utwórz plik index.html:

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moja pierwsza strona</title>
</head>
<body>
  <main>
    <h1>Moja strona działa!</h1>
    <p>To mój pierwszy opublikowany projekt.</p>
  </main>
</body>
</html>

Po otwarciu pliku w przeglądarce powinien pojawić się nagłówek „Moja strona działa!” i akapit. Zachowaj ten plik: wykorzystasz go w wybranym wariancie publikacji.

1. Utwórz repozytorium

Załóż konto lub zaloguj się na GitHub. Zgodnie z instrukcją tworzenia witryny Pages:

1. Z menu tworzenia nowych elementów wybierz New repository.
2. W Owner wybierz swoje konto i wpisz nazwę repozytorium, na przykład moja-strona.
3. Wybierz widoczność publiczną. W planie GitHub Free repozytorium dla tej usługi musi być publiczne.
4. Włącz Add README i kliknij Create repository.

README to plik opisujący projekt. Po tym kroku masz repozytorium, do którego dodasz stronę.

2. Dodaj plik startowy

W tym samodzielnym ćwiczeniu polecam zapisać plik bezpośrednio w bieżącej gałęzi, czyli linii rozwoju projektu. Edytor plików GitHub pozwala wybrać gałąź przy zapisie.

1. Na głównej stronie repozytorium wybierz Add file, potem Create new file.
2. Wpisz nazwę index.html i wklej pełną treść przygotowanego pliku.
3. Kliknij Preview, aby przejrzeć zawartość, następnie Commit changes....
4. W Commit message wpisz opis zmiany. Jeśli widzisz wybór adresu e-mail autora, wybierz właściwy adres.
5. Wybierz zapis w bieżącej gałęzi i kliknij Commit changes.

Commit to zapis zmiany w historii repozytorium. Sprawdź, czy index.html widnieje obok README, bez dodatkowego folderu nadrzędnego.

3. Włącz publikację

Wykonaj kroki z dokumentacji źródła publikacji Pages:

1. Otwórz Settings, następnie Pages w sekcji Code, planning, and automation.
2. W Build and deployment, pod Source, wybierz Deploy from a branch.
3. Wybierz gałąź zawierającą plik, następnie folder /(root).
4. Kliknij Save.

W Settings → Pages użyj przycisku Visit site, aby otworzyć opublikowaną stronę. Oczekiwanym wynikiem jest ten sam nagłówek co lokalnie, dostępny pod publicznym adresem.

Przed rejestracją polecam sprawdzić cenę odnowienia, warunki przeniesienia nazwy oraz dostęp do edycji DNS. Porównując oferty, zaplanuj osobno wydatki na domenę, hosting i kopie zapasowe. ICANN wyjaśnia, że opłaty, transfery i odnowienia domen objętych umową z rejestratorem zależą od tej umowy.

1. Sprawdź dostępność wybranej nazwy u rejestratora.
2. Zapoznaj się z warunkami i dokończ rejestrację według jego instrukcji.
3. Zapisz dane dostępowe prywatnie i ustaw przypomnienie o odnowieniu.
4. Ustal, które serwery obsługują DNS domeny.

Rekordy NS wskazują serwery przechowujące właściwe wpisy domeny. Edytuj DNS u ich operatora. Przed zmianą serwerów nazw polecam zachować kopię dotychczasowych wpisów.

IPv4 i IPv6 to dwie wersje protokołu adresowania urządzeń w sieci. Do publikacji przydadzą się następujące typy rekordów opisane przez Cloudflare:

TTL określa czas przechowywania wpisu w pamięci podręcznej, czyli tymczasowo zachowanej kopii danych DNS. Polecam zostawić wartość zalecaną przez operatora. Zachowaj rekordy poczty podczas podłączania strony.

Podłącz domenę do GitHub Pages

Ten przykład dotyczy adresu www.example.com. Wszędzie zastąp example.com własną domeną.

1. Polecam najpierw zweryfikować domenę w ustawieniach konta GitHub: Settings → Pages → Add a domain, wpisz domenę i wybierz Add domain. Dodaj wskazany rekord TXT, poczekaj na aktualizację DNS, kliknij Verify i zachowaj rekord.
2. W ustawieniach repozytorium otwórz Settings → Pages. W Custom domain wpisz www.example.com i kliknij Save.
3. Dopiero teraz dodaj u operatora DNS rekord CNAME dla www.example.com, wskazujący twoj-login.github.io. Zastąp twoj-login nazwą konta. GitHub wymaga tej kolejności i wartości bez nazwy repozytorium.
4. Gdy opcja będzie dostępna, zaznacz Enforce HTTPS w ustawieniach Pages.

Otwórz https://www.example.com. Dla adresu bez www zastosuj osobną konfigurację domeny głównej opisaną przez GitHub, zamiast kopiować rekord CNAME.

Jeżeli masz hosting z przypisaną domeną, możesz przesłać pliki przez panel. Poniższy przykład dotyczy dostępnego File Manager w cPanel; przy innym panelu skorzystaj z instrukcji dostawcy.

1. Otwórz File Manager, kliknij Settings, wybierz Document Root for: i swoją domenę, następnie Save. Otwórz ponownie File Manager, aby wejść do wybranego folderu.
2. W folderze domeny wybierz Upload i prześlij index.html. Te funkcje opisuje dokumentacja menedżera plików cPanel.
3. Otwórz adres domeny i sprawdź stronę. Polecam wcześniej pobrać kopię istniejących plików, jeżeli zastępujesz wcześniejszą witrynę.

Podłącz DNS według danych hostingu, a HTTPS skonfiguruj zgodnie z instrukcją jego operatora. Nie wpisuj do tego wariantu adresów serwera z kolejnego przykładu.

Przygotuj świeży VPS z Ubuntu Server 24.04 LTS, publicznym adresem IPv4, działającym SSH na porcie 22 i kontem z uprawnieniami sudo, czyli możliwością wykonywania poleceń administratora. Ten wariant zakłada zainstalowane snapd, narzędzie obsługujące pakiety Snap, oraz brak wcześniejszej instalacji Certbota.

Lokalne polecenia wykonuj na Ubuntu 24.04 LTS z folderu zawierającego index.html. Zastąp uzytkownik loginem z panelu VPS, a ADRES_IP jego adresem. Nie wklejaj tych oznaczeń dosłownie.

1. Prześlij plik i połącz się z serwerem

Przed instalacją na lokalnym komputerze potrzebujesz dostępu do internetu i repozytoriów pakietów Ubuntu oraz konta z uprawnieniami sudo. Jeśli sudo poprosi o hasło, wpisz je w terminalu.

SSH to szyfrowane połączenie do zdalnego komputera. Klienta OpenSSH zainstalujesz poleceniem opisanym przez Ubuntu:

sudo apt-get update
sudo apt-get install -y openssh-client

sudo: unable to send audit message: Operation not permitted
Hit:1 https://cli.github.com/packages stable InRelease
Hit:2 https://deb.nodesource.com/node_24.x nodistro InRelease
Hit:3 http://security.ubuntu.com/ubuntu noble-security InRelease
Hit:4 http://archive.ubuntu.com/ubuntu noble InRelease
Hit:5 http://archive.ubuntu.com/ubuntu noble-updates InRelease
Hit:6 http://archive.ubuntu.com/ubuntu noble-backports InRelease
Reading package lists...
sudo: unable to send audit message: Operation not permitted
Reading package lists...
…
Processing triggers for libc-bin (2.39-0ubuntu8.9) ...

Blok aktualizuje listę pakietów i instaluje klienta OpenSSH; opcja -y automatycznie potwierdza pytania APT. Po zakończeniu bez błędów przejdź do przesyłania pliku.

Następnie prześlij plik poleceniem scp do katalogu domowego konta i rozpocznij sesję:

scp index.html uzytkownik@ADRES_IP:index.html
ssh uzytkownik@ADRES_IP

Przy pierwszym połączeniu polecam porównać odcisk klucza, czyli jego identyfikator, z informacją uzyskaną przez panel lub konsolę dostawcy. OpenSSH wyświetla go przy pierwszym kontakcie. Po zalogowaniu kolejne polecenia wykonujesz na VPS.

2. Zainstaluj serwer WWW

Nginx to program udostępniający stronę przez sieć. Zainstaluj go oraz zaporę UFW, która kontroluje ruch. APT pozwala aktualizować listę i instalować kilka pakietów naraz:

sudo apt update
sudo apt install nginx ufw
sudo systemctl status nginx

Oczekuj statusu active (running), zgodnie z instrukcją instalacji Nginx w Ubuntu. Jeśli polecenie pokazuje widok przewijania, zamknij go klawiszem q.

3. Dopuść połączenia przed włączeniem zapory

Port to numer identyfikujący usługę sieciową. HTTP to protokół przesyłania między innymi stron internetowych. HTTP zwykle używa portu 80, a HTTPS portu 443.

sudo ufw allow 22/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw enable
sudo ufw status

Polecenia dodają reguły, a potem włączają filtrowanie. Oczekuj aktywnej zapory i reguł dla podanych portów. Instrukcja UFW ostrzega, że jej włączenie może przerwać istniejące połączenie SSH. Polecam mieć otwartą konsolę dostawcy; przy innym porcie SSH najpierw dopuść właściwy numer.

Jeśli dostawca stosuje dodatkową zaporę w panelu, dopuść tam odpowiednie połączenia według jego dokumentacji.

4. Umieść stronę w katalogu publicznym

Domyślna konfiguracja Nginx w Ubuntu udostępnia pliki z /var/www/html.

sudo cp -i ~/index.html /var/www/html/index.html
sudo chmod 644 /var/www/html/index.html
sudo cp -i /etc/nginx/sites-available/default /etc/nginx/sites-available/default.kopia

cp -i pyta przed nadpisaniem istniejącego pliku. Pierwsze polecenie publikuje treść, ostatnie zachowuje konfigurację. Uprawnienia 644 pozwalają właścicielowi czytać i zapisywać plik, a pozostałym go czytać.

5. Ustaw domenę w Nginx

Zastąp domenę w poniższym bloku swoją nazwą. tee zapisze podaną treść i wyświetli ją w terminalu. Polecenie nadpisuje konfigurację, której kopię wykonałeś wcześniej. Zapisz pełną konfigurację pliku /etc/nginx/sites-available/default:

sudo tee /etc/nginx/sites-available/default <<'EOF'
server {
    listen 80;
    listen [::]:80;
    root /var/www/html;
    index index.html;
    server_name example.com www.example.com;

    location / {
        try_files $uri $uri/ =404;
    }
}
EOF

root wskazuje katalog strony, index plik startowy, a server_name obsługiwane nazwy. Blok opiera się na konfiguracji pojedynczej witryny opisanej przez Ubuntu. Sprawdź składnię:

sudo nginx -t

Opcja -t sprawdza konfigurację i dostępność wskazanych plików. Dopiero po pozytywnym wyniku przeładuj usługę:

sudo systemctl reload nginx

Przeładowanie stosuje nowe ustawienia, jak opisuje instrukcja konfiguracji Ubuntu.

6. Skieruj DNS na VPS

Dodaj rekord A dla swojej domeny oraz osobny rekord A dla wariantu www, oba z publicznym IPv4 serwera. Nie dodawaj AAAA bez przygotowanego połączenia IPv6.

Otwórz http://example.com i http://www.example.com, po zastąpieniu nazw. Oczekuj własnego nagłówka na obu adresach. Nie przechodź dalej, dopóki strona nie odpowiada przez HTTP.

7. Włącz HTTPS

TLS to protokół zabezpieczający transmisję. Certyfikat TLS potwierdza nazwę witryny w szyfrowanym połączeniu. Certbot automatyzuje jego uzyskanie i konfigurację. Instrukcja Certbota dla Nginx wymaga działającej witryny HTTP dostępnej z internetu na porcie 80.

Jeżeli brakuje snapd, wykonaj instalację według dokumentacji Snap:

sudo apt update
sudo apt install snapd

Wyloguj się i połącz ponownie. Przy wcześniejszej instalacji Certbota z pakietów systemowych najpierw zastosuj procedurę jej usunięcia z jego dokumentacji. Na serwerze spełniającym wymagania wykonaj:

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/local/bin/certbot
sudo certbot --nginx
sudo certbot renew --dry-run

Zastosuj oficjalną procedurę Certbota, odpowiadając na pytania programu i wybierając własne domeny. --nginx zmienia konfigurację serwera, a renew --dry-run sprawdza automatyczne odnawianie certyfikatów. Po zakończeniu otwórz oba adresy przez https:// i sprawdź brak ostrzeżeń certyfikatu.

1. Domena nie odpowiada. Sprawdź pisownię, operatora DNS i zapisane rekordy. Nie zmieniaj kilku ustawień naraz; zapisuj, co poprawiłeś.
2. CNAME nie daje się zapisać. Sprawdź, czy wskazujesz nazwę, a nie IP. CNAME musi wskazywać domenę i zasadniczo nie może współistnieć z innymi rekordami dla tej samej nazwy.
3. Widzisz błąd 404 albo stronę powitalną. Sprawdź lokalizację index.html, wybrane źródło publikacji lub katalog root w Nginx. Szukaj dodatkowego folderu między katalogiem publicznym a plikiem.
4. Po zmianie konfiguracji Nginx strona przestała działać. Uruchom ponownie sudo nginx -t i popraw wskazane miejsce. Polecam zachować kopię konfiguracji do powrotu.
5. HTTPS działa, ale znikają obrazy lub style. Sprawdź odnośniki zaczynające się od http://. GitHub opisuje problem mieszanej zawartości i zaleca udostępnianie zasobów przez HTTPS.

Polecam po każdej zmianie sprawdzić stronę główną i podstrony, najlepiej także na telefonie. Zachowuj poprzednią działającą wersję oraz prywatną kopię konfiguracji serwera. Przećwicz powrót, zanim będzie potrzebny przy awarii.

Do zapisywania zmian w kodzie przyda się Git, czyli system kontroli wersji. Sposób pracy znajdziesz w poradniku z najważniejszymi poleceniami Git. Przy VPS polecam dodatkowo zaplanować aktualizacje systemu, kontrolę odnawiania certyfikatu i kopie poza samym serwerem.

Czy można opublikować stronę bez kupowania domeny?

Tak. GitHub Pages pozwala korzystać z adresu w domenie github.io. Polecam zacząć od niego i podłączyć własną nazwę po sprawdzeniu strony.

Czy domena i hosting to to samo?

Nie. Domena jest nazwą, a hosting udostępnia projekt. Planując zakup, polecam sprawdzić osobno warunki obu usług, nawet gdy zamawiasz je w jednym miejscu.

Ile trwa podłączenie domeny?

W przypadku konfiguracji GitHub Pages zmiany DNS mogą propagować się do 24 godzin. Propagacja oznacza rozchodzenie się aktualizacji. Polecam przed czekaniem sprawdzić wartości rekordów.

Czy do pierwszej strony potrzebuję VPS?

Do opisanej strony z pojedynczym plikiem polecam hosting statyczny. VPS wybierz, jeśli chcesz ćwiczyć zarządzanie serwerem lub potrzebujesz środowiska, które sam skonfigurujesz.

Gdy strona działa, uporządkuj historię zmian z poradnikiem Git. Jeżeli kolejnym etapem jest aplikacja z kilkoma usługami, przejdź do wprowadzenia do Dockera, kontenerów i Compose. Kontener to sposób uruchamiania programu w wydzielonym środowisku; polecam poznawać go po opanowaniu podstaw publikacji.