Udrulning af Linux-servere og SSH på ekspertniveau · Lektion

Hosting af statiske websteder

Konfigurér den valgte webserver til at levere statiske HTML-, CSS- og JavaScript-filer, så det første websted bliver tilgængeligt.

Lektion 2 af 412 trin

Hosting af statiske websteder er en gratis Udrulning af Linux-servere og SSH på ekspertniveau-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Udrulning af Linux-servere og SSH på ekspertniveau, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udrulning af Linux-servere og SSH på ekspertniveau-kurset indeholder 4 lektioner i alt.

Hvad er statiske websteder?

Velkommen! I denne lektion lærer vi, hvordan du får dit enkle websted online.

Et statisk websted består af filer som HTML, CSS og JavaScript, der leveres til brugerens browser præcis, som de er gemt på serveren.

Ingen behandling på serveren (f.eks. PHP eller Python).
Hurtigt, sikkert og nemt at hoste.
Perfekt til portfolier, blogs eller enkle informationswebsteder.

Opret din første HTML-fil

Lad os oprette en meget enkel index.html-fil. Den bliver hovedsiden på vores statiske websted.

Du vil typisk oprette denne fil på din server, for eksempel med en teksteditor 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>

Tilføj CSS og JavaScript

Vores HTML-fil refererer til style.css og script.js. Lad os også oprette dem, så vores grundlæggende websted bliver komplet.

Disse filer skal ligge i samme mappe som vores 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!');
});

Opsæt din webmappe

Vi har brug for et særskilt sted på serveren til at gemme disse webstedsfiler. En almindelig placering er i /var/www/.

Opret først en mappe til dit websted. Kopiér derefter dine filer index.html, style.css og script.js til 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: Grundlæggende om serverblokke

Nginx bruger serverblokke (svarende til Apaches Virtual Hosts) til at definere konfigurationer for bestemte websteder.

Hver serverblok lytter efter forespørgsler på en port (f.eks. 80 for HTTP) og svarer ud fra domænenavnet.

Findes normalt i /etc/nginx/sites-available/.
Aktiveres ved at oprette et symbolsk link til /etc/nginx/sites-enabled/.

Nginx: Direktiverne root og index

Inde i en serverblok fortæller to vigtige direktiver Nginx, hvor dine filer findes:

root: Angiver den absolutte sti til dit websteds filer. Det er her, Nginx leder efter indhold.
index: Definerer den standardfil, Nginx skal levere, når der anmodes om en mappe (f.eks. når nogen besøger yourdomain.com/, leder Nginx efter index.html).

Nginx: Komplet konfiguration af et statisk websted

Her er en komplet konfiguration af en Nginx-serverblok til vores statiske websted. Gem den som /etc/nginx/sites-available/mywebsite.conf.

Husk at erstatte your_domain.com med dit faktiske domæne eller din servers IP-adresse.

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: Tilsvarende Virtual Host

Hvis du bruger Apache, er konceptet tilsvarende med Virtual Hosts. Du opretter en konfigurationsfil (f.eks. /etc/apache2/sites-available/mywebsite.conf).

De vigtigste direktiver er DocumentRoot (svarende til Nginx' root) og DirectoryIndex (svarende til 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>

Aktivér og genindlæs din server

Efter oprettelsen af din konfigurationsfil skal du aktivere den og genindlæse din webserver, før ændringerne træder i kraft.

For Nginx: Opret et symbolsk link, og genindlæs.
For Apache: Aktivér webstedet, og genindlæs.

# 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

Test dit aktive websted

Godt gået! Dit statiske websted bør nu være tilgængeligt.

Åbn din webbrowser, og gå til din servers IP-adresse eller det domænenavn, du har konfigureret.

Du bør se din meddelelse "Hello CoddyKit!"!

Hurtigt tjek: Nginx-direktiver

Se på følgende uddrag af en Nginx-serverblok:

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

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

Hvis en bruger går til http://example.com/, hvilken fil forsøger Nginx så først at levere?

Besvar den i den interaktive lektion

Opsummering: Hosting af statiske websteder

Du har lært at hoste et statisk websted!

Vi gennemgik:

Oprettelse af grundlæggende HTML-, CSS- og JS-filer.
Opsætning af en særskilt mappe til dit websteds indhold.
Konfiguration af Nginx-serverblokke (eller Apache Virtual Hosts) ved hjælp af root/DocumentRoot og index/DirectoryIndex.
Aktivering og genindlæsning af din webserver.
Test af dit aktive websted i en browser.

Dernæst undersøger vi, hvordan du konfigurerer virtuelle værter til at hoste flere websteder på én server!

Gratis at komme i gang

Lær Udrulning af Linux-servere og SSH på ekspertniveau med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Hosting af statiske websteder” gratis?

Ja — alle 3 lektioner i læringssporet Udrulning af Linux-servere og SSH på ekspertniveau, inklusive “Hosting af statiske websteder”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Udrulning af Linux-servere og SSH på ekspertniveau-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Hosting af statiske websteder”?

Konfigurér den valgte webserver til at levere statiske HTML-, CSS- og JavaScript-filer, så det første websted bliver tilgængeligt. Du øver dig i Udrulning af Linux-servere og SSH på ekspertniveau med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udrulning af Linux-servere og SSH på ekspertniveau?

Der kræves ingen tidligere erfaring. Udrulning af Linux-servere og SSH på ekspertniveau på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Hosting af statiske websteder”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udrulning af Linux-servere og SSH på ekspertniveau-lektion?

Ja. Alle Udrulning af Linux-servere og SSH på ekspertniveau-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Installation af Nginx/Apache
Hosting af statiske websteder
Grundlæggende konfiguration af virtuelle værter
Aktivering af HTTPS med Let's Encrypt

← Tilbage til Udrulning af Linux-servere og SSH på ekspertniveau