Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Zola: creazione di un sito Web

Creiamo da zero un nuovo sito web con Zola, configurando anche le pagine Web, il tema e il contenuto da pubblicare online
Creiamo da zero un nuovo sito web con Zola, configurando anche le pagine Web, il tema e il contenuto da pubblicare online
Link copiato negli appunti

In questa lezione vedremo come creare un sito web da zero utilizzando Zola. Non è necessario conoscere nulla di Zola in anticipo: partiremo dalle basi, concentrandoci sulla pratica e sugli strumenti che Zola ci offre per realizzare un sito web funzionale e personalizzabile.

Creazione di un nuovo progetto con Zola

La prima cosa da fare è creare una cartella per il nostro nuovo progetto. Zola ci permette di farlo facilmente con un solo comando, che genererà la struttura iniziale del nostro sito web.

Per creare il progetto, apriamo il terminale e utilizziamo il comando zola init. Supponiamo di voler chiamare il nostro sito "il_mio_sito". Eseguiamo il seguente comando:

zola init il_mio_sito

Questo comando crea una nuova cartella chiamata il_mio_sito che contiene la struttura base del sito web. All'interno di questa cartella troveremo diverse cartelle e file, tra cui:

  • config.toml: il file di configurazione del sito.
  • content/: la cartella dove andremo a scrivere tutti i contenuti delle pagine.
  • static/: qui andremo a mettere tutte le risorse statiche, come immagini, fogli di stile CSS e file JavaScript.
  • themes/: la cartella per i temi che ci permette di applicare uno stile al sito.
  • templates/: i template HTML usati per definire la struttura delle pagine.

All'interno della cartella il_mio_sito, vedremo anche un file README.md che fornisce una panoramica di base su come usare Zola.

Configurazione del sito

Il file di configurazione config.toml è fondamentale per personalizzare il sito. Apriamo questo file con un editor di testo e modifichiamolo per adattarlo alle nostre esigenze. Ecco un esempio di file di configurazione di base:

base_url = "http://localhost:1111"
title = "Il mio sito"
language_code = "it"
theme = "mytheme"

Nel nostro caso, possiamo modificare il titolo del sito, la lingua e l'URL di base. Se vogliamo applicare un tema predefinito possiamo specificarlo nella configurazione ma, in questo esempio, supponiamo che il tema che vogliamo utilizzare si chiami mytheme.

Creazione del contenuto

Una delle caratteristiche principali di Zola è l’uso di file Markdown per il contenuto. Nella cartella content/ possiamo creare le pagine del nostro sito. Per esempio, creiamo una nuova pagina chiamata index.md, che sarà la nostra homepage.

+++
title = "Benvenuti nel mio sito!"
+++
# Ciao e benvenuti!
Questo è il mio sito web creato con Zola!

La sintassi +++"..."+ all'inizio del file è un blocco di metadati chiamato "front matter" che contiene informazioni aggiuntive sulla pagina, come il titolo. Dopo questa sezione, possiamo scrivere il contenuto della pagina usando il linguaggio Markdown.

Aggiungiamo altre pagine, come una pagina "Chi siamo". Creiamo il file content/chi-siamo.md:

+++
title = "Chi siamo"
+++
# Chi siamo
Siamo un team di sviluppatori che crea siti web statici con Zola!

Creazione di un tema personalizzato con Zola

Ora che abbiamo creato alcune pagine, è il momento di applicare uno stile al nostro sito. Per farlo possiamo scegliere un tema predefinito o crearne uno personalizzato.

Uno degli aspetti più potenti di Zola è la gestione dei temi. I temi definiscono l’aspetto del nostro sito ma Zola ci consente di modificarli o crearli completamente da zero. Utilizzando un tema, possiamo dare rapidamente un aspetto professionale al nostro sito senza dover scrivere tutto il codice CSS da capo. Se vogliamo personalizzare l’aspetto del sito possiamo farlo facilmente modificando i file del tema, come il layout delle pagine o le regole CSS.

In Zola, i temi sono separati dalla struttura del sito e possono essere facilmente scambiati. Per un progetto personale, possiamo scegliere di usare un tema già pronto, oppure creare un tema personalizzato che rispecchi completamente le nostre esigenze estetiche. Inoltre, Zola ci permette di organizzare i temi in modo modulare, così da poter aggiungere nuovi elementi visivi senza intaccare il cuore del sito.

Se desideriamo creare un tema da zero, possiamo farlo all’interno della cartella themes/. Creiamo la cartella themes/mytheme e dentro di essa creiamo una struttura base di file, come ad esempio:

themes/mytheme/
  ├── assets/
  │   └── css/
  │       └── style.css
  ├── layouts/
  │   ├── page.html
  │   └── default.html
  └── partials/
      └── header.html

Iniziamo con il file di layout default.html, che sarà il nostro template principale. Creiamo il file themes/mytheme/layouts/default.html con il seguente contenuto:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="{{ static_url("/css/style.css") }}">
</head>
<body>
  {% include "header.html" %}
  <main>
    {{ content | safe }}
  </main>
</body>
</html>

In questo template, usiamo il motore di template Tera di Zola per inserire dinamicamente il titolo della pagina ({{ title }}) e il contenuto della pagina ({{ content | safe }}). Il file CSS viene caricato tramite il link al file statico che abbiamo indicato precedentemente.

Ora creiamo il file header.html nella cartella partials/:

<header>
  <h1>Benvenuto nel mio sito!</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/chi-siamo/">Chi siamo</a></li>
    </ul>
  </nav>
</header>

Infine, possiamo creare il file style.css nella cartella assets/css/ per aggiungere qualche stile di base al nostro sito:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}
header {
  background-color: #333;
  color: white;
  padding: 1rem;
}
header h1 {
  margin: 0;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul li {
  display: inline;
  margin-right: 15px;
}
nav ul li a {
  color: white;
  text-decoration: none;
}

Avvio del server di sviluppo con Zola

Ora che abbiamo creato la nostra struttura di base, possiamo avviare il server di sviluppo di Zola per visualizzare il sito in locale. Torniamo nel terminale e, all'interno della cartella del progetto, eseguiamo il comando:

zola serve

Questo comando avvierà il server di sviluppo e ci permetterà di vedere il sito all'indirizzo http://localhost:1111. Ogni volta che apportiamo modifiche al contenuto o ai file del tema, Zola ricaricherà automaticamente la pagina per riflettere le modifiche.

Costruzione del sito per la produzione

Quando siamo pronti per pubblicare il nostro sito possiamo usare il comando zola build per generare i file statici da caricare su un server web.

Eseguiamo il comando:

zola build

Questo comando crea una cartella public/ all'interno del progetto che contiene i file pronti per essere pubblicati. Possiamo caricare i file di questa cartella su qualsiasi server web o servizio di hosting che supporta i siti statici.

Conclusioni

In questa lezione abbiamo creato un sito web con Zola, configurando le pagine, il tema e il contenuto. Zola ci ha permesso di generare rapidamente un sito statico e ora possiamo facilmente personalizzarlo aggiungendo nuove funzionalità o ottimizzando il design. Con Zola possiamo concentrarci sulla creazione del contenuto e sull’aspetto del sito senza preoccuparci troppo della gestione di un sistema dinamico. Nella prossima lezione parleremo di GitHub Pages.

Ti consigliamo anche