Estimated reading time: 4 minutes

You want to create a simple and super fast website? Let's start with a practical case: An independent journalist who wants to present his articles on his site. Excellent idea! We use Hugo, a tool that makes everything easier. Imagine a site where the more important news it is great on the front page, below there are Three other news with a small summary, on the side a Menu with evident news and basically i Contacts of the journalist, plus links to pages like “Copyright” and “Privacy”. Let's see how, in practice, without too many technicalities.

The “brain” of your site: the structure and content

Hugo is a generator of “static sites”. This means that, Instead of creating pages every time someone visits your site (How do the most complex sites do), Hugo prepares all the pages in advance, once and for all. This makes your site fast and much secure.

For Hugo, The heart of everything are the text files. You write your articles in a simple format called Markdown (are files that end with .md), and Hugo transforms them into real web pages.

Here's how you could organize the “folder” (directory) e i “sheets” (file) of your site:

.
├── content/              # Qui metti tutti i tuoi articoli e le pagine statiche
│   ├── posts/            # La cartella per tutti gli articoli del giornalista
│   │   ├── la-crisi-idrica-globale.md  # Il tuo articolo principale (la "notizia in grande")
│   │   ├── innovazione-agricola.md     # Un altro articolo (secondario)
│   │   └── come-funziona-hugo.md       # Un terzo articolo (secondario)
│   ├── chi-sono.md       # La pagina "Chi sono" del giornalista
│   ├── contatti.md       # La pagina "Contatti"
│   ├── copyright.md      # La pagina "Copyright"
│   └── privacy.md        # La pagina "Privacy Policy"
├── layouts/              # Qui ci sono le "istruzioni" su come far vedere le tue pagine
│   ├── _default/         # Le istruzioni base
│   │   ├── baseof.html   # Il modello fondamentale per ogni pagina
│   │   └── single.html   # Come far vedere un singolo articolo
│   ├── index.html        # Le istruzioni speciali per la pagina iniziale (homepage)
│   └── partials/         # Pezzetti di istruzioni che puoi riusare
│       ├── footer.html   # Le istruzioni per il "piè di pagina" (contatti, copyright)
│       └── sidebar.html  # Le istruzioni per il "menu laterale" (notizie in evidenza)
├── static/               # Qui metti foto, fogli di stile (CSS) e script (JS)
│   ├── images/
│   │   ├── crisi-idrica.jpg    # Foto per l'articolo principale
│   │   └── droni-agricoltura.jpg # Foto per un articolo secondario
├── public/               # Questa cartella è il tuo sito web pronto!
└── config.toml           # Il file con tutte le impostazioni del tuo sito

Write an article in Markdown: simple and fast

We open one of the files .md To understand how to write an article. We will take ours as an example “big news”: content/posts/la-crisi-idrica-globale.md

---
title: "La Crisi Idrica Globale: Un'Analisi Approfondita"  # Il titolo che vedrai sul sito
date: 2023-10-26T10:00:00+02:00    # La data di pubblicazione
draft: false                       # Metti 'false' per pubblicarlo, 'true' per lasciarlo in bozza
description: "Un'indagine dettagliata sulle cause e le possibili soluzioni alla crescente scarsità d'acqua a livello mondiale." # Un piccolo riassunto
image: "/images/crisi-idrica.jpg"  # La foto principale dell'articolo
featured: true                     # UN'IMPOSTAZIONE SPECIALE: dice a Hugo che questo articolo è importante e va in evidenza!
categories:
  - Ambiente
tags:
  - acqua
  - sostenibilità
author: "Nome Cognome Giornalista" # Chi ha scritto l'articolo
---

## La Crisi Idrica Globale: Un'Emergenza Silenziosa

La disponibilità di acqua dolce è una risorsa sempre più critica a livello globale. Mentre molte aree del mondo soffrono già di siccità estreme...

### Le Cause Profonde della Scarsità

Il cambiamento climatico gioca un ruolo preponderante, alterando i cicli delle precipitazioni...

### Soluzioni e Strategie per il Futuro

Per affrontare questa crisi, è necessario un approccio multilivello che includa:

* **Tecnologie innovative:** Desalinizzazione, riutilizzo delle acque reflue...
* **Politiche di gestione sostenibile:** Regolamentazione dell'uso dell'acqua...

What does every part mean?

• The part between the three sections (---): This is the most important part for Hugo and is called Front Matter. It is like a series of labels that you attack on your article. You say to Hugo what is the headline, the data, If the article is one lamp or are ready, a short description (which may appear in the news list), the’picture associated and if it is an article in evidence (featured: true). You can also add categories and tag To better organize your content, and the name of the author.
• The part under the three sections: This is the real text of your article. Write it using simple formatting Markdown:
  • A # the ## At the beginning of a row it creates a headline (more #, smaller the title).
  • The asterisks (*) they are used to do the lists.
  • The normal text is simply a paragraph.

---

Like Hugo “drawing” Your site

Once you wrote your articles in Markdown, Hugo uses le “instructions” found in the folder layouts/ To transform them into a website.

• On the initial page (index.html below layouts/), Hugo will read your file la-crisi-idrica-globale.md and, see featured: true, He will show him great and in evidence. Then he will look for three more articles (come innovazione-agricola.md) and will only show their title and the description you have inserted.
• The less lateral (sidebar.html below layouts/partials/) will be able to show links to all the articles you have marked with featured: true.
• The footer (footer.html below layouts/partials/) will contain the personal information of the journalist and links to the pages “Copyright” (copyright.md) and “Privacy Policy” (privacy.md), who are simple Markdown files with their text.

Conclusions

With this setting, even without being a programming expert, You can create a clean site, Fast and functional for an independent journalist, focusing only on content writing. Hugo will take care of the most complex part, transforming your words into a navigable website.