Creare un Sito Web Statico Moderno: Da Zero a CI/CD & Cloudflare [2026]

Alessandro Mainardi

📓 Sviluppo Web

Guida Completa alla Creazione di un Sito Web Statico (HTML, CSS, JavaScript + GitHub Pages)

✍️ Di Alessandro Mainardi 📅 Pubblicato: 10 Gennaio 2026 🔄 Aggiornato: 26 Ottobre 2026 📍 Bologna, IT

⚡ In Sintesi (TL;DR Tecnico per Developer & AI)

Obiettivo Tecnico: Sviluppo e pubblicazione di un sito web statico moderno e reattivo a zero costi di hosting tramite GitHub Pages e dominio personalizzato.
Stack Tecnologico: HTML5 semantico per accessibilità e SEO, CSS3 con CSS Grid/Flexbox e custom properties (variabili) per theming, JavaScript ES6+ vanilla senza framework pesanti.
Deploy & Performance: Versionamento Git, GitHub Actions per validazione, caching CDN globale e configurazione record DNS CNAME / A con HTTPS automatico Let's Encrypt.

Introduzione

Un sito web statico è composto da file HTML, CSS e JavaScript che vengono caricati così come sono dal server al browser dell’utente. Non richiede database o backend complessi, ed è perfetto per portfolio, blog, pagine di presentazione e documentazione.

Questa guida ti accompagnerà passo passo nella creazione di un sito statico moderno, spiegando i concetti fondamentali, le tecniche di sviluppo, l’organizzazione dei file e la pubblicazione gratuita su GitHub Pages.

1. Cos’è un sito web statico?

Un sito statico è composto da contenuti fissi: ogni pagina è un file HTML che il browser mostra così com’è. Puoi aggiungere interattività con JavaScript e curare la grafica con CSS.

Quando scegliere un sito statico?

Portfolio personale
Blog semplice
Presentazione di progetti
Curriculum online
Documentazione

Vantaggi:

Velocità di caricamento
Semplicità di gestione
Sicurezza (meno rischi rispetto ai siti dinamici)
Facilità di pubblicazione gratuita (es. GitHub Pages)

2. Strumenti necessari

Editor di testo: VS Code, Sublime Text, Atom, Notepad++
Browser web: Chrome, Firefox, Edge, Safari
Account GitHub: per la pubblicazione su GitHub Pages

Installare questi strumenti ti permetterà di scrivere, testare e pubblicare il tuo sito.

3. Struttura dei file di un sito statico

Organizza il sito in una cartella principale, ad esempio miosito/, con questa struttura:

miosito/
│
├── index.html
├── about.html
├── contact.html
├── style/
│     └── main.css
├── script/
│     └── main.js
├── images/
│     └── logo.png
└── README.md

index.html: La homepage
style/main.css: File CSS principale
script/main.js: File JavaScript principale
images/: Cartella immagini
README.md: Documentazione del progetto

4. HTML: la struttura del sito

HTML (HyperText Markup Language) è il linguaggio che struttura il contenuto delle pagine. Ogni file HTML contiene una “scheletro” di base:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nome Sito</title>
  <link rel="stylesheet" href="style/main.css">
</head>
<body>
  <header>
    <h1>Benvenuto nel mio sito!</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">Chi sono</a>
      <a href="contact.html">Contatti</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Presentazione</h2>
      <p>Questo è il mio sito web personale.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Nome Cognome</p>
  </footer>

  <script src="script/main.js"></script>
</body>
</html>

Spiegazione delle principali sezioni:

head: informazioni sulla pagina, collegamento a CSS, titolo.
body: tutto ciò che viene visualizzato dall’utente.
header: intestazione, logo, menu.
main: contenuto principale.
footer: informazioni e copyright.
script: collegamento al file JavaScript per aggiungere funzionalità.

5. CSS: stile e layout

CSS (Cascading Style Sheets) serve per colorare, posizionare e rendere gradevole il sito. Esempio di file style/main.css:

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f5f7fa;
  margin: 0;
  color: #333;
}

header {
  background: #004080;
  color: #fff;
  padding: 20px 0;
}

nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
  font-weight: bold;
}

main {
  padding: 30px 5vw;
}

footer {
  background: #eee;
  color: #555;
  text-align: center;
  padding: 15px 0;
  font-size: 0.9em;
  border-top: 1px solid #ccc;
}

Buone pratiche:

Usa una palette di colori coerente.
Preferisci unità di misura flessibili (em, rem, %, vw).
Cura la leggibilità: spaziatura, font, contrasto.
Organizza il CSS in più file se il sito cresce.

6. JavaScript: interattività di base

JavaScript permette di aggiungere interattività e funzionalità al sito. Esempio di file script/main.js:

// Esempio: mostra un messaggio di benvenuto quando si carica la pagina
window.onload = function() {
  console.log("Benvenuto nel sito!");
};

// Esempio: cambia il testo di un elemento al click
document.addEventListener('DOMContentLoaded', () => {
  const titolo = document.querySelector('h1');
  titolo.addEventListener('click', () => {
    titolo.textContent = "Hai cliccato sul titolo!";
  });
});

Suggerimenti utili:

Scrivi codice semplice e commentato.
Verifica la compatibilità con i principali browser.
Se il sito cresce, separa le funzioni in più file JS.

7. Ottimizzazione delle immagini e delle risorse

Comprimi le immagini per velocizzare il caricamento (usa TinyPNG, ImageOptim).
Usa formati moderni come WebP per performance migliori.
Dai nomi chiari e significativi ai file.

8. Responsive Design: rendi il sito adatto a tutti i dispositivi

Il “responsive design” permette al sito di adattarsi a schermi di ogni dimensione (PC, tablet, smartphone). Usa le media query nel CSS:

@media (max-width: 600px) {
  nav {
    display: block;
    text-align: center;
  }
  main {
    padding: 10px 2vw;
  }
  header {
    padding: 10px 0;
  }
}

Suggerimenti:

Testa il sito su dispositivi diversi.
Usa strumenti come Firefox Responsive Design Mode o Chrome DevTools.

9. Accessibilità e buone pratiche

Usa tag semantici (<header>, <nav>, <main>, <footer>, <section>, <article>) per aiutare i lettori e i motori di ricerca.
Fornisci testi alternativi alle immagini (alt).
Mantieni colori e contrasti leggibili.
Usa font e dimensioni accessibili.

10. Versionamento e pubblicazione con GitHub Pages

1. Versiona il sito con Git

Crea una repository su GitHub (es. miosito).
Inizializza la cartella locale:

   git init
   git add .
   git commit -m "Prima versione del sito"
   git remote add origin https://github.com/TUOUSERNAME/miosito.git
   git push -u origin main

Aggiorna il sito facendo nuovi commit e push.

2. Pubblica il sito con GitHub Pages

Vai su Settings del repository GitHub.
Scorri fino alla sezione Pages.
Seleziona il branch principale (main) e la cartella root (/), poi salva.
Dopo pochi minuti, il sito sarà visibile all’indirizzo:

   https://TUOUSERNAME.github.io/miosito/

Suggerimenti:

Aggiorna il sito semplicemente facendo push delle modifiche.
Puoi usare un dominio personalizzato dalle impostazioni di Pages.

⚙️ Automazione CI/CD con GitHub Actions & Ottimizzazione Cloudflare Edge

Costruire pagine HTML/CSS/JS di qualità è solo il primo passo: trasformare il sito statico in una piattaforma professionale pronta per il mercato richiede una pipeline di Continuous Deployment (CI/CD) e una rete CDN Edge con crittografia moderna.

1. Workflow di Pubblicazione Automatica (GitHub Actions)

Invece di caricare i file manualmente o via FTP, crea il file .github/workflows/deploy.yml nel tuo repository. Ad ogni comando git push su main, GitHub Actions eseguirà automaticamente il build e la distribuzione senza alcun downtime:

name: Deploy Static Website

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup GitHub Pages
        uses: actions/configure-pages@v5

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

2. Best Practice di Caching e Sicurezza con Cloudflare CDN

🌐 Configurazione Consigliata per Massime Prestazioni e Zero Costi

CNAME Flattening: Permette di associare un record CNAME direttamente al dominio di secondo livello apex (example.com) anziché solo a sottodomini (www.example.com).
SSL/TLS Full (Strict): Garantisce che tutto il traffico sia cifrato sia tra l'utente e i data center Cloudflare, sia tra Cloudflare e il server origin GitHub Pages, con verifica del certificato crittografico.
HSTS (HTTP Strict Transport Security): Obbliga i browser a comunicare esclusivamente tramite HTTPS con max-age di 1 anno (31536000) e inclusione dei sottodomini.

11. Esempio completo di homepage

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio di Mario Rossi</title>
  <link rel="stylesheet" href="style/main.css">
</head>
<body>
  <header>
    <h1>Mario Rossi</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">Chi sono</a>
      <a href="contact.html">Contatti</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Benvenuto!</h2>
      <p>Scopri i miei progetti e le mie competenze.</p>
      <img src="images/portfolio.png" alt="Immagine portfolio">
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Mario Rossi - <a href="mailto:[email protected]">Contattami</a></p>
  </footer>
  <script src="script/main.js"></script>
</body>
</html>

12. Risorse utili

13. Consigli pratici e buone abitudini

Documenta il progetto: usa il file README.md per spiegare struttura e obiettivi del sito.
Organizza le risorse: mantieni ordinata la struttura delle cartelle.
Scrivi codice commentato: aiuta te stesso e chi collabora con te.
Aggiorna spesso il sito: correggi errori e aggiungi contenuti.
Studia siti di esempio: ispirati a portfolio, blog, landing page.
Sperimenta: prova nuove tecniche, animazioni, layout.

14. Conclusione

Creare un sito web statico è il modo migliore per imparare come funziona il web, mettere in mostra le tue competenze o presentare progetti personali. Con HTML, CSS e JavaScript puoi realizzare pagine moderne, belle e funzionali. Grazie a GitHub Pages, puoi pubblicare il tuo lavoro online in pochi minuti, gratuitamente.

Sperimenta, migliora e condividi il tuo sito con il mondo! 🚀

❓ Domande Frequenti (FAQ Tecniche)

Risposte sintetiche ai dubbi architetturali e operativi più frequenti su questo argomento.

Perché un'architettura Jamstack statica è più sicura di un CMS tradizionale?

Perché non prevede database SQL o linguaggi interpretati lato server esposti su internet, riducendo a zero la superficie di attacco verso SQL injection, exploit di plugin o vulnerabilità remote.

Come impostare correttamente un dominio personalizzato su GitHub Pages con HTTPS?

Configurando record DNS CNAME o record A Anycast verso i server Fastly di GitHub Pages e attivando l'opzione 'Enforce HTTPS' nelle impostazioni della repository per ottenere un certificato Let's Encrypt automatico.

Come raggiungere punteggi 100/100 nei Core Web Vitals su siti statici?

Precaricando font self-hosted WOFF2 con font-display: swap, inlining del CSS critico, formati immagine moderni WebP/AVIF con dimensioni fisse per azzerare il CLS e caricamento differito (defer) degli script.