0Pricing
Linux Server Deployment & SSH Mastery · Lezione

Hosting di siti web statici

Configuri il server web scelto per servire file statici HTML, CSS e JavaScript, rendendo accessibile il Suo primo sito web.

Hosting di siti web statici è una lezione Linux Server Deployment & SSH Mastery gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Linux Server Deployment & SSH Mastery, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Linux Server Deployment & SSH Mastery include 4 lezioni in totale.

Che cosa sono i siti web statici?

Benvenuto! In questa lezione impareremo a rendere online il suo semplice sito web.

Un sito web statico è composto da file come HTML, CSS e JavaScript, che vengono inviati al browser dell'utente esattamente come sono memorizzati sul server.

  • Nessuna elaborazione lato server (come PHP o Python).
  • Veloce, sicuro e facile da ospitare.
  • Ideale per portfolio, blog o semplici siti informativi.

Creazione del primo file HTML

Creiamo un file index.html molto semplice. Sarà la pagina principale del nostro sito web statico.

In genere questo file viene creato sul server, ad esempio utilizzando un editor di testo come nano o 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>

Aggiunta di CSS e JavaScript

Il nostro file HTML fa riferimento a style.css e script.js. Creiamo anche questi file per completare il nostro sito di base.

Questi file si troveranno nella stessa directory di 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!');
});

Configurazione della directory web

Abbiamo bisogno di uno spazio dedicato sul server in cui memorizzare questi file del sito. Un percorso comune è /var/www/.

Per prima cosa, crei una directory per il sito. Quindi copi al suo interno i file index.html, style.css e 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: nozioni di base sui server block

Nginx utilizza i server block (simili ai Virtual Host di Apache) per definire configurazioni specifiche per determinati siti web.

Ogni server block è in ascolto su una porta (come la 80 per HTTP) e risponde in base al nome di dominio.

  • Si trovano generalmente in /etc/nginx/sites-available/.
  • Vengono attivati creando un collegamento simbolico a /etc/nginx/sites-enabled/.

Nginx: direttive root e index

All'interno di un server block, due direttive fondamentali indicano a Nginx dove trovare i file:

  • root: specifica il percorso assoluto dei file del sito. È il percorso in cui Nginx cercherà i contenuti.
  • index: definisce il file predefinito che Nginx deve distribuire quando viene richiesta una directory (ad esempio, quando qualcuno visita yourdomain.com/, Nginx cerca index.html).

Nginx: configurazione completa di un sito statico

Ecco una configurazione completa di un server block Nginx per il nostro sito statico. La salvi come /etc/nginx/sites-available/mywebsite.conf.

Ricordi di sostituire your_domain.com con il dominio effettivo o l'indirizzo IP del server.

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: equivalente del Virtual Host

Se utilizza Apache, il concetto è simile e si basa sui Virtual Host. Creerebbe un file di configurazione (ad esempio, /etc/apache2/sites-available/mywebsite.conf).

Le direttive principali sono DocumentRoot (come root di Nginx) e DirectoryIndex (come index di 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>

Attivazione e ricaricamento del server

Dopo aver creato il file di configurazione, è necessario abilitarlo e ricaricare il server web affinché le modifiche abbiano effetto.

  • Per Nginx: crei un collegamento simbolico e ricarichi il servizio.
  • Per Apache: abiliti il sito e ricarichi il servizio.
# 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 del sito web online

Ottimo lavoro! Ora il sito web statico dovrebbe essere accessibile.

Apra il browser web e visiti l'indirizzo IP del server o il nome di dominio configurato.

Dovrebbe visualizzare il messaggio "Hello CoddyKit!"!

Verifica rapida: direttive Nginx

Consideri il seguente frammento di server block Nginx:

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

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

Se un utente visita http://example.com/, quale file tenterà di distribuire per primo Nginx?

Riepilogo: hosting di siti statici

Ha imparato correttamente a ospitare un sito web statico!

Abbiamo visto come:

  • Creare file di base HTML, CSS e JS.
  • Configurare una directory dedicata per i contenuti del sito.
  • Configurare i server block di Nginx (o i Virtual Host di Apache) utilizzando root/DocumentRoot e index/DirectoryIndex.
  • Attivare e ricaricare il server web.
  • Testare il sito web online in un browser.

Ora esploreremo la configurazione dei Virtual Host per ospitare più siti web su un singolo server!

Domande Frequenti

La lezione «Hosting di siti web statici» è gratuita?

Sì — il testo completo di «Hosting di siti web statici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Linux Server Deployment & SSH Mastery, passa a CoddyKit PRO. Il corso Linux Server Deployment & SSH Mastery include 4 lezioni in totale.

Cosa imparerò in «Hosting di siti web statici»?

Configuri il server web scelto per servire file statici HTML, CSS e JavaScript, rendendo accessibile il Suo primo sito web. Eserciti Linux Server Deployment & SSH Mastery con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Linux Server Deployment & SSH Mastery?

Non è richiesta alcuna esperienza precedente. Linux Server Deployment & SSH Mastery su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Hosting di siti web statici»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Linux Server Deployment & SSH Mastery?

Sì. Ogni lezione Linux Server Deployment & SSH Mastery include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Installazione di Nginx/Apache
  2. Hosting di siti web statici
  3. Configurazione di base degli host virtuali
  4. Abilitare HTTPS con Let's Encrypt
← Torna a Linux Server Deployment & SSH Mastery