Distribusjon av Linux-servere og SSH i praksis · leksjon

Hoste statiske nettsteder

Konfigurer den valgte webserveren til å levere statiske HTML-, CSS- og JavaScript-filer, slik at det første nettstedet blir tilgjengelig.

Leksjon 2 av 412 trinn

Hoste statiske nettsteder er en gratis leksjon i Distribusjon av Linux-servere og SSH i praksis på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Distribusjon av Linux-servere og SSH i praksis, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Distribusjon av Linux-servere og SSH i praksis inneholder totalt 4 leksjoner.

Hva er statiske nettsteder?

Velkommen! I denne leksjonen lærer vi hvordan du får det enkle nettstedet ditt på nett.

Et statisk nettsted består av filer som HTML, CSS og JavaScript, som leveres til brukerens nettleser nøyaktig slik de er lagret på serveren.

Ingen behandling på serversiden (som PHP eller Python).
Raskt, sikkert og enkelt å være vert for.
Perfekt for porteføljer, blogger eller enkle informasjonssider.

Lag din første HTML-fil

La oss opprette en svært enkel index.html-fil. Dette blir hovedsiden på det statiske nettstedet vårt.

Vanligvis oppretter du denne filen på serveren. Du kan for eksempel bruke et tekstredigeringsprogram 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>

Legg til CSS og JavaScript

HTML-filen vår refererer til style.css og script.js. La oss opprette disse også, slik at grunnnettstedet blir komplett.

Disse filene skal ligge i samme 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!');
});

Konfigurer webkatalogen

Vi trenger et eget sted på serveren for å lagre disse nettstedfilene. En vanlig plassering er under /var/www/.

Opprett først en katalog for nettstedet. Kopier deretter filene 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: Grunnleggende om serverblokker

Nginx bruker serverblokker (tilsvarende virtuelle verter i Apache) til å definere konfigurasjoner for bestemte nettsteder.

Hver serverblokk lytter etter forespørsler på en port (for eksempel 80 for HTTP) og svarer basert på domenenavnet.

Finnes vanligvis i /etc/nginx/sites-available/.
Aktiveres ved å opprette en symbolsk lenke til /etc/nginx/sites-enabled/.

Nginx: Direktiver for rot og indeks

Inne i en serverblokk forteller to viktige direktiver Nginx hvor filene dine finnes:

root: Angir den absolutte banen til nettstedfilene dine. Det er her Nginx leter etter innhold.
index: Definerer standardfilen Nginx skal levere når en katalog blir forespurt (for eksempel når noen besøker yourdomain.com/, leter Nginx etter index.html).

Nginx: Komplett konfigurasjon for et statisk nettsted

Her er en komplett konfigurasjon av en Nginx-serverblokk for det statiske nettstedet vårt. Lagre den som /etc/nginx/sites-available/mywebsite.conf.

Husk å erstatte your_domain.com med det faktiske domenet ditt eller IP-adressen til serveren.

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

Hvis du bruker Apache, er konseptet tilsvarende med Virtual Hosts. Du oppretter en konfigurasjonsfil (for eksempel /etc/apache2/sites-available/mywebsite.conf).

Viktige direktiver er DocumentRoot (tilsvarende Nginx sitt root) og DirectoryIndex (tilsvarende Nginx sitt 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>

Aktiver og last inn serveren på nytt

Etter at du har opprettet konfigurasjonsfilen, må du aktivere den og laste webserveren på nytt for at endringene skal tre i kraft.

For Nginx: Opprett en symbolsk lenke og last inn på nytt.
For Apache: Aktiver nettstedet og last inn på nytt.

# 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 nettstedet ditt på nett

Flott jobbet! Det statiske nettstedet ditt skal nå være tilgjengelig.

Åpne nettleseren og gå til IP-adressen til serveren eller domenenavnet du konfigurerte.

Du skal se meldingen «Hello CoddyKit!»

Kort kontroll: Nginx-direktiver

Se på følgende utdrag av en Nginx-serverblokk:

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 bruker går til http://example.com/, hvilken fil vil Nginx forsøke å levere først?

Besvar den i den interaktive leksjonen

Oppsummering: vær vert for statiske nettsteder

Du har lært å være vert for et statisk nettsted!

Vi gikk gjennom:

Oppretting av grunnleggende HTML-, CSS- og JS-filer.
Oppsett av en egen katalog for nettstedinnholdet.
Konfigurering av Nginx-serverblokker (eller Apache Virtual Hosts) ved hjelp av root/DocumentRoot og index/DirectoryIndex.
Aktivering og ny innlasting av webserveren.
Testing av nettstedet i en nettleser.

Deretter utforsker vi hvordan du konfigurerer virtuelle verter for å være vert for flere nettsteder på én server!

Gratis å komme i gang

Lær deg Distribusjon av Linux-servere og SSH i praksis med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hoste statiske nettsteder» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Distribusjon av Linux-servere og SSH i praksis, inkludert «Hoste statiske nettsteder», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Distribusjon av Linux-servere og SSH i praksis inneholder totalt 4 leksjoner.

Hva lærer jeg i «Hoste statiske nettsteder»?

Konfigurer den valgte webserveren til å levere statiske HTML-, CSS- og JavaScript-filer, slik at det første nettstedet blir tilgjengelig. Du øver på Distribusjon av Linux-servere og SSH i praksis med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Distribusjon av Linux-servere og SSH i praksis?

Ingen tidligere erfaring er nødvendig. Distribusjon av Linux-servere og SSH i praksis på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Hoste statiske nettsteder»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Distribusjon av Linux-servere og SSH i praksis-leksjonen?

Ja. Alle Distribusjon av Linux-servere og SSH i praksis-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Installere Nginx/Apache
Hoste statiske nettsteder
Grunnleggende konfigurasjon av virtuelle verter
Aktivere HTTPS med Let's Encrypt

← Tilbake til Distribusjon av Linux-servere og SSH i praksis