Driftsättning av Linuxservrar och SSH på djupet · Lektion

Värdhantering av statiska webbplatser

Konfigurera den valda webbservern för att leverera statiska HTML-, CSS- och JavaScript-filer och göra den första webbplatsen tillgänglig.

Lektion 2 av 412 steg

Värdhantering av statiska webbplatser är en gratis lektion i Driftsättning av Linuxservrar och SSH på djupet på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Driftsättning av Linuxservrar och SSH på djupet, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Driftsättning av Linuxservrar och SSH på djupet innehåller totalt 4 lektioner.

Vad är statiska webbplatser?

Välkommen! I den här lektionen lär vi oss hur du gör din enkla webbplats tillgänglig online.

En statisk webbplats består av filer som HTML, CSS och JavaScript, vilka levereras till användarens webbläsare exakt som de är lagrade på servern.

Ingen bearbetning på serversidan (som PHP eller Python).
Snabb, säker och enkel att vara värd för.
Perfekt för portföljer, bloggar eller enkla informationswebbplatser.

Skapa din första HTML-fil

Nu skapar vi en mycket enkel fil, index.html. Det blir huvudsidan på vår statiska webbplats.

Vanligtvis skapar du den här filen på servern, till exempel med en textredigerare som nano eller 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>

Lägg till CSS och JavaScript

Vår HTML-fil refererar till style.css och script.js. Vi skapar även dessa för att slutföra vår grundläggande webbplats.

Filerna placeras i samma katalog som 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!');
});

Konfigurera webbkatalogen

Vi behöver en särskild plats på servern för att lagra dessa webbplatsfiler. En vanlig plats är under /var/www/.

Skapa först en katalog för webbplatsen. Kopiera sedan filerna index.html, style.css och script.js till den.

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: grunderna i server blocks

Nginx använder server blocks (ungefär som Apaches Virtual Hosts) för att definiera konfigurationer för specifika webbplatser.

Varje server block lyssnar efter begäranden på en port (till exempel 80 för HTTP) och svarar utifrån domännamnet.

Finns vanligtvis i /etc/nginx/sites-available/.
Aktiveras genom att du skapar en symbolisk länk till /etc/nginx/sites-enabled/.

Nginx: direktiven root och index

Inuti ett server block anger två viktiga direktiv var Nginx ska hitta dina filer:

root: Anger den absoluta sökvägen till webbplatsens filer. Det är här Nginx letar efter innehåll.
index: Anger vilken standardfil Nginx ska leverera när en katalog efterfrågas (till exempel när någon besöker yourdomain.com/ letar Nginx efter index.html).

Nginx: komplett konfiguration för en statisk webbplats

Här är en komplett konfiguration av ett Nginx-server block för vår statiska webbplats. Spara den som /etc/nginx/sites-available/mywebsite.conf.

Kom ihåg att ersätta your_domain.com med din faktiska domän eller serverns IP-adress.

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: motsvarigheten till Virtual Host

Om du använder Apache är konceptet liknande, med Virtual Hosts. Du skapar en konfigurationsfil (t.ex. /etc/apache2/sites-available/mywebsite.conf).

Viktiga direktiv är DocumentRoot (motsvarigheten till Nginx root) och DirectoryIndex (motsvarigheten till Nginx index).

<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>

Aktivera och läsa om servern

När du har skapat konfigurationsfilen måste du aktivera den och läsa om webbservern för att ändringarna ska börja gälla.

För Nginx: Skapa en symbolisk länk och läs om konfigurationen.
För Apache: Aktivera webbplatsen och läs om konfigurationen.

# 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

Testa din webbplats online

Bra jobbat! Din statiska webbplats bör nu vara tillgänglig.

Öppna webbläsaren och gå till serverns IP-adress eller det domännamn du konfigurerade.

Du bör se meddelandet "Hello CoddyKit!"!

Snabbkontroll: Nginx-direktiv

Anta att följande utdrag av ett Nginx-server block används:

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

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

Om en användare går till http://example.com/, vilken fil försöker Nginx leverera först?

Besvara frågan i den interaktiva lektionen

Sammanfattning: vara värd för statiska webbplatser

Du har lärt dig att vara värd för en statisk webbplats!

Vi gick igenom:

Att skapa grundläggande HTML-, CSS- och JS-filer.
Att konfigurera en särskild katalog för webbplatsens innehåll.
Att konfigurera Nginx-server blocks (eller Apache Virtual Hosts) med root/DocumentRoot och index/DirectoryIndex.
Att aktivera och läsa om webbservern.
Att testa den aktiva webbplatsen i en webbläsare.

Härnäst utforskar vi hur du konfigurerar virtuella värdar för att vara värd för flera webbplatser på en och samma server!

Gratis att börja

Lär dig Driftsättning av Linuxservrar och SSH på djupet med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Värdhantering av statiska webbplatser” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Driftsättning av Linuxservrar och SSH på djupet, inklusive ”Värdhantering av statiska webbplatser”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Driftsättning av Linuxservrar och SSH på djupet innehåller totalt 4 lektioner.

Vad lär jag mig i ”Värdhantering av statiska webbplatser”?

Konfigurera den valda webbservern för att leverera statiska HTML-, CSS- och JavaScript-filer och göra den första webbplatsen tillgänglig. Ni övar på Driftsättning av Linuxservrar och SSH på djupet med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Driftsättning av Linuxservrar och SSH på djupet?

Du behöver inga förkunskaper. Utbildningen i Driftsättning av Linuxservrar och SSH på djupet på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Värdhantering av statiska webbplatser”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Driftsättning av Linuxservrar och SSH på djupet-lektionen?

Ja. Varje Driftsättning av Linuxservrar och SSH på djupet-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Installera Nginx/Apache
Värdhantering av statiska webbplatser
Grundläggande konfiguration av virtuella värdar
Aktivera HTTPS med Let's Encrypt

← Tillbaka till Driftsättning av Linuxservrar och SSH på djupet