iniziato un post su astro

dev
Antonio De Lucreziis 4 months ago
parent ce42b2bf15
commit eb857b6dba

@ -0,0 +1,71 @@
---
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`
Loading…
Cancel
Save