Aggiungere un sito web di file statici
ServBay è uno strumento potente per lo sviluppo web locale, che supporta diversi linguaggi e database. Oltre ai siti dinamici, ServBay è ideale anche per ospitare e testare siti web di sole risorse statiche, come pagine HTML, CSS o applicazioni front-end basate su JavaScript.
Questa guida ti illustrerà come aggiungere e configurare facilmente un sito statico all'interno di ServBay.
Panoramica
Un sito web di file statici è costituito da risorse che il web server fornisce direttamente, senza eseguire script lato server (come PHP, Node.js, Python, ecc.). Questi siti solitamente includono pagine HTML, fogli di stile CSS, file JavaScript, immagini, font e altre risorse statiche.
Ospitare siti statici localmente con ServBay ti consente di sviluppare, effettuare il debug e testare facilmente, specialmente quando serve simulare l’accesso tramite nome di dominio, HTTPS o per testare la condivisione di risorse tra domini (CORS).
Scenari di Utilizzo
- Sviluppo e test di progetti front-end puri (HTML/CSS/JS).
- Hosting di documentazione statica oppure blog.
- Verifica del comportamento dei server web (Caddy/Nginx) nella risposta alle risorse statiche.
- Simulazione in locale di accesso via nome di dominio e HTTPS proprio come in produzione.
- Testare i build di framework JavaScript (es. React, Vue, Angular).
Prerequisiti
- ServBay è già stato installato ed è in esecuzione su macOS.
- Hai un sito statico pronto da distribuire con tutti i relativi file.
Procedura
Segui questi passaggi per aggiungere il tuo sito statico in ServBay:
Passaggio 1: Prepara i file del tuo sito
Per prima cosa, assicurati che tutti i file del tuo sito statico (come index.html
, style.css
, script.js
, ecc.) si trovino in una singola cartella dedicata.
Si consiglia di creare la directory dei siti statici all’interno della cartella predefinita di ServBay /Applications/ServBay/www
per mantenere l’ordine. Ad esempio, se vuoi creare un sito chiamato my-static-site
, puoi creare la cartella /Applications/ServBay/www/my-static-site
, inserendo al suo interno tutti i file.
# Crea una directory di esempio tramite terminale
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo
# Crea un semplice file index.html
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di sito statico ServBay</title>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 50px; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Congratulazioni! Configurazione del sito statico su ServBay riuscita!</h1>
<p>Stai accedendo a questa pagina statica localmente tramite ServBay.</p>
</body>
</html>' > index.html
# La struttura dei tuoi file sarà simile a:
# /Applications/ServBay/www/servbay-static-demo/index.html
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Passaggio 2: Aggiungi il sito in ServBay
- Avvia l’applicazione ServBay.
- Nel menu di navigazione a sinistra, clicca su Siti web (Nota: nelle versioni precedenti può essere visualizzato come "Host", ma nei nuovi rilasci è "Siti web").
- Nella parte inferiore della schermata della lista siti, clicca su Aggiungi. Si aprirà la finestra di configurazione.
Passaggio 3: Configura le impostazioni del sito
All’interno della finestra di configurazione, compila o seleziona le seguenti opzioni:
- Dominio (Domain): Inserisci il nome di dominio tramite cui vuoi accedere localmente al sito. È consigliabile utilizzare il suffisso
.servbay.demo
, ad esempiostatic.servbay.demo
oppuremy-static-site.servbay.demo
. ServBay gestisce automaticamente la risoluzione DNS dei domini.servbay.demo
senza bisogno di modificare manualmente il file hosts.- Nota esplicativa: Usare domini
.servbay.demo
evita conflitti con domini reali online e il DNS integrato di ServBay garantisce che puntino correttamente al tuo computer locale.
- Nota esplicativa: Usare domini
- Percorso (Path): Clicca sull’icona della cartella a destra e seleziona la directory creata nel passaggio 1, ad esempio
/Applications/ServBay/www/servbay-static-demo/
.- Nota esplicativa: Il percorso indica al web server (Caddy o Nginx) dove si trova la root del sito (Document Root). Quando accedi a
http://static.servbay.demo/
, il server cerca il fileindex.html
o altri file di default in questa cartella. Assicurati che il percorso sia una cartella e non un file specifico.
- Nota esplicativa: Il percorso indica al web server (Caddy o Nginx) dove si trova la root del sito (Document Root). Quando accedi a
- Porta (Port): Di solito è possibile lasciare quella predefinita. La porta HTTP di default è la 80, l’HTTPS è la 443. Se necessario, puoi scegliere una porta personalizzata.
- Web Server: Scegli il server web che preferisci. Per siti statici, Caddy e Nginx sono entrambe scelte eccellenti.
- Caddy: Configurazione semplice, supporto HTTP/2 e HTTPS automatico (tramite User CA di ServBay), ed è la raccomandazione predefinita.
- Nginx: Alte prestazioni, configurazione flessibile, diffusissimo in produzione.
- Basta sceglierne uno dei due.
- Versione PHP: Per siti statici non è necessario alcun interprete PHP. Scegli None.
- Versione Node.js: Non serve Node.js per i siti statici. Scegli None.
- Versione Python: Anche Python non è necessario. Seleziona None.
- Versione Go: Non occorre per siti statici. Scegli None.
- Versione Java: Non richiesta. Scegli None.
- SSL: Se desideri accedere in HTTPS puoi selezionare questa opzione. ServBay utilizzerà la User CA interna per generare e installare automaticamente un certificato SSL fidato e abilitare HTTPS, semplificando il test delle funzioni sicure.
- CORS: Se hai necessità di condivisione risorse tra domini (Cross-Origin Resource Sharing), ad esempio per caricare font o dati API da un altro dominio locale, abilita questa opzione e configura secondo esigenza. ServBay supporta i CORS header personalizzabili.
Passaggio 4: Salva e applica le modifiche
- Dopo aver compilato tutte le impostazioni, clicca sul pulsante Salva in basso nella finestra.
- Torna alla schermata di elenco siti di ServBay. Dovresti vedere la nuova voce appena aggiunta.
- Clicca sul pulsante Applica modifiche in alto nell’elenco siti.
- Nota esplicativa: Cliccando su Applica modifiche, ServBay ricarica i file di configurazione del web server (Caddy o Nginx), rendendo effettive le modifiche. Questo passaggio è essenziale: senza applicare le modifiche il nuovo sito non sarà accessibile.
Verifica della Configurazione
Dopo aver applicato le modifiche, apri il browser e inserisci nella barra degli indirizzi il dominio che hai configurato (es. http://static.servbay.demo
oppure https://static.servbay.demo
se hai abilitato SSL).
Se tutto è corretto, dovresti vedere il contenuto del tuo sito statico, ad esempio la pagina index.html
creata nell’esempio precedente.
Note Importanti
- Verifica che il percorso configurato sia correttamente impostato sulla cartella root del tuo sito.
- Dopo ogni aggiunta, modifica o eliminazione di un sito è necessario cliccare su Applica modifiche per rendere effettive le variazioni.
- Per siti statici, impostare None sui linguaggi lato server (PHP, Node.js, ecc.) è la soluzione più sicura ed efficiente, e riduce sprechi di risorse e rischi di sicurezza.
- Se hai problemi di accesso, assicurati che ServBay sia in esecuzione, che il server web selezionato (Caddy/Nginx) sia attivo e che il dominio digitato nel browser corrisponda perfettamente a quello configurato in ServBay.
FAQ – Domande Frequenti
D: Cosa fare se, accedendo al dominio configurato, compare “Sito non raggiungibile” o “Server non trovato”?
R:
- Verifica che ServBay sia effettivamente in esecuzione.
- Controlla di aver cliccato su Applica modifiche in ServBay.
- Assicurati che il dominio digitato nel browser corrisponda in modo esatto a quello configurato (incluse eventuali differenze tra
http://
ehttps://
). - Verifica che il percorso scelto punti veramente alla cartella dei file del tuo sito.
- Consulta i log di ServBay: potrebbero fornire ulteriori dettagli sugli errori.
D: Perché viene mostrata una lista di directory invece della mia pagina index.html
?
R: Questo accade di solito se nella cartella root del tuo sito non è presente un file di default come index.html
. Assicurati che sia presente nella directory root e che il nome (inclusa l’estensione) sia scritto correttamente (fa distinzione tra maiuscole e minuscole).
D: Posso abilitare HTTPS per il sito statico?
R: Sì, puoi attivare l’opzione SSL nella configurazione sito su ServBay. Verrà generato e installato in automatico il certificato SSL tramite la User CA interna di ServBay, rendendo possibile l’accesso HTTPS in locale.
Conclusioni
Con ServBay puoi aggiungere e gestire facilmente siti statici in locale, sia per semplici pagine HTML che per applicazioni front-end più complesse. Grazie alla gestione avanzata dei siti, alla risoluzione dei nomi di dominio e al supporto SSL integrato, ServBay ti permette di sviluppare e testare progetti web front-end in modo efficiente e professionale.