---
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. Per prima cosa installeremo NodeJS sul nostro computer, poi creeremo un nuovo progetto Astro e infine dopo averlo generato, lo caricheremo su Poisson.

## 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`.

## Appunti

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

## Deploy

Per caricare il nostro sito su Poisson possiamo usare il comando `rsync`:

```bash
npm run build
rsync -avz dist/ username@poisson.phc.dm.unipi.it:public_html/
```

Dove `username` è il nostro username Poisson. Da notare che gli `/` alla fine di `dist/` e `public_html/` sono importanti per evitare di creare delle cartelle per errore.