Pagina Poisson con Astro

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 e poi installare i seguenti pacchetti nell’ambiente Linux)

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

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 o partire da un blog di esempio con il seguente comando:

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

Se ad esempio volessimo usare un tema come “Astro Nano” possiamo fare così:

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:

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

Lavorare con Astro

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

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:

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.