0Pricing
Linux Server Deployment & SSH Mastery · Lekcja

Hostowanie statycznych witryn

Skonfiguruj wybrany serwer WWW tak, aby udostępniał statyczne pliki HTML, CSS i JavaScript, umożliwiając dostęp do pierwszej witryny.

Hostowanie statycznych witryn to bezpłatna lekcja Linux Server Deployment & SSH Mastery na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Linux Server Deployment & SSH Mastery, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Linux Server Deployment & SSH Mastery zawiera 4 lekcji w sumie.

Czym są witryny statyczne?

Witamy! W tej lekcji nauczą się Państwo, jak udostępnić prostą witrynę w Internecie.

Witryna statyczna składa się z plików takich jak HTML, CSS i JavaScript, które są dostarczane do przeglądarki użytkownika dokładnie w takiej postaci, w jakiej są przechowywane na serwerze.

  • Brak przetwarzania po stronie serwera (np. PHP lub Python).
  • Szybkie, bezpieczne i łatwe w hostowaniu.
  • Idealne do portfolio, blogów i prostych witryn informacyjnych.

Tworzenie pierwszego pliku HTML

Utwórzmy bardzo prosty plik index.html. Będzie to główna strona naszej witryny statycznej.

Zazwyczaj plik ten tworzy się na serwerze, na przykład za pomocą edytora tekstu takiego jak nano lub vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

Dodawanie CSS i JavaScript

Nasz plik HTML odwołuje się do plików style.css i script.js. Utwórzmy również je, aby ukończyć podstawową witrynę.

Pliki te będą znajdować się w tym samym katalogu co index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Konfigurowanie katalogu witryny

Potrzebujemy wydzielonego miejsca na serwerze do przechowywania tych plików witryny. Typową lokalizacją jest katalog /var/www/.

Najpierw utwórz katalog witryny. Następnie skopiuj do niego pliki index.html, style.css i script.js.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: podstawy bloku serwera

Nginx używa bloków serwera (podobnych do Virtual Hosts w Apache) do definiowania konfiguracji konkretnych witryn.

Każdy blok serwera nasłuchuje żądań na porcie (np. 80 dla HTTP) i odpowiada na nie na podstawie nazwy domeny.

  • Zwykle znajdują się w katalogu /etc/nginx/sites-available/.
  • Są aktywowane przez utworzenie dowiązania symbolicznego do katalogu /etc/nginx/sites-enabled/.

Nginx: dyrektywy root i index

Wewnątrz bloku serwera dwie kluczowe dyrektywy wskazują Nginx, gdzie znaleźć pliki:

  • root: Określa bezwzględną ścieżkę do plików witryny. W tym miejscu Nginx będzie szukać treści.
  • index: Określa domyślny plik, który Nginx powinien udostępnić po zażądaniu katalogu (np. gdy ktoś odwiedza adres yourdomain.com/, Nginx szuka pliku index.html).

Nginx: pełna konfiguracja witryny statycznej

Oto kompletna konfiguracja bloku serwera Nginx dla naszej witryny statycznej. Zapisz ją jako /etc/nginx/sites-available/mywebsite.conf.

Pamiętaj, aby zastąpić your_domain.com właściwą domeną lub adresem IP serwera.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

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

Apache: odpowiednik Virtual Host

W przypadku Apache koncepcja jest podobna i nosi nazwę Virtual Hosts. Należy utworzyć plik konfiguracyjny (np. /etc/apache2/sites-available/mywebsite.conf).

Najważniejsze dyrektywy to DocumentRoot (odpowiednik root w Nginx) oraz DirectoryIndex (odpowiednik index w Nginx).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Aktywowanie i ponowne wczytywanie serwera

Po utworzeniu pliku konfiguracyjnego należy go włączyć i ponownie wczytać konfigurację serwera WWW, aby zmiany zaczęły obowiązywać.

  • Nginx: Utwórz dowiązanie symboliczne i ponownie wczytaj konfigurację.
  • Apache: Włącz witrynę i ponownie wczytaj konfigurację.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Testowanie działającej witryny

Świetnie! Państwa witryna statyczna powinna być teraz dostępna.

Otwórz przeglądarkę internetową i przejdź do adresu IP serwera lub skonfigurowanej nazwy domeny.

Powinni Państwo zobaczyć komunikat „Hello CoddyKit!”

Szybkie sprawdzenie: dyrektywy Nginx

Rozważmy następujący fragment bloku serwera Nginx:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

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

Jeśli użytkownik przejdzie do adresu http://example.com/, który plik Nginx spróbuje udostępnić jako pierwszy?

Podsumowanie: hostowanie witryn statycznych

Pomyślnie nauczyli się Państwo hostować witrynę statyczną!

Omówiliśmy:

  • Tworzenie podstawowych plików HTML, CSS i JS.
  • Konfigurowanie wydzielonego katalogu na treści witryny.
  • Konfigurowanie bloków serwera Nginx (lub Virtual Hosts Apache) za pomocą dyrektyw root/DocumentRoot oraz index/DirectoryIndex.
  • Aktywowanie i ponowne wczytywanie serwera WWW.
  • Testowanie działającej witryny w przeglądarce.

W następnej kolejności zajmiemy się konfigurowaniem hostów wirtualnych do obsługi wielu witryn na jednym serwerze!

Często zadawane pytania

Czy lekcja „Hostowanie statycznych witryn” jest bezpłatna?

Tak — pełny tekst „Hostowanie statycznych witryn” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Linux Server Deployment & SSH Mastery, przejdź na CoddyKit PRO. Kurs Linux Server Deployment & SSH Mastery zawiera 4 lekcji w sumie.

Co nauczysz się w „Hostowanie statycznych witryn”?

Skonfiguruj wybrany serwer WWW tak, aby udostępniał statyczne pliki HTML, CSS i JavaScript, umożliwiając dostęp do pierwszej witryny. Ćwiczysz Linux Server Deployment & SSH Mastery z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Linux Server Deployment & SSH Mastery?

Nie wymagamy żadnego doświadczenia. Linux Server Deployment & SSH Mastery w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Hostowanie statycznych witryn”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Linux Server Deployment & SSH Mastery?

Tak. Każda lekcja Linux Server Deployment & SSH Mastery zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Instalowanie Nginx/Apache
  2. Hostowanie statycznych witryn
  3. Podstawowa konfiguracja wirtualnych hostów
  4. Włączanie HTTPS za pomocą Let's Encrypt
← Powrót do Linux Server Deployment & SSH Mastery