Come Usare DocPad Per Creare Un Sito Web
Tags: docpad, markdow, staticsitegenerator, tutorial
Published: 2019-03-28 11:38:06

---
title: Come Usare DocPad Per Creare Un Sito Web
published: true
description: Come generare velocemente un sito con DocPad e Markdown
tags: docpad, markdow, static site generator, tutorial
---

# Come Usare DocPad Per Creare Un Sito Web

[DocPad](https://docpad.org/) è uno strumento per la creazione di siti statici, che permette di scriverne 
i contenuti in vari linguaggi quali HTML, Markdown, specificarne gli stili con Less e Sass,
definirne parti dinamiche in Javascript, Coffescript e molti altri linguaggi.

In questo articolo realizzeremo un semplice sito web utilizzando DocPad.

## 1. Installazione

_DocPad_ richiede Node come prerequisito. Assicuriamoci di aver installato sul nostro sistema almeno la versione 
0.12 o seguente. Per verificarlo digitiamo:

    $ node -v
    v6.11.4

Ad esempio nel nostro sistema è installata la versione _v6.11.4_ di _Node_ che è più che sufficiente.

Aggiorniamo ora _npm_ ed installiamo _DocPad_:

    npm install -g npm
    npm install -g docpad
    
## 2. Set Up della Cartella di Progetto

Creiamo una cartella che conterrà le defininioni del contenuto del nostro sito. Buona norma è quella di dare alla cartella
un nome che riconduce al progetto DocPad, quindi scegliamo per questo esempio "hello-world":

    mkdir hello-world
    cd hello-world
    docpad init
    
_DocPad_ procederà al set up dello scheletro del sito web e svariati messaggi ci informeranno circa il progresso
dell'attività. Il processo si concluderà comunque nel giro di massimo qualche minuto, anche in funzione della banda
disponibile alla nostra macchina, poichè varie dipendenze devono essere scaricate da Internet:

```
info: Welcome to DocPad v6.79.4 (global installation: ...\node_modules\docpad)
[...]
info: Installing the No Skeleton skeleton into C:\Users\danidemi\workspace\repos\diventa-pro\tutorials-docpad\hello-world
This can take a moment...
[...]
npm notice created a lockfile as package-lock.json. You should commit this file.
[...]
added 193 packages in 47.207s
```
## 3. Analisi della Struttura Creata

_DocPad_ ha creato la seguente struttura:

    /
    ├───node_modules
    └───src
        ├───documents
        ├───files
        └───layouts

Purtroppo `init`, almeno alla versione _docpad v6.79.4_ oggetto di questo articolo, inizializza una struttura di 
directory che non è aggiornata al nuovo layout standard previsto da _DocPad_ stesso. E' necessario quindi rimuovere
due cartelle e creare due nuove:

    > rmdir src\documents
    > rmdir src\files
    > mkdir src\render
    > mkdir src\static 
    
La struttura dovrebbe diventare quindi la seguente:    
    
    /
    ├───node_modules
    └───src
        ├───layouts
        ├───render
        └───static

* `node_modules\`, come in tutti i progetti gestiti da _npm_ contiene i moduli _node_ necessari al progetto.
* `src\static\` è la cartella dove memorizzare tutte le risorse che non necessitano di elaborazione, quali le immagini.
* `src\render\`, in questa cartella dovranno essere salvati tutti i file che devono essere trasformati da _DocPad_, ad esempio:
 file _.md_ (markdown) trasformati in _.html_ oppure _.less_ (less.js) trasformati in _.css_.
* `src\layout\` qui vengono memorizzati i layout, documenti _.html_ che specificano un aspetto generale comune a più pagine,
all'interno del quale viene identificato un punto in cui sono innestati i contenuti generati dai file contenuti nella cartella
`src\render\`.

# 4. Creazione del Contenuto In Markdown

Installiamo prima di tutto il preprocessore _Markdown_ di _DocPad_:

    > docpad install marked
    
_DocPad_ stampa vari messaggi che ci informano del progresso:

```
info: Welcome to DocPad v6.79.4 (local installation: ...\hello-world\node_modules\docpad)
[...]
info: Environment: development
[...]
+ docpad-plugin-marked@2.4.0
added 2 packages in 3.549s
```


Creiamo ora nella cartella `src\render` un file con nome `index.html.md`. La "doppia" estensione indica a _DocPad_ di intendere
il file come _Markdown_ (a causa dell'estensione finale _.md_) da renderizzare come file _HTML_ (visto che l'estensione più interna
è _.html_).

```
# Hello World

La mia prima pagina realizzata con [_DocPad_](https://docpad.org/)
```

# 5. Generazione del Sito Web e Anteprima

Invochiamo ora _DocPad_ in modo che generi il sito _HTML_ corrispondente al contenuto che abbiamo creato:

    > docpad run
    
_DocPad_ produce un output molto interessante:
    
    info: Welcome to DocPad v6.79.4 (local installation: ...\hello-world\node_modules\docpad)
    [...]
    info: Plugins: marked
    [...]
    info: Server started on http://0.0.0.0:9778
    info: In your web browser use http://127.0.0.1:9778
    info: Generating...
    info: Generated 1/1 files in 0.126 seconds
    info: Watching setup starting...
    [...]
    info: The action completed successfully
    
 Si può notare ora come sia apparsa una nuova cartella `out\` nella home del progetto. Tale cartella contiene
 il sito generato da _DocPad_ a partire dai contenuti forniti.
 
 Se puntiamo il nostro browser all'URL specificato da _DocPad_: <http://127.0.0.1:9778> possiamo visualizzare il nostro sito
 grazie ad un web server integrato in _DocPad_ stesso.
 
# 6. Conclusioni

_DocPad_ è sicuramente un tool da prendere in considerazione se si vuole gestire un sito
statico. Il suo meccanismo a plug-in e la conseguente possibilità di scrivere il contenuto
in diversi formati come _Markdown_ molto più user friendly per la creazioni di contenuti ne fanno
uno strumento interessantissimo.

Il codice sorgente di questo esempio è disponibile su [GitHub](https://github.com/diventa-pro/tutorials-docpad/tree/master/hello-world).