---
id: pagina-poisson-con-astro
title: Pagina Poisson con Astro
description: Vediamo come creare una pagina Poisson moderna con Astro
author: Antonio De Lucreziis
tags: [astro, website]
---

In questa guida vedremo come creare una pagina Poisson moderna utilizzando Astro, un nuovo framework di sviluppo web statico.

## Setup

Se siete sul vostro pc installate VSCode ed il plugin di Astro.

Poi installiamo NodeJS (se siete su Windows è consigliato [installare WSL con `wsl --install`](https://learn.microsoft.com/en-us/windows/wsl/install) e poi installare i seguenti pacchetti nell'ambiente Linux)

- NodeJS: https://nodejs.org/en/download/package-manager

    ```bash
    curl -fsSL https://fnm.vercel.app/install | bash
    source ~/.bashrc

    fnm use --install-if-missing 20
    node -v 
    npm -v 
    ```

## Creazione di un nuovo progetto Astro

Per prima cosa dobbiamo creare un nuovo progetto di Astro sul nostro computer, possiamo scegliere [uno dei tanti temi disponibili per Astro](https://astro.build/themes/) o partire da un blog di esempio con il seguente comando:

```bash
npm create astro@latest -- --template blog
cd nome-del-progetto
npm install
```

Se ad esempio volessimo usare un tema come [Astro Nano](https://github.com/markhorn-dev/astro-nano) possiamo fare così:

```bash
git clone https://github.com/markhorn-dev/astro-nano sito-poisson
cd sito-poisson
npm install
```

L'ultima cosa importante che c'è da cambiare è che le pagine Poisson sono hostate su `https://poisson.phc.dm.unipi.it/~nomeutente/` che non è la radice del dominio del sito. Quindi dobbiamo cambiare il file `astro.config.mjs`:

```javascript
export default defineConfig({
    ...
    base: '/~nomeutente/',
    trailingSlash: 'always',
    ...
});
```


## Lavorare con Astro

Per vedere il nostro progetto in locale possiamo eseguire il comando:

```bash
npm run dev
```

A questo punto in base al tema scelto possiamo modificare i file dentro `src/pages` per cambiare il contenuto delle pagine. Molti temi sono preimpostati per scrivere contenuti in Markdown, ad esempio per il _template blog_ possiamo scrivere gli articoli per il nostro blog in `src/content/blog/$NOME_POST.md`.

## Deploy

Una volta creato il progetto possiamo caricare appunti e dispense nella cartella `/public` 

